CSS Card Design Tutorial with Code

Categories: CSS TutorialHTML TutorialWeb Designs

CSS Card Design Tutorial with Code

Contents hide

2 More HTML and CSS Designs With Code and Tutorials

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>