Advertisement
Guest User

Untitled

a guest
Jul 23rd, 2017
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.63 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:#e8491d 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:#e8491d;
  74. font-weight:bold;
  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:20px;
  167. margin-top:20px;
  168. color:#ffffff;
  169. background-color:#e8491d;
  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