Introducing our stylish flip card creations! With a touch of #html and #css magic, we've brought you a visually stunning way to display content. Our flip cards seamlessly blend form and function, offering an interactive experience that's both engaging and informative. On one side, you'll find eye-catching visuals that draw you in, and with a simple flip, the other side reveals the rich details and information you seek.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b186863b7d.js"
crossorigin="anonymous"></script>
<title>Card</title>
</head>
<body>
<div class="wrapper">
<div class="single-card">
<div class="front"></div>
<div class="back">
<div class="content">
<h2>🚀 Welcome to Coding With Nexus 🚀</h2>
<h4>Are you ready to embark on a journey through the dynamic
world of
web development and full-stack coding? Look no further! </h4>
<p>🔔 Don't Miss Out! Subscribe Now 🔔</p>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
body{
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
height: 100vh;
background-color: antiquewhite;
}
.wrapper, .single-card{
height: 450px;
max-width: 300px;
margin: auto;
position: relative;
}
.wrapper{
perspective: 900px;
}
.single-card{
text-align: center;
transition: all 3s cubic-bezier(0.7, -0.5, 0.3, 1.8);
transform-style: preserve-3d;
}
.wrapper:hover .single-card{
transform: rotateY(180deg);
}
.front , .back{
width: 400px;
position: relative;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front{
cursor: pointer;
height:100%;
background-image: url(Image/Channel\ Logo.jpg);
border-radius: 15px;
width: 450px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
background-size: cover;
background-position: center center;
}
.back{
transform: rotateY(180deg);
position: absolute;
border-radius:15px;
height: 450px;
background: #fff;
}
.content{
padding-top:25px;
}
h4{
padding-top: 15px;
}
p{
padding-top: 25px;
}
Comments
Post a Comment