CSS Card Design Tutorial with Code

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Learn how to make css card design using html and css, this tutorial can be followed by any buddy who has basic knowledge of HTML and CSS.

If you don’t have knowledge of HTML and CSS you can check out my HTML and CSS tutorials on YouTube.

Tutorial

Code for CSS Card Design

<!DOCTYPE html>
<html>
<head>
 <title>Cards</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
}

.card{
 background-color: #f4f3f3;
 width: 350px;
 height: 450px;
 text-align: center;
 margin: 20%;
 border-radius: 10px;
}

.card-background{
 background: linear-gradient(to right, #009688, #4CAF50);
 height: 160px;
 width: 100%;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}

.card-image{
 border-radius: 50%;
 width: 120px;
 height: auto;
 position: relative;
 top: 100px;
 border: 6px solid #f4f3f3;
}

.card-info{
 margin-top: 80px;
 padding: 10px;
}

.fab{
 color: grey;
 font-size: 24px;
 margin: 15px;
 cursor: pointer;
}

.fab:hover{
 color: #524b4b;
}

h1{
 color: #009688; 
}

p{
 color: grey;
}
</style>

</head>
<body>

 <div class="card">

  <!-- it Will contain 5 elements -->

  <div class="card-background">
   
    <img src="https://lh3.googleusercontent.com/-paS9Qm_3L9E/XGK6C0wkWbI/AAAAAAAAAyg/sqwN0ovgb4oD-8cmkNYhLY67SvWZSAnbQCLcBGAs/h120/askjd.jpg" class="card-image">

  </div>
<!-- creating div class for names or heading -->

  <div class="card-info">
   
    <h1>
Demi Lavato</h1>
<br/>
    <p>Demi Lovato is a Grammy nominated and multi-platinum singer, songwriter, actress.</p>
</div>
<div class="card-social-icons">
   

<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-facebook-square"></i>

  </div>
</div>
</body>
</html>

More HTML and CSS Designs With Code and Tutorials

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore