<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>Landing Page</title>
    </head>
    <body>
        <div class="top">
            <div class="top-container">
                <div class="header">
                    <div class="header-logo">
                        Header Logo
                    </div>
                    <div class="header-links">
                        <ul>
                            <li><a href="#">header link one</a></li>
                            <li><a href="#">header link two</a></li>
                            <li><a href="#">header link three</a></li>
                        </ul>
                    </div>
                </div>
                <div class="hero">
                    <div class="hero-left">
                        <div class="hero-maintext">
                            This website is awesome
                        </div>
                        <div class="hero-subtext">
                            This website has some subtext that goes under the main title. It's a smaller font and the color is lower contrast
                        </div>
                        <div class="hero-button">
                            <button href="#">Sign up</button>
                        </div>
                    </div>
                    <div class="hero-right">
                        <img src="imgs/colorful_waves.png" alt="Bunch of colorful blue, purple and pink waves." width="480">
                    </div>
                </div>
            </div>
        </div>
        <div class="showcase">
            <div class="header">
                Some random information.
            </div>
            <div class="container">
                <div class="box">
                    <div class="border"></div>
                    <div class="text">this is some subtext under an illustration or image</div>
                </div>
                <div class="box">
                    <div class="border"></div>
                    <div class="text">this is some subtext under an illustration or image</div>
                </div>
                <div class="box">
                    <div class="border"></div>
                    <div class="text">this is some subtext under an illustration or image</div>
                </div>
                <div class="box">
                    <div class="border"></div>
                    <div class="text">this is some subtext under an illustration or image</div>
                </div>
            </div>
        </div>
        <div class="quote">
            <div class="quote-container">
                <div class="quote-text">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 knows? All I know is that it looks nice.</div>
                <div class="quote-author">-Thor, God of Thunder</div>
            </div>
        </div>
        <div class="call-to-action">
            <div class="call-container">
                <div class="call-text">
                    <div class="call-maintext">Call to action! It's time!</div>
                    <div class="call-subtext">Sign up for our product by clicking that button right over there!</div>
                </div>
                <button href="#">Sign up</button>
            </div>
        </div>
        <div class="footer">
            <text>Copyright © The Odin Project 2025</text>
        </div>
    </body>
</html>