SHARE
TWEET

Css

a guest Aug 21st, 2019 171 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Universal Styles */
  2.  
  3. html {
  4.   font-size: 16px;
  5.   font-family: "Arial", sans-serif;
  6. }
  7.  
  8. body {
  9.   background-color: #F2F2F2;
  10. }
  11.  
  12. h1 {
  13.   color: white;
  14.   font-size: 28px;
  15.   font-family: Georgia;
  16.   text-transform: uppercase;
  17.   text-align: center;
  18. }
  19.  
  20. h2 {
  21.   font-size: 24px;
  22.   font-weight: 700;
  23.   line-height: 2.5;
  24.   font-family: Georgia;
  25.   word-spacing: 0.05em;
  26.   letter-spacing: 0.02em;
  27. }
  28.  
  29. a {
  30.   text-decoration: none;
  31. }
  32.  
  33. p {
  34.   margin: 16px 0;
  35.   font-family: Helvetica;
  36. }
  37.  
  38. strong {
  39.   font-weight: bold;
  40. }
  41.  
  42. #serif, /* Offset linked sections to account for header. */
  43. #sans,
  44. #mono {
  45.   padding-top: 77px;
  46.   margin-top: -77px;
  47. }
  48.  
  49. /* Header */
  50.  
  51. .header {
  52.   font-family: "Arial", sans-serif;
  53.   font-size: 14px;
  54.   line-height: 1.25;
  55.   background-color: #fff;
  56.   position: fixed;
  57.   top: 0;
  58.   width: 100%;
  59.   font-weight: 900;
  60. }
  61.  
  62. .header li {
  63.   display: inline-block;
  64. }
  65.  
  66. .header a {
  67.   display: block;
  68.   color: #4A4A4A;
  69.   padding: 30px 20px;
  70. }
  71.  
  72. a.home {
  73.   color: #4D00FF;
  74. }
  75.  
  76.  
  77. /* Banner Section */
  78.  
  79. .banner {
  80.   background-color: #4D00FF;
  81.   padding: 100px 0;
  82.   margin-top: 77px;
  83.   text-align: center;
  84.   font-weight: bold;
  85.   line-height: 1.4;
  86. }
  87.  
  88. .banner p {
  89.   border-top: 1px solid #fff;
  90.   border-bottom: 1px solid #fff;
  91.   padding: 10px;
  92.   color: #ffffff;
  93. }
  94.  
  95. /* Editorial Sections */
  96.  
  97. .editorial {
  98.   padding: 20px;
  99.   margin: 20px 0;
  100.   text-align: center;
  101.   color: #4C4C4C;
  102. }
  103.  
  104. /* Font Card Sections */
  105.  
  106. .font-card {
  107.   background-color: #ffffff;
  108.   margin: 50px 0;
  109.   padding: 20px 50px;
  110. }
  111.  
  112. .font-card .creator {
  113.   font-size: 20px;
  114.   line-height: 1.25;
  115.   font-style: italic;
  116. }
  117.  
  118. .sample {
  119.   display: inline-block;
  120.   padding: 0 20px;
  121.   margin: 20px;
  122. }
  123.  
  124. .sample h2 {
  125.   line-height: 1.5;
  126. }
  127.  
  128. .sample .text {
  129.   color: #4D00FF;
  130.   font-size: 100px;
  131. }
  132.  
  133. .garamond .sample .text {
  134.     font-family: garamond
  135.  
  136. /* Add styles for the Helvetica font here */
  137.  
  138. /* Add styles for the Space Mono font here */
  139.  
  140. .bold {
  141.   font-weight: 900;
  142. }
  143.  
  144. .regular {
  145.   font-weight: normal;
  146. }
  147.  
  148. .italic {
  149.   font-weight: normal;
  150.   font-style: italic;
  151. }
  152.  
  153. /* Media Queries */
  154.  
  155. @media only screen and (max-width: 535px) {
  156.   .header {
  157.     font-size: 14px;
  158.   }
  159.  
  160.   .header a {
  161.     padding: 30px 20px;
  162.   }
  163.  
  164.   a.home {
  165.     display: none;
  166.   }
  167. }
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top