Guest User

Css

a guest
Aug 21st, 2019
325
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