index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="styles.css" rel="stylesheet">
        <meta charset="UTF-8">
        <title>EJ's Sample Landing Page</title>
    </head>
    <body>
        <section class="header">
            <div class="logo">Flexing Flexbox Manipulation</div>
    
            <ul class="links">
                <li><a href="#">Dead Link</a></li>
                <li><a href="#">Link #2</a></li>
                <li><a href="#">Another Link</a></li>
            </ul>
        </section>
        <section class="hero">
            <div class="text">
                <div class="main">Want to learn how to use flex-box and flex like this? </div>
                <div class="secondary">Click the link below and sign-up.. it's free! (if the button works, lol)</div>
                <button>Sign up</button>
            </div>
            <div class="image">
                <img src="./images/flexbox.jpg" alt="this is a placeholder for an image">
            </div>
        </section>
        <section class="content">
            <div class="first-content">
                <div class="info-header">Some bonuses you'll get when you sign up</div>
                <div class="container">
                    <div class="card">
                        <div class="picture">
                            <img src="./images/starter-pokemon.jpg" alt="this is a placeholder for an image">
                        </div>
                        <div class="sub-text">Your starter pokemon! who doesn't want that?</div>
                    </div>
                    <div class="card">
                        <div class="picture">
                            <img src="./images/lightsaber.jpg" alt="this is a placeholder for an image">
                        </div>
                        <div class="sub-text">Your very own customized light saber (that droid is mine lmao)</div>
                    </div>
                    <div class="card">
                        <div class="picture">
                            <img src="./images/mjolnir.png" alt="this is a placeholder for an image">
                        </div>
                        <div class="sub-text">You'll be worthy of Mjolnir... A very cute one </div>
                    </div>
                    <div class="card">
                        <div class="picture">
                            <img src="./images/help.jpg" alt="this is a placeholder for an image">
                        </div>
                        <div class="sub-text">If you didn't get the first 3 (which you'll definitely will not), you get to ask me for some asian help ;)</div>
                    </div>
                </div>
            </div>
            <div class="second-content">
                <div class="quote">This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who know? All I know is that i looks nice.</div>
                <div class="author">-Thor, God of Thunder</div>
            </div>
            <div class="third-content">
                <div class="text">Call to action! It's time!
                    <div>Sign up for our product by clicking that button right over there!</div>
                </div>
                <div>
                    <button>Sign up</button>
                </div>
            </div>
        </section>
        <footer class="footer">
            <p>
            Copyright ©
            <script>
                document.write(new Date().getFullYear())
            </script>
            edwardjohnfelicia
            </p>
            <a href="https://github.com/edwardjohnfelicia" target="_blank">
                <img class="footer-logo" src="images/GitHub_Logo.png">
            </a>
        </footer>
    </body>
</html>