Advertisement
Guest User

Untitled

a guest
Jun 27th, 2017
115
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.82 KB | None | 0 0
  1. body{
  2.   font: 15px/1.5 Arial, Helvetica,sans-serif;
  3.   padding:0;
  4.   margin:0;
  5.   background-color:#f4f4f4;
  6. }
  7.  
  8. /* Global */
  9. .container{
  10.   width:80%;
  11.   margin:auto;
  12.   overflow:hidden;
  13. }
  14.  
  15. ul{
  16.   margin:0;
  17.   padding:0;
  18. }
  19.  
  20. .button_1{
  21.   height:38px;
  22.   background:#e8491d;
  23.   border:0;
  24.   padding-left: 20px;
  25.   padding-right:20px;
  26.   color:#ffffff;
  27. }
  28.  
  29. .dark{
  30.   padding:15px;
  31.   background:#35424a;
  32.   color:#ffffff;
  33.   margin-top:10px;
  34.   margin-bottom:10px;
  35. }
  36.  
  37. /* Header **/
  38. header{
  39.   background:#35424a;
  40.   color:#ffffff;
  41.   padding-top:30px;
  42.   min-height:70px;
  43.   border-bottom:#B600FF 3px solid;
  44. }
  45.  
  46. header a{
  47.   color:#ffffff;
  48.   text-decoration:none;
  49.   text-transform: uppercase;
  50.   font-size:16px;
  51. }
  52.  
  53. header li{
  54.   float:left;
  55.   display:inline;
  56.   padding: 0 20px 0 20px;
  57. }
  58.  
  59. header #branding{
  60.   float:left;
  61. }
  62.  
  63. header #branding h1{
  64.   margin:0;
  65. }
  66.  
  67. header nav{
  68.   float:right;
  69.   margin-top:10px;
  70. }
  71.  
  72. header .highlight, header .current a{
  73.   color:#FFFFF;
  74.   font-weight:;
  75. }
  76.  
  77. header a:hover{
  78.   color:#cccccc;
  79.   font-weight:bold;
  80. }
  81.  
  82. /* Showcase */
  83. #showcase{
  84.   min-height:400px;
  85.   background:url('../img/showcase.jpg') no-repeat 0 -400px;
  86.   text-align:center;
  87.   color:#ffffff;
  88. }
  89.  
  90. #showcase h1{
  91.   margin-top:100px;
  92.   font-size:55px;
  93.   margin-bottom:10px;
  94. }
  95.  
  96. #showcase p{
  97.   font-size:20px;
  98. }
  99.  
  100. /* Newsletter */
  101. #newsletter{
  102.   padding:15px;
  103.   color:#ffffff;
  104.   background:#35424a
  105. }
  106.  
  107. #newsletter h1{
  108.   float:left;
  109. }
  110.  
  111. #newsletter form {
  112.   float:right;
  113.   margin-top:15px;
  114. }
  115.  
  116. #newsletter input[type="email"]{
  117.   padding:4px;
  118.   height:25px;
  119.   width:250px;
  120. }
  121.  
  122. /* Boxes */
  123. #boxes{
  124.   margin-top:20px;
  125. }
  126.  
  127. #boxes .box{
  128.   float:left;
  129.   text-align: center;
  130.   width:30%;
  131.   padding:10px;
  132. }
  133.  
  134. #boxes .box img{
  135.   width:90px;
  136. }
  137.  
  138. /* Sidebar */
  139. aside#sidebar{
  140.   float:right;
  141.   width:30%;
  142.   margin-top:10px;
  143. }
  144.  
  145. aside#sidebar .quote input, aside#sidebar .quote textarea{
  146.   width:90%;
  147.   padding:5px;
  148. }
  149.  
  150. /* Main-col */
  151. article#main-col{
  152.   float:left;
  153.   width:65%;
  154. }
  155.  
  156. /* Services */
  157. ul#services li{
  158.   list-style: none;
  159.   padding:20px;
  160.   border: #cccccc solid 1px;
  161.   margin-bottom:5px;
  162.   background:#e6e6e6;
  163. }
  164.  
  165. footer{
  166.   padding:10px;
  167.   margin-top:10px;
  168.   color:#ffffff;
  169.   background-color:#B600FF;
  170.   text-align: center;
  171. }
  172.  
  173. /* Media Queries */
  174. @media(max-width: 768px){
  175.   header #branding,
  176.   header nav,
  177.   header nav li,
  178.   #newsletter h1,
  179.   #newsletter form,
  180.   #boxes .box,
  181.   article#main-col,
  182.   aside#sidebar{
  183.     float:none;
  184.     text-align:center;
  185.     width:100%;
  186.   }
  187.  
  188.   header{
  189.     padding-bottom:20px;
  190.   }
  191.  
  192.   #showcase h1{
  193.     margin-top:40px;
  194.   }
  195.  
  196.   #newsletter button, .quote button{
  197.     display:block;
  198.     width:100%;
  199.   }
  200.  
  201.   #newsletter form input[type="email"], .quote input, .quote textarea{
  202.     width:100%;
  203.     margin-bottom:5px;
  204.   }
  205. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement