Untitled

<!DOCTYPE html>
<html lang="en-US">
	<head>
<meta charset="utf-8">
 <link rel="stylesheet" href="quetehtml.css" />
<title>Find the Précious</title>
	</head>

    <body>


    <header>
       <nav>
        <p> <a href = "find_the_precious.php">Find the precious</a>
        </p>
        <p> <a href = "Fellow.php">Fellow</a>
        </p>
        <p> <a href = "The_Ring.php">The Ring</a>
        </p>
        <p> <a href = "get_my_reward.php">Get my reward</a>
        </p>
        <p> <a href = "Best_hunters.php">Best hunters</a>
        </p>
        <p> <a href = "join_the_army.php">Join the army</a>
        </p>
        <p> <a href = "contact_us.php">contact us</a>
        </p>
       </nav>

       <section><h2>Dangerous fellowship try to destroy the ring</h2> <p>Orcs, Goblins, Balrogs, protect your masterSauron !</p>
       </section>
    </header>


     <div id="profiles">


        <p> <a href = "images/thewizard.jpg"><img src = "images/tn_photo2.jpg" alt = "photo" title = "Cliquer pour agrandir"/></a>
        </p>
        <p> <a href = "images/Hobit.jpg"><img src= "images/tn_photo2.jpg" alt = "photo" title = "Cliquer pour agrandir"/></a>
        </p>
        <p> <a href = "images/YummiDwarf.jpg"><img src = "images/tn_photo2.jpg" alt = "photo" title = "Cliquer pour agrandir"/></a>
        </p>

     </div>

     <div id="texte">

        <h2>dolor sit amet, consectet</h2>
        <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse
                 lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum
                 ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor
                 , orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl
                sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
                 Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
                 it odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus
                 orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque
                 fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
        </p>
        <input class="favorite styled"
        type="button"
        value="contact us"/>


        <img src="ici.jpg" alt="nonpaslasbas" title="plus_loin" />
     </div>

     <div id="best_untur">
        <article>
                <h2>jihiuhiugliugyufyufu</h2>

        </article>
        <article>
                <h2>bhggiulgliugiugiugiu</h2>

        </article>
         </div>
         <div id="about_the_ring">
	   <h2>about the ring</h2>
           <p>ibh, in tempus sapien eros vitae ligula. </p><br/>

              <ul style="list-style-type:hiragana;">
                <li>Sous catégorie 2.1</li>
                <li>Sous catégorie 2.1</li>
              </ul>

         </div>

	        <div id="texte2">
                     <h2>dolor sit amet, consectet</h2>
                        <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse
                                 lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum
                                 ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor
                                 , orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl
                                sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.
                                 Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
                                 it odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus
                                 orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque
                                 fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
                        </p>
                        <input class="favorite styled"
                        type="button"
                        value="more info"/>
                </div>

                <div id=contact_us>
                          <form method="post" action="traitement.php">
                                        <p>
                                            <label for="mail">Votre pseudo :</label>
                                            <input type="text" name="mail" id="mail" />

                                            <br />
                                            <label for="adresse">Votre mot de passe :</label>
                                            <input type="text" name="adresse" id="adresse" />
                                            <br />
                                            <label for="adresse">Votre mot de passe :</label>
                                            <input type="text" name="adresse" id="adr" />
                                        </p>
                           </form>
                </div>


   <footer>
      <h3>About us</h3>
      <h3>Fellows</h3>
      <h3>Join our army</h3>
      <h3>FAQ/h3</h3>
      <h3>Rewards conditions</h3>
      <h3>Légal mentions</h3>
      <h2>Sauron4Ever.com</h2>
      <h2>Follow him also on twitter</h2>
   </footer>

</body>

</html>