Cydo

css box model

Feb 27th, 2020
115
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. index.html
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>Find the precious!</title>
  8. <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11. <nav>
  12. <ul>
  13. <li>FindThePrecious.com</li>
  14. <li>Fellows</li>
  15. <li>Contact us</li>
  16. </ul>
  17. </nav>
  18. <section>
  19. <div class="carousel"></div>
  20. </section>
  21. <section>
  22. <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
  23. </section>
  24. <section>
  25. <article></article>
  26. <article></article>
  27. <article></article>
  28. </section>
  29. <form>
  30. <h2>Contact us</h2>
  31. <input type="email" placeholder="@">
  32. <input type="text" placeholder="&#8962;">
  33. <input type="text" placeholder="I have seen one of them">
  34. <textarea placeholder="Your message"></textarea>
  35. </form>
  36. </body>
  37. </html>
  38.  
  39.  
  40. style.css
  41.  
  42. * {
  43. box-sizing: border-box;
  44. }
  45. html, body {
  46. margin: 0;
  47. padding: 0;
  48. background: #fff;
  49. }
  50.  
  51. .menu {
  52. width: 100%;
  53. height: 70px;
  54. background: rgb(50, 50, 50);
  55. line-height: 70px;
  56. }
  57.  
  58. .logo {
  59. padding: 0;
  60. margin: 0;
  61. color: rgb(200, 200, 200);
  62. margin-left: 30px;
  63. margin-right: 30px;
  64. font-size: 30px;
  65. }
  66.  
  67. .m-left {
  68. float: left;
  69. }
  70.  
  71. .m-right {
  72. float: left;
  73. }
  74.  
  75. .m-link {
  76. text-decoration: none;
  77. color: rgb(200, 200, 200);
  78. font-size: 20px;
  79. padding: 22px;
  80.  
  81. }
  82.  
  83. .m-link:hover {
  84. background: rgb(200, 200, 200);
  85. color: rgb(50, 50, 50);
  86. padding: 22px;
  87. }
  88.  
  89. .carousel {
  90. width: 100%;
  91. margin: 0 auto;
  92. padding: 180px;
  93. box-sizing: border-box;
  94. background: rgb(210, 210, 210);
  95. }
  96.  
  97. .pitch {
  98. color: rgb(50, 50, 50);
  99. text-align: center;
  100.  
  101. }
  102.  
  103. .pitch span {
  104. font-size: 20px;
  105. color: rgb(100, 100, 100);
  106. }
  107.  
  108. .contact-title {
  109. margin-left: 30px;
  110. color: rgb(50, 50, 50);
  111. }
  112.  
  113. .article1 {
  114. width: 400px;
  115. height: 350px;
  116. background: rgb(210, 210, 210);
  117. margin-left: 30px;
  118. margin-bottom: 120px;
  119. float: left;
  120.  
  121. }
  122.  
  123. .article2 {
  124. width: 400px;
  125. height: 350px;
  126. background: rgb(210, 210, 210);
  127. margin-left: 30px;
  128. margin-bottom: 120px;
  129. float: left;
  130. }
  131.  
  132. .article3 {
  133. width: 400px;
  134. height: 350px;
  135. background: rgb(210, 210, 210);
  136. margin-left: 30px;
  137. margin-bottom: 120px;
  138. float: left;
  139. }
  140.  
  141.  
  142. .hr {
  143. clear: both;
  144. margin: 0px 30px 0px 30px;
  145. }
  146.  
  147. .input-email {
  148. background: #fff;
  149. border: 2px solid rgb(50, 50, 50);
  150. padding: 8px 1000px 8px 4px;
  151. margin: 0px 20px 20px 30px;
  152. border-radius: 4px;
  153. }
  154.  
  155. .input-address {
  156. background: #fff;
  157. border: 2px solid rgb(50, 50, 50);
  158. padding: 8px 1000px 8px 4px;
  159. margin: 0px 20px 20px 30px;
  160. border-radius: 4px;
  161.  
  162.  
  163. }
  164.  
  165. .input-class {
  166. background: #fff;
  167. border: 2px solid rgb(50, 50, 50);
  168. padding: 8px 850px 8px 4px;
  169. margin: 0px 20px 20px 30px;
  170. border-radius: 4px;
  171. }
  172.  
  173. .message {
  174. background: #fff;
  175. border: 2px solid rgb(50, 50, 50);
  176. padding: 8px 0 8px 4px;
  177. margin: 0px 1800px 20px 30px;
  178. border-radius: 4px;
  179. min-width : 1180px;
  180. min-height : 120px;
  181. max-width : 1180px;
  182. max-height : 120px;
  183. }
  184.  
  185. .champ {
  186. margin-bottom: 20px;
  187. margin-left: 150px;
  188. }
RAW Paste Data