API tools faq
paste
Advertisement
StessieFlt

Quête 03-Structurer une page HTML

StessieFlt
Oct 14th, 2019
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FindThePrecious</title>
  6. </head>
  7.  
  8. <body>
  9.     <header>
  10.         <h1 class="headtitle">FindThePrecious.com</h1>
  11.         <nav>
  12.             <ul class="menu">
  13.                <li><a class="menuItem" href="#Fellows">Find The Precious.com</a></li>
  14.                <li><a class="menuItem" href="#Fellows">Fellows</a></li>
  15.                <li><a class="menuItem" href="#Contact_us">Contact us</a></li>
  16.             </ul>
  17.         </nav>
  18.              <a href="https://placeholder.com"><img src="https://via.placeholder.com/250X250" alt=""></a>
  19.     </header>
  20.  
  21.     <main>
  22.         <section>
  23.             <h2 id="Fellows" class="maintitle">Fellows</h2>
  24.             <h3>Fellows wanted dead (or alive, if you want to eat them later)</h3>
  25.         <div>Most Wanted</div>
  26.         <div>Most dangerous</div>
  27.         <div>Already captured</div>
  28.         <article>
  29.             <a href="https://placeholder.com"><img src="https://via.placeholder.com/160X160" alt=""></a>
  30.             <h3>The Wizard</h3>
  31.             <p>Small description...</p>
  32.         </article>
  33.  
  34.         <article>
  35.             <a href="https://placeholder.com"><img src="https://via.placeholder.com/160X160" alt=""></a>
  36.             <h3>Hobbit #3</h3>
  37.             <p>Small description...</p>
  38.         </article>
  39.        
  40.         <article>
  41.             <a href="https://placeholder.com"><img src="https://via.placeholder.com/160X160" alt=""></a>
  42.             <h3>Yummy Dwarf</h3>
  43.             <p>Small description...</p>
  44.         </article>
  45.     </section>
  46.  
  47.     <section>
  48.         <h2 id="Getmyrewards" class="maintitle">Get my rewards</h2>
  49.         <h3>I have captured one of them, how do I get my rewards ?</h3>
  50.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices leo nec quam ultricies, vitae maximus ante maximus. Ut dictum non justo non tristique. Morbi vel feugiat enim, non congue purus. Duis interdum nisl sit amet eros blandit, sed ullamcorper lectus rhoncus. Sed quis tempus augue. Nulla ornare iaculis egestas. Sed metus elit, porttitor ut aliquet quis, tincidunt non enim. Nam dignissim sapien vel lobortis ultrices. Proin feugiat scelerisque urna condimentum sodales. Ut convallis odio non augue egestas bibendum.
  51.  
  52.             Etiam blandit porta augue, vestibulum auctor est dapibus ut. Vivamus aliquam erat non commodo blandit. Curabitur ante tellus, scelerisque eget dignissim a, porttitor et ex. Suspendisse finibus massa eget neque vehicula ullamcorper. Sed urna diam, egestas id erat vitae, pellentesque volutpat mauris. Donec mattis, nunc quis tincidunt aliquam, est nunc congue orci, ut lobortis velit arcu eget orci. Donec mi velit, faucibus consequat justo sit amet, pharetra efficitur turpis. Donec tincidunt eu turpis eget semper. Ut luctus venenatis massa, sit amet mollis augue pellentesque vel. Proin purus nisl, dictum vel augue a, rhoncus efficitur justo.</p>
  53.     </section>
  54.  
  55.         <section>
  56.             <h2 id="BestHunters" class="maintitle">Best Hunters</h2>
  57.             <article><a href="https://placeholder.com"><img src="https://via.placeholder.com/70X70" alt=""></a>
  58.                 <p>ElvesKiller22 <br/> 2 captures - Profile</p></article>
  59.             <article><a href="https://placeholder.com"><img src="https://via.placeholder.com/70X70" alt=""></a>
  60.                 <p>Goblin45 <br/> 1 capture - Profile</p></article>
  61.         </section>
  62.  
  63.         <section>
  64.             <h2 id="TheRing" class="maintitle">The Ring</h2>
  65.             <h3>Ring capabilities</h3>
  66.  
  67.             <table>
  68.                 <tr>
  69.                     <td>Feature</td>
  70.                     <td>Description</td>
  71.                 </tr>
  72.                 <tr>
  73.                     <td>Main</td>
  74.                     <td>One ring to rules them all</td>
  75.                 </tr>
  76.                 <tr>
  77.                     <td>Invisibility</td>
  78.                     <td>You can't see me</td>
  79.                 </tr>
  80.                 <tr>
  81.                     <td>Power</td>
  82.                     <td>Destroy the world</td>
  83.                 </tr>
  84.             </table>
  85.  
  86.             <h3>Why is the ring awesome ?</h3>
  87.             <p>My preciouuuuuuuuuusssss ! </p>
  88.         </section>
  89.  
  90.         <section>
  91.             <h2 id="Contact" class="maintitle">Contact Us</h2>
  92.             <form action="forulaire" method="POST"></form>
  93.               <div class="formrow">
  94.                     <label for="name">Nom :</label>
  95.                     <input type="text" id="name" name="user_name">
  96.               </div>
  97.               <div class="formrow">
  98.                     <label for="mail">Email :</label>
  99.                     <input type="email" id="mail" id="user_email"/>
  100.               </div>
  101.               <div class="formrow">
  102.                     <label for="msg">Message :</label>
  103.                     <textarea id="msg" name="user_message"></textarea>
  104.               </div>
  105.               <div class="formbutton">
  106.                 <button type="submit" name="isFormSubmitted" >Cliquez</button>
  107.               </div>
  108.             </form>  
  109.         </section>
  110.     </main>
  111.  
  112.     <footer>
  113.         <div class="footers">
  114.             <div class="footer1">
  115.                 <a href="https://findtheprecious/aboutus.com" target="_blank" title="About Us">About Us</a>
  116.                 <a href="#fellows" target="_blank" title="Fellows">Fellows</a>
  117.                 <a href="#army" target="_blank" title="Join the best army">Join our army</a>
  118.             </div>
  119.             <div class="footer2">
  120.                 <a href="https://findtheprecious/FAQ.com" target="_blank" title="FAQ">FAQ</a>
  121.                 <a href="https://findtheprecious/rewardcondition.com" target="_blank" title="Reward conditions">Reward conditions</a>
  122.                 <a href="https://findtheprecious/legalmentions.com" target="_blank" title=" Legal mentions">Legal mentions</a>
  123.             </div>
  124.             <div class="footer3">
  125.                 <a href="https://sauron4ever.com" target="_blank" title="Sauron">Sauron4Ever.com</a>
  126.                 <a href="https://twitter.com" target="_blank" title="Twitter">Folllow him also on twitter</a>
  127.             </div>
  128.         </div>
  129.     </footer>
  130.        
  131.            
  132. </body>
  133. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!