Advertisement
Guest User

Untitled

a guest
Sep 18th, 2019
138
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.48 KB | None | 0 0
  1. index.html :
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Find the precious!</title>
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <nav>
  11. <ul>
  12. <li><a href="#">FindThePrecious.com</a></li>
  13. <li><a href="#">Fellows</a></li>
  14. <li><a href="#">Contact us</a></li>
  15. </ul>
  16. </nav>
  17. <section>
  18. <div class="carousel"></div>
  19. </section>
  20. <section>
  21. <h2>Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
  22. </section>
  23. <section class=centrage>
  24. <article></article>
  25. <article></article>
  26. <article></article>
  27. </section>
  28. <form>
  29. <h2>Contact us</h2>
  30. <input type="email" placeholder="@">
  31. <input type="text" placeholder="&#8962;">
  32. <!-- <input type="text" placeholder="I have seen one of them">
  33. -->
  34. <select name="#">
  35. <option value="I have seen one of them">I have seen one of them</option>
  36. <option value="A">A</option>
  37. <option value="B">B</option>
  38. <option value="C">C</option>
  39. <option value="D">D</option>
  40. </select>
  41. <textarea placeholder="Your message"></textarea>
  42. </form>
  43. </body>
  44. <footer>
  45. <div class=footergauche><ul>
  46. <li>About us</li>
  47. <li>Fellows</li>
  48. <li>Join our Army</li>
  49. </ul></div>
  50. <div class=footergauche><ul>
  51. <li>FAQ</li>
  52. <li>Reward conditions</li>
  53. <li>Legal Mentions</li>
  54. </ul></div>
  55. <div class=footerdroite><ul>
  56. <li>Sauron4Ever.com</li>
  57. <li>Follow him on Twitter</li>
  58. </ul></div>
  59. </footer>
  60. </html>
  61.  
  62.  
  63. style.css :
  64. *{
  65. box-sizing: border-box
  66. }
  67. body{
  68. margin: 1px;
  69. font-family: 'arial';
  70. color: #463A3A
  71. }
  72.  
  73. nav {
  74. display:flex;
  75. }
  76.  
  77. nav ul{
  78. display: inline-flex;
  79. width: 100%;
  80. list-style-type: none;
  81. margin: 0;
  82. padding: 0;
  83. overflow: hidden;
  84. background-color: #333
  85. }
  86.  
  87. nav li{
  88. float: left;
  89. width: 100px;
  90. font-size: 12px
  91. }
  92.  
  93. nav li:first-child{
  94. width: 200px;
  95. font-size: 15px
  96. }
  97.  
  98. nav li a{
  99. text-decoration: none;
  100. text-align: center;
  101. height: 32px;
  102. display: block;
  103. color: #FBF6F6;
  104. padding: 10px;
  105. }
  106.  
  107. nav li a:hover{
  108. background-color: #E1DCD3;
  109. color: #333
  110. }
  111.  
  112. nav li a:active{
  113. background-color: #E1DCD3;
  114. color: #333
  115. }
  116.  
  117. .carousel{
  118. display: block;
  119. height: 150px;
  120. padding: 0;
  121. border: 0;
  122. background-color: #E1DCD3
  123. }
  124.  
  125. h2{
  126. text-align: center
  127. }
  128.  
  129. span{
  130. font-size: 10px
  131. }
  132.  
  133. .centrage{
  134. text-align: center
  135. }
  136.  
  137. article{
  138. display: inline-flex;
  139. height: 150px;
  140. width: 25%;
  141. background-color: #E1DCD3;
  142. margin: 5px;
  143. padding: 15%;
  144.  
  145. }
  146.  
  147. form h2{
  148. text-align: left;
  149. padding: 10px;
  150. border-top: 1px solid #333
  151. }
  152.  
  153. select, input, textarea {
  154. display: block;
  155. margin-left: auto;
  156. margin-right: auto;
  157. width: 80%;
  158. padding: 12px;
  159. border: 1px solid #ccc;
  160. /*border-radius: 4px; */
  161. box-sizing: border-box;
  162. margin-top: 6px;
  163. margin-bottom: 16px;
  164. }
  165.  
  166. select{
  167. background-color: white
  168. }
  169.  
  170. footer{
  171. display: inline-flex;
  172. background-color: #463A3A;
  173. width: 100%;
  174. padding: 2%;
  175. }
  176.  
  177. footer ul li{
  178. font-size: 14px;
  179. color: white;
  180. list-style: none;
  181. text-align: left;
  182. margin-right: 30px;
  183. margin-left: 0px;
  184. }
  185.  
  186. .footerdroite{
  187. display: flex;
  188. flex-direction: column;
  189. margin-left: 50%
  190. }
  191.  
  192. @media only screen and (max-width:961px) {
  193. h2{
  194. font-size: 2em
  195. }
  196. span{
  197. font-size: 0.5em
  198. }
  199. form h2{
  200. text-align: center
  201. }
  202. article{
  203. display:flex;
  204. background-color: #E1DCD3;
  205. margin: 5px;
  206. padding: 15%;
  207. width: 95%;
  208. }
  209. footer{
  210. display: flex;
  211. flex-direction: column;
  212. background-color: #463A3A;
  213. }
  214. footer ul li{
  215. font-size: 12px;
  216. color: white;
  217. list-style: none;
  218. text-align: center;
  219. margin-right: 30px;
  220. margin-left: 0px;
  221. }
  222. .footerdroite{
  223. margin-left: 0%;
  224. }
  225. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement