joinThePrecious2

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="author" content="Alex BUTEAU">
        <meta name="description" content="This page was created to regroup information about finding The Precious">
        <title>Find The Precious</title>
    </head>

    <body>
        <header> <!--Ici j'ai considéré que l'image avec écrit "Dangerous fellowshipe" etc faisait partie d'un header qui apparait sur toutes les pages du site, ça changera éventuellement plus tard-->
            <p>FindThePrecious.com</p>
            <nav>
                <ul>
                    <li><a href=# title="Go to the Fellows section">Fellows</a></li>
                    <li><a href=# title="Go to the Contact section">Contact Us</a></li>
                </ul>
            </nav>
            <div class="header_img">
                <img src="https://via.placeholder.com/140" alt="Un placeholder qui remplace la future image d'en-tête">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
        </header>

        <section class="fellows">

            <h2>Fellow wanted dead (or alive if you want to eat them later)</h2>

            <article> <!--Jai considéré que chaque description d'une personne recherchée était un 'article' car contient des infos indépendantes du reste de la page-->
                <h3>The Wizard</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum deleniti praesentium cupiditate eius porro numquam omnis, libero quam totam vitae odit veniam corrupti modi. Magni sed minima asperiores. Nam, exercitationem.</p>
                <img src="https://via.placeholder.com/40" alt="Placeholder pour l'avis de recherche du sorcier">
                <div class="reward">Reward 1000 gold coins</div>
            </article>

            <article> <!--Jai considéré que chaque description d'une personne recherchée était un 'article' car contient des infos indépendantes du reste de la page-->
                <h3>Hobbit #3</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum deleniti praesentium cupiditate eius porro numquam omnis, libero quam totam vitae odit veniam corrupti modi. Magni sed minima asperiores. Nam, exercitationem.</p>
                <img src="https://via.placeholder.com/40" alt="Placeholder 2 pour l'avis de recherche du hobbit 3">
                <div class="reward">DEAD</div>
            </article>

            <article> <!--Jai considéré que chaque description d'une personne recherchée était un 'article' car contient des infos indépendantes du reste de la page-->
                <h3>Yummy Dwarf</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum deleniti praesentium cupiditate eius porro numquam omnis, libero quam totam vitae odit veniam corrupti modi. Magni sed minima asperiores. Nam, exercitationem.</p>
                <img src="https://via.placeholder.com/40" alt="Placeholder 3 pour l'avis de recherche du nain">
                <div class="reward">Reward 250 gold coins</div>
            </article>

        </section>

        <section class="contact">
            <h2>Contact us</h2>
            <form method="post" action="traitement.php"> <!--Le formulaire est sous forme de liste comme indiqué dans le cours, en revanche la mise en forme notamment enlever les puces de la liste sera fait plus tard, dans la partie CSS-->
                    <ul>
                       <li>
                        <label for="mail">Your email address: </label>
                        <input type="email" name="user_mail" id="mail" placeholder="@" />
                        </li>

                        <li>
                        <label for="address">Your address: </label>
                        <input type="text" name="user_address" id="address" placeholder="@"/> <!--sera remplacé par un symbole de maison-->
                        </li>

                        <li>
                        <label for="choix">What happened: </label>
                        <select name="user_choix" id="choix">
                                <option value="seen">I have seen one of them</option>
                                <option value="autre">Autre</option>
                                <option value="encoreAutre">Et encore une autre option</option>
                            </select>
                        </li>

                        <li>
                        <label for="message">Your message: </label>
                        <textarea name="user_message" id="message">Your message</textarea>
                        </li>

                        <li>
                        <button type="submit">Send</button>
                        </li>
                    </ul>
                 </form>
        </section>

        <footer>
            <div class="table">
                <table>
                    <tr>
                        <td><a href=# title="Learn more about us!">About us</a></td>
                        <td><a href=# title="All you questions answered">FAQ</a></td>
                    </tr>
                    <tr>
                        <td><a href=# title="Go to the Fellows section">Fellows</a></td>
                        <td><a href=# title="Learn more about our reward conditions">Reward conditions</a></td>
                    </tr>
                    <tr>
                        <td><a href=# title="Interested in joining our army?">Join our army</a></td>
                        <td><a href=# title="Our legal mentions">Legal mentions</a></td>
                    </tr>
                 </table>
            </div>
            <div class="twitter">
                <a href=# title="Go to our other website">Sauron4Ever.com</a><br/>
                <a href=# title="Click to go on his Twitter account">Follow him also on twitter</a>
            </div>
        </footer>

    </body>
</html>