03 - Structurer une page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <header>
        <nav id="navbar">
            <h1>FindThePrecious.com</h1>
            <a href="#fellows">Fellows</a>
            <a href="#contact">Contact us</a>
        </nav>
        <a href="https://placeholder.com"> <img src="https://via.placeholder.com/1000x90.png?text=Dangerous+fellowship+try+to+destroy+the+ring" alt="header"> </a>
    </header>
    <h2>Fellow Wanted Dead ( or alive if you want to eat them later )</h2>
    <section id="fellowsID">


                <h3>The Wizard</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam reprehenderit omnis quasi, libero voluptas ab optio quisquam? Saepe vero quod sequi, ipsa dolorem eaque cum commodi incidunt assumenda culpa soluta?</p>

            <a href="https://placeholder.com"><img src="https://via.placeholder.com/200.png?text=Reward+1000+Gold+coins" alt="wizard"> </a>


                <h3>Hobbit</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa explicabo nostrum laudantium reiciendis. Optio repellendus esse consequuntur! Et optio pariatur vel obcaecati eaque sequi quos magni quo, quisquam quia eveniet!</p>

            <a href="https://placeholder.com"><img src="https://via.placeholder.com/200.png?text=Dead" alt="HObbit"> </a>


                <h3>Yummy Dwarf</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem placeat neque repellendus et excepturi recusandae iusto, ratione cum delectus deleniti omnis accusamus fugit amet earum ipsa! Adipisci cum pariatur consequuntur.</p>

            <a href="https://placeholder.com"><img src="https://via.placeholder.com/200.png?text=Reward+250+gold+coins" alt="Yummy Dwarf"> </a>

    </section>
    <hr>
    <section id="contact">
        <form>
            <fieldset>
                <label>
                    <input type="email" name="mail">
                    mail
                </label> <br>
                <label>
                    <input type="text" name="adress">
                    adress
                </label>
                <p>
                    <select>
                    <option>I've seen one of them</option>
                    <option>I'm the batman</option>
                    </select>
                </p>
                <textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
                <input type="submit">
            </fieldset>
        </form>
    </section>
    <hr>
    <footer>
        <ul>
            <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae ratione laboriosam fuga ullam aspernatur alias, omnis cumque, adipisci asperiores facilis voluptates ipsam ut rerum eos aperiam deleniti earum dicta atque.</li>
            <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae ratione laboriosam fuga ullam aspernatur alias, omnis cumque, adipisci asperiores facilis voluptates ipsam ut rerum eos aperiam deleniti earum dicta atque.</li>
            <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae ratione laboriosam fuga ullam aspernatur alias, omnis cumque, adipisci asperiores facilis voluptates ipsam ut rerum eos aperiam deleniti earum dicta atque.</li>
            <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae ratione laboriosam fuga ullam aspernatur alias, omnis cumque, adipisci asperiores facilis voluptates ipsam ut rerum eos aperiam deleniti earum dicta atque.</li>
        </ul>
    </footer>
</body>
</html>