How to Create Flip Card Using HTML and CSS

 

 

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;

}