How to Make a Flip Effect Like a Card Flip in Hostinger Website Builder

The HTML code used in the video:

<style>
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .flip-container {
        width: 200px;
        height: 250px;
        perspective: 1000px;
    }

    .flip-box {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
    }

    .flip-container:hover .flip-box {
        transform: rotateY(180deg);
    }

    .flip-front, .flip-back {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: bold;
        border-radius: 10px;
        text-align: center;
        padding: 10px;
    }

    .flip-front {
        background-color: #007bff;
        color: white;
    }

    .flip-back {
        background-color: #28a745;
        color: white;
        transform: rotateY(180deg);
    }
</style>

<div class="card-container">
    <div class="flip-container">
        <div class="flip-box">
            <div class="flip-front">FIRST CARD</div>
            <div class="flip-back">CARD CONTENT TEXT</div>
        </div>
    </div>

    <div class="flip-container">
        <div class="flip-box">
            <div class="flip-front">Card 2</div>
            <div class="flip-back">Content 2</div>
        </div>
    </div>

    <div class="flip-container">
        <div class="flip-box">
            <div class="flip-front">Card 3</div>
            <div class="flip-back">Content 3</div>
        </div>
    </div>

    <div class="flip-container">
        <div class="flip-box">
            <div class="flip-front">Card 4</div>
            <div class="flip-back">Content 4</div>
        </div>
    </div>
    <div class="flip-container">
        <div class="flip-box">
            <div class="flip-front">Card 5</div>
            <div class="flip-back">Content 5</div>
        </div>
    </div>
    <div class="flip-container">
        <div class="flip-box">
            <div class="flip-front">Card 6</div>
            <div class="flip-back">Content 6</div>
        </div>
    </div>
</div>