For those who don't know, Squid Game is a Korean Series on Netflix which is now very trending and viral. The show even ranked as the top 1 show on Netflix with millions of streams!
In that show, the main character gets a unique business card with a phone number behind it. Today by using CSS Only, we managed to recreate the business card in squid game using CSS.
Do watch the video tutorial I made below for better clarity and understandings.
Paste the code below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!--
This idea is inspired by the Squid Game Series on Netflix and this project is purely for entertainment and educational purposes only
-->
<!DOCTYPE html>
<html>
<head>
<title>Squid Game Card Replica using CSS Only | CodingPorium</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'Courier New', Courier, monospace;
background-color: #c2f9ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.circle{
height: 50px;
width: 50px;
background-color: black;
border-radius: 50%;
}
.triangle{
width:0;
height: 0;
border-left:25px solid transparent;
border-right: 25px solid transparent;
border-bottom:50px solid black;
}
.square{
height: 50px;
width: 50px;
background-color: black;
}
.flip-card{
background-color: transparent;
width:500px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner{
transform:rotateY(-180deg);
}
.flip-card-front, .flip-card-back{
position: absolute;
width:100%;
height:100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front{
background-color: #e3e04d;
display: flex;
justify-content: center;
align-items: center;
color: black;
}
.flip-card-back{
background-color: #e3e04d;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
transform:rotateY(-180deg)
}
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="circle"></div><div class="triangle"></div> <div class="square"></div>
</div>
<div class="flip-card-back">
<p><strong>8650 4006</strong></p>
</div>
</div>
</div>
</body>
</html>
And that's all for this post. Thanks for reading and do subscribe to our YouTube channel to support us.
Till the next one, goodbye!
Post a Comment