Advertisement
adado69wcs

HTML : les bonnes pratiques

Feb 24th, 2020
198
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.60 KB | None | 0 0
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement