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.
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
- Responsive Landing Page Design Using HTML and CSS Only
- Responsive Image Gallery Design Using HTML and CSS Only
- Working Digital Clock Design Using HTML, CSS and JavaScript
- Beautiful Card Design Tutorials HTML and CSS Only
- Beautiful Animated Button Using CSS
- Card UI Design Using CSS
- Toggle Button Design Using CSS
- iPhone Animation Using CSS
- Scrolling effect Using CSS
