fintheprecious2

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>FindThePrecious</title>
        <meta name="author" content="Chloe Trottin">
        <meta name="description" content="FindThePrecious aims at protecting citizen from dangerous fellowship trying to destroy the ring. Either have you seen or catched one, contact us to reach our ultimate goal: Fellow wanted dead!">
    </head>


    <body>
        <header>
            <h1>FindThePrecious</h1>
            <nav>
                <ul>
                    <li><a>Fellows</a></li>
                    <li><a>Contact us</a></li>
                </ul>
            </nav>
        </header>

        <section>
        <div id="slider">
    <div id="slides">

        <figure id="slide1"><h2>Dangerous fellowship try to destroy the ring</h2>
        <p>Orcs, Gobelins, Balrogs, protect your master Sauron!</p>
            <a href="https://placeholder.com"><img src="https://via.placeholder.com/350" alt="image d'orcs, gobelins et balrogs protégeant leur maitre Sauron"></a>

        </figure>
        <figure id="slide2"><h2> Sed non risus.  </h2>
        <p>Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
            <a href="https://placeholder.com"><img src="https://via.placeholder.com/350" alt="image du ring protéger des fellows"></a>
        </figure>
        </div>
</div>
</section>

<section>
        <h2>Fellow wanted dead</h2>
        <p>(or alive if you want to eat them later)</p>
        <a href="https://placeholder.com"><img src="https://via.placeholder.com/150" alt="Portait de Fellow The Wizard recherché, cheveux bruns court, moustache et taches de rousseurs"></a>
        <a href="https://placeholder.com"><img src="https://via.placeholder.com/150" alt="Portrait de Fellow The hobbit mort, petit peau clair, grandes oreilles"></a>
        <a href="https://placeholder.com"><img src="https://via.placeholder.com/150" alt="Portrait de Yummy dwarf recherché, nain, cheveux rouge, barbe rousse"></a>
</section>

    <hr/>

<section>
    <h2>Contact us</h2>

<form>
      <label>E-mail</label> <br/>
      <input type="email" class="email-field" name="user_email" placeholder="@" />
        <br/>
        <label>Address</label> <br/>
        <input type="text" class="email-field"  name="user_adress" placeholder=Address />
<br/>
          <p>

            <label>Current situation</label> <br/>
             <select id = "dropdown">
               <option value = "1">I have seen one of them</option>
               <option value = "2">I have caught one of them</option>
             </select>
          </p>
<label>Message</label> <br/>
<input id="Message" class="message-field" placeholder="Your message " /> <br/> <br/> <input type="submit" value="Send!" class="ctasubmitcolor" />
  </form>


</section>

<footer>

    <br/>
  <p> <a href="https://www.google.fr" title="Learn more about who we are and why we want to protect the ring">About us</a><br/>

    <a href="https://www.google.fr" title="Check out dangerous fellow listed and highly wanted">Fellows</a><br/>

<a href="https://www.google.fr" title="Discover the process to help catch the fellow and protect our master">Join our army</a> </p>

<br/>
    <p><a href="https://www.google.fr" title="Find answers to your questions about findtheprecious">FAQ</a> <br/>

 <a href="https://www.google.fr" title="Find more about conditions to match to have a reward">Reward conditions</a> <br/>

    <a href="https://www.google.fr" title="Check out legal conditions of Findtheprecious">Legal mentions</a> </p>

<br/>
    <p><a href="http://www.sauron4ever.com" title="Join Sauron fan club">Sauron4Ever.com</a> <br/>

     <a href="http://www.twitter.com" title="don't miss any news about our dear Sauron thanks to twitter">Follow him also on twitter</a> </p>

  </footer>
    </body>
</html>