03 - Structurer une page HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>findThePrecious.com</title>
        <meta name="description" content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta atque laudantium pariatur dolor reprehenderit sint, ratione ut, repellendus dolore blanditiis, quaerat sapiente. Sit officia recusandae voluptatem fuga maiores nam quae?">
        <link href="...CSS" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1 class="bigtitle"> FindthePrecious.com</h1>
            <nav class="headernav">
                <a href="#fellows">Fellows</a>
                <a href="#contactus">Contact us</a>
            </nav>
        </header>
            <div id="slider">
                <figure>
                    <img src="https://via.placeholder.com/728x90?text=New+weapons+available+for+Orcs" alt="Newweapons available for Orcs">
                    <img src="https://via.placeholder.com/728x90?text=Dangerous+fellowship+try+to+destroy+the+ring " alt="Dangerous fellowship">
                    <img src="https://via.placeholder.com/728x90?text=Come+and+join+us+now" alt="Come and join us now">
                </figure>
            </div>
        <section>
            <h2 id="fellows" class="title">Fellows wanted dead</h2><p>(or alive if you want to eat them later)</p>
            <ul class="trombi">
                <li>
                    <img src="https://via.placeholder.com/300x250?text=Reward+1000+gold+coins " alt="wizard">
                    <h3 class="littletitle">The Wizard</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, quae aperiam architecto esse excepturi rem exercitationem consectetur? Vitae eum rerum inventore quas quaerat quidem quia velit, autem, perspiciatis voluptas deserunt!</p>
                </li>
                <li>
                    <img src="https://via.placeholder.com/300x250?text=DEAD" alt="hobbit">
                    <h3 class="littletitle">Hobbit #3</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex culpa eaque, eius quis debitis repellat hic, omnis possimus voluptate cum perferendis temporibus neque quam nemo dolor nobis esse, totam veniam?</p>
                </li>
                <li>
                    <img src="https://via.placeholder.com/300x250?text=Reward+250+gold+coins " alt="Dwarf">
                    <h3 class="littletitle">Yummy Dwarf</h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere iste ducimus quidem voluptatum libero labore repellendus cum voluptate ipsa tempore quaerat quasi, autem quibusdam vero veritatis exercitationem illo incidunt maxime.</p>
                </li>
            </ul>
        </section>
        <hr/>
        <section>
            <h2 id="contactus" class="title">Contact us</h2>
            <form action ="contact.html">
               <fieldset>
                <div>
                  <input type="email" required id="email" name="email" placeholder="@">
                </div>
                <div>
                  <input type="text" required name="Adress" placeholder="Address">
                </div>
                <div>
                    <select>
                        <option value="">--Please choose an option--</option>
                        <option value="seen">I have seen one of them</option>
                        <option value="reward">I don't receive my reward</option>
                    </select>
                </div>
                <div>
                  <textarea required id="message" name="message"  cols="30" rows="10"></textarea>
                </div>
                <button type="submit">Send !</button>
             </fieldset>
            </form>
        </section>
        <footer>
            <nav class="footernav">
                <a href="">About us</a>
                <a href ="">Fellows</a>
                <a href ="">Join our Arm</a>
                <a href ="">FAQ</a>
                <a href ="">Reward conditions</a>
                <a href ="">Legal mentions</a>
            </nav>
            <nav class="socialmedia">
                <a href="">Sauron4Ever.com</a>
                <a href="">Follow him also on twitter</a>
            </nav>
        </footer>
    </body>
</html>