Motivational Quotes/card.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="card.css">
    <title>Valentine</title>
</head>
<body>
    <div class="cards">
    <div class="card card-one">
        <div class="card-side card-front one" id="1-front">
            <div class="text">
            <span>SOMETIMES</span>
            <br>
            <span>YOU HAVE TO BE</span>
            <br>
            <span>YOUR OWN HERO</span>
        </div>
        </div>
    </div>

    <div class="card card-two">
        <div class="card-side card-front two" id="2-front">
            <div class="text">

            
            <span>REALLY</span>
            <br>
            <span>DON'T WORRY!</span>
            <br>
            <span>EVERYTHING WILL BE OKAY!!</span>
           </div>
        </div>
    </div>

    <div class="card card-five">
        <div class="card-side card-front five" id="5-front">
            <div class="text">
                <span>JUST BE YOUR</span>
                <br>
                <h3>BEAUTIFUL SELF</h3>
            </div>
        </div>
    </div>

    <div class="card card-three">
        <div class="card-side card-front three" id="3-front">
            <div class="text">
                <span>ONE DAY OR</span>
                <br>
                <h3>DAY ONE</h3>
                <span>YOU DECIDE</span>
            </div>
        </div>
    </div>
    
    <div class="card card-four">
        <div class="card-side card-front four" id="4-front">
            <div class="text">
                <span>DO NOT COMPARE</span>
                <span>YOURSELVES TO OTHERS</span>
            </div>
        </div>

    </div>
</div>

</body>
</html>