SHARE
TWEET

css box model

Cydo Feb 27th, 2020 92 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
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