CSS Card Design Tutorial with Code

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers

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

Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers