findThePrecious.com

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>find the precious</title>
    <meta name="author" content="Anne Quinkenstein">
    <meta name="description" content="Lorem ipsum dolor sit amet.">

  </head>
  <body>
    <header>
        <h1>FindthePrecious.com</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#Fellows" title="Lorem ipsum dolor sit amet.">Fellows</a></li>
            <li><a href="#Contact" title="Lorem ipsum dolor sit amet.">Contact us</a></li>
        </ul>
    </nav>
    <main>

   <div id="banner">
    <img src="http://via.placeholder.com/140x140" alt="placeholder">
    <h3> Dangerous fellowship try to destroy the ring</h3>
    <h4> Orcs,Goblins,Balrogs,protect your Master Sauron!</h4>
    </div>

    <section>
    <h2 id="Fellows">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>

      <p>Reward 1000 gold coins</p>
   <figure>
     <img src="https://via.placeholder.com/75x75" alt="Portrait of the wizard">
    <figcaption>The Wizard</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet... </p>

    <figure>
    <img src="https://via.placeholder.com/75x75?text=DEAD" alt="Portrait of the Hobbit #3">
    <figcaption>Hobbit #3</figcaption>
   </figure>
   <p>Lorem ipsum dolor sit amet...</p>

    <p>Reward 1000 gold coins</p>
   <figure>
    <img src="https://via.placeholder.com/75x75" alt="Portrait of the Yummy Dwarf">
    <figcaption>Yummy Dwarf</figcaption>
   </figure>
   <p>Lorem ipsum dolor sit amet...</p>

   </section>

  <section>
   <hr/>

    <h2 id="Contact">Contact us</h2>

    <form>
     <ul>
    <li>
        <label for="email">Email</label>
        <input type="email" name="user_email" id="email">
        </li>
    <li>
    <label for="address">Address</label>
    <input type="text" name="user_address" id="address">
     </li>
     <li>
    <select>
      <option>I have seen one of them .. </option>
      <option>Lorem ipsum dolor sit amet1</option>
      <option>Lorem ipsum dolor sit amet2</option>
      <option>Lorem ipsum dolor sit amet3</option>
      <option>Lorem ipsum dolor sit amet4</option>
    </select>
    </li>
    <li>
    <label for="message"> Your Message </label>
      <textarea name="user_message" placeholder="Your message" id="message"></textarea>
    </li>
    <li>
    <p class="button">
    <button type="submit">Send!</button>
    </li>
     </ul>
    </form>

  </section>

</main>
<footer>
    <ul>
        <li><a href="#AboutUs" title="Lorem ipsum dolor sit amet.">About Us</a></li>
        <li><a href="#Fellows" title="Lorem ipsum dolor sit amet.">Fellows</a></li>
        <li><a href="#JoinArmy" title="Lorem ipsum dolor sit amet.">Join our army</a></li>
        <li><a href="#FAQ" title="Lorem ipsum dolor sit amet.">FAQ</a></li>
        <li><a href="#RewardConditions" title="Lorem ipsum dolor sit amet.">Reward Conditions</a></li>
        <li><a href="#LegalMentions" title="Lorem ipsum dolor sit amet.">Legal mentions</a></li>
    </ul>

    <a href="Loreipsum" title="Lorem ipsum dolor sit amet.">Sauron4ever.com</a>
    <a href="Loreipsum" title="Lorem ipsum dolor sit amet.">Follow him also on twitter</a>

</footer>

  </body>
</html>