index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Odin Landing Page</title>
        <link rel="stylesheet" href="style.css">    

    </head>


<body>
    <div class="header">
        Header Logo
        <div class="container">
            <ul>header link one</ul>
            <ul>header link two</ul>
            <ul>header link three</ul>
        </div>
    </div>

    <div class="sectiondark">
        <div class="containercol">
            <h1>This website is nuts</h1>
            <p>This website has some subtext that goes here under the main title. 
                It's a smaller font and the color is lower contrast</p>
            <button class="button button1">Sign up</button>
        </div>
        <img src="images/personandleaf.jpg" alt="Scientist person holding a leaf" width="30%" height="30%">
        
    </div>

    <h2>Some random information.</h2>
    <div class="section2"> 
        <div class="card">
            <img src="images/card1image.jpg" alt="Nut and fruit snack" width="100px" height="100px">            
            <p>This is some subtext and the nuts I promised</p>        
        </div>
        <div class="card">
            <img src="images/card2image.jpg" alt="exercise equipment" width="100px" height="100px">
            <p>This is some subtext and a one legged athlete</p>
        </div>
        <div class="card">
            <img src="images/card3image.jpg" alt="meditation and dog" width="100px" height="100px">
            <p>Look how much focus it takes not to pet the dog</p>
        </div>
        <div class="card">
            <img src="images/card4image.jpg" alt="balanced rocks by ocean" width="100px" height="100px">
            <p>These are some rocks that are supposed to inspire you somehow </p>
        </div>
    </div>

    <div class="greybody">
        <h3>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.
        </h3>
        <h4>-Somebody Important Maybe</h4>
    </div>

    <div class="section1">
        <div class="blue_container">
            <div class="containercol2">
                <h5>Call to action! It's time!</h5>
                <p>Sign up for our product by clicking that button right over there!</p>
            </div>
            <button class="button button2">Sign up</button>
        </div>

    </div>

    <div class="footer">
        Copyright &copy George Gabechava 2023
    </div>

</body>


</html>