Hello Viewers, today in this tutorial, you’ll learn How To Make Creative Card Design Using HTML & CSS.
This Post is about making a Creative Card Design Using HTML & CSS.
To create this project ( Creative Card Design Using HTML & CSS.). First, you need to create two Files one HTML File and another one is CSS File.
First, create an HTML file with the name of index.html and paste the given code in your HTML file.
<html lang="en">
<!-- Created by Amit Tutorial - www.amittutorial.com -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creative Card Using HTML and CSS</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="card">
<section class="imgBox">
<img src="profile.jpg" alt="img">
</section>
<article class="details">
<h2>Olivia</h2>
</article>
</section>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given code in your CSS file.
body{
margin: 0;
height: 100vh;
background: linear-gradient(#0093e9, #80d0c7);
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.card{
position: relative;
width: 30rem;
height: 30rem;
background: white;
box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.card:before,
.card:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
transition: 1s;
z-index: -1;
}
.card:hover:before{
transform: rotate(20deg);
box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.card:hover:after{
transform: rotate(10deg);
box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.imgBox{
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
background: #222;
transition: 1s;
z-index: 2;
}
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.card:hover .imgBox{
bottom: 80px;
}
.details{
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
height: 60px;
text-align: center;
}
That’s all in this post, you’ve successfully created Creative Card Design Using HTML & CSS.
If your code does not work or you’ve faced any problem then comment down your problem. If you’re feeling difficult to understand what I am saying in this post.
You can watch a full video tutorial on this project(Creative Card Design Using HTML & CSS).
Download Source Code: