<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <title>Document</title> </head> <body> <div id="top" class="section"> <!--Header--> <div id="header"> <span id="logo">Header Logo</span> <span id="links"> <a>header link one</a> <a>header link two</a> <a>header link three</a> </span> </div> <!--Hero--> <div id="hero"> <div id="text"> <h1> This website is awesome </h1> <h6> This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast. </h6> <button>Sign up</button> </div> <img> </div> </div> <div id="info" class="section"> <h2> Some random information </h2> <div class="images"> <img> <h6> this is some subtext under an illustration or image </h6> </div> <div class="images"> <img> <h6> this is some subtext under an illustration or image </h6> </div> <div class="images"> <img> <h6> this is some subtext under an illustration or image </h6> </div> <div class="images"> <img> <h6> this is some subtext under an illustration or image </h6> </div> </div> <div id="quote" class="section"> <p> 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. </p> <h3> -Thor, God of Thunder </h3> </div> <div id="bottom" class="section"> <div id="call-to-action"> <p> <h3> Call to action! It's time! </h3> <h6> Sign up for our product by clicking that button right over there! </h6> </p> <button>Sign up</button> </div> </div> <footer> Copyright © The Odin Project 2021 </footer> </body> </html>