SHARE
TWEET

HTML : les bonnes pratiques

adado69wcs Feb 24th, 2020 (edited) 114 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.     <head>
  4.         <title>FindThePrecious.com</title>
  5.         <meta charset="utf-8">
  6.         <meta name="author" content="SONKO Adama">
  7.         <meta name="description" content="Le code HTML de la maquette du site de Sauron">
  8.     </head>
  9.  
  10.     <body>
  11.         <header>            
  12.             <div class="NavBar">
  13.                 <h1>FindThePrecious.com</h1>
  14.                 <nav>
  15.                     <ul>
  16.                         <li><a href="#" title="Fellows">Fellows</a></li>
  17.                         <li><a href="#" title="Contact">Contact us</a></li>
  18.                     </ul>
  19.                 </nav>
  20.             </div>        
  21.         </header>
  22.        
  23.         <main>
  24.  
  25.             <section id="main-image">  
  26.                 <div class="img1">
  27.                     <img src="https://via.placeholder.com/140" alt="description de img1">
  28.                     <div class="text1">
  29.                         <h2>Dangerous fellowship try to destroy the ring</h2>
  30.                         <h3>Orcs, Gobelins, Balrogs, protect your master Sauron !</h3>
  31.                     </div>
  32.                 </div>        
  33.             </section>
  34.  
  35.             <section id="fellows">
  36.                 <h2>Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
  37.                 <div class="wanted">
  38.                     <ul>
  39.                         <li>
  40.                             <div class="card">
  41.                                 <img src="https://via.placeholder.com/140" alt="image du recherché numéro 1">
  42.                                 <h3><strong>The wizard</strong></h3>
  43.                                 <p>lorem ipsum</p>
  44.                             </div>
  45.                         </li>
  46.  
  47.                         <li>
  48.                             <div class="card">
  49.                                 <img src="https://via.placeholder.com/140" alt="image du recherché numéro 2">
  50.                                 <h3><strong>Hobbit#3</strong></h3>
  51.                                 <p>lorem ipsum</p>
  52.                             </div>
  53.                         </li>
  54.  
  55.                         <li>
  56.                             <div class="card">
  57.                                 <img src="https://via.placeholder.com/140" alt="image du recherché numéro 3">
  58.                                 <h3><strong>Yummy Dwarf</strong></h3>
  59.                                 <p>lorem ipsum</p>
  60.                             </div>
  61.                         </li>
  62.                     </ul>
  63.                 </div>
  64.             </section>
  65.  
  66.             <section id="contact">
  67.                 <h2>Contact Us</h2>
  68.                 <div class="form">
  69.                     <form>
  70.                         <label for="mail">
  71.                             <input type="email" id="mail" name="mail" placeholder="@">
  72.                         </label>
  73.                         <label for="adress">
  74.                             <input type="text" id="adress" name="adress" placeholder="">
  75.                         </label>
  76.                         <select id="subject" name="subject">
  77.                             <option value="request">I have see one of them</option>
  78.                             <option value="reservation">I have see one of them</option>
  79.                             <option value="other">I have see one of them</option>
  80.                         </select>  
  81.                         <textarea cols="100" rows="10" placeholder="Your message..."></textarea>
  82.                         <input class="send" type="submit" value="SEND">
  83.                        
  84.                     </form>
  85.                 </div>
  86.             </section>
  87.            
  88.         </main>
  89.        
  90.     <footer>
  91.  
  92.         <div class="footer1">
  93.             <ul>
  94.                 <li><a href="#" title="About">About us</a></li>
  95.                 <li><a href="#" title="Fellows">Fellows</a></li>
  96.                 <li><a href="#" title="Our army">Join our army</a></li>    
  97.             </ul>
  98.         </div>
  99.         <div class="footer2">
  100.             <ul>
  101.                 <li><a href="#" title="FAQ">FAQ</a></li>
  102.                 <li><a href="#" title="Conditions">Reward conditions</a></li>
  103.                 <li><a href="#" title="Legal mentions">Legal mentions</a></li>    
  104.             </ul>
  105.         </div>
  106.         <div class="footer3">
  107.             <ul>
  108.                 <li><a href="#" title="Site Sauron4ever"><strong>Sauron4ever</strong></a></li>
  109.                 <li><a href="#" title="Twitter"><strong>Follow him also on twitter</strong></a></li>    
  110.             </ul>
  111.         </div>
  112.  
  113.     </footer>
  114.  
  115.     </body>    
  116.    
  117. </html>
RAW Paste Data
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
Top