Copy the code and run by creating a index.html file on your laptop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Birthday Card</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> -->
<style>
body {
font-family: 'Indie Flower', cursive;
background: linear-gradient(135deg, #667eea, #764ba2);
margin: 0;
padding: 0;
height: 100vh;
}
/* CARD CONTAINER */
.card {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 400px;
background: #1f1f2e;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
perspective: 1500px;
box-shadow: 15px 15px 50px rgba(0,0,0,.5);
}
/* TOP EDGE */
.card:before {
content:'';
position:absolute;
top:-5px;
left:0;
width:100%;
height:5px;
background:#2d2d44;
transform-origin:bottom;
transform:skewX(-45deg);
}
/* SIDE EDGE */
.card:after {
content:'';
position:absolute;
top:0;
right:-5px;
width:5px;
height:100%;
background:#3a3a5c;
transform-origin:left;
transform:skewY(-45deg);
}
/* FRONT COVER */
.imgBox {
width:100%;
height:100%;
position:relative;
transform-origin:left;
transition:0.8s ease;
}
/* INSIDE SHADOW */
.bark {
position:absolute;
background:#1f1f2e;
width:100%;
height:100%;
opacity:0;
transition:0.8s;
}
.imgBox img {
width:100%;
height:100%;
object-fit:cover;
}
/* OPEN EFFECT */
.card:hover .imgBox {
transform:rotateY(-180deg);
}
.card:hover .bark {
opacity:1;
box-shadow:300px 200px 100px rgba(0,0,0,.6) inset;
}
/* DETAILS */
.details {
position:absolute;
top:0;
left:0;
padding-left:15px;
margin-top:3px;
z-index:-1;
color:#f5f5f5;
}
.details h4 {
font-size:26px;
line-height:1px;
font-family:'Amatic SC', cursive;
text-align:center;
}
.color1 { color:white; }
.color2 { color:yellow; }
.details p {
font-size:11px;
line-height:13px;
transform:rotate(-5deg);
padding-left:5px;
color:#dcd6f7;
}
.text-right {
text-align:right;
}
</style>
</head>
<body>
<div class="card">
<div class="imgBox">
<div class="bark"></div>
<img src="congratulations.png" alt="Card Image">
</div>
<div class="details">
<h4 class="color1">You are the best!</h4>
<h4 class="color2">(Congratulations)</h4>
<p>Dear Sir,</p>
<p>Main bhot khush hu aapke liye,</p>
<p>But Last night party mai jo aapne gaaliya di hai boss ko, mja hi aa gya😄😄</p>
<p>Video hai mere pass, company group mai daal du?😄</p>
<p>Kidding, aap bhi to mera promotion kroge, team lead thik rhega😉</p>
<p>Baaki to aapko pta hi hai aaj kal ki generation ka😄</p>
<p class="text-right">Congratulations Sir🎉❤️</p>
</div>
</div>
</body>
</html>Original Source https://codepen.io/rikanutyy/pen/PEJBxX
