SHARE
TWEET

Untitled

a guest Sep 17th, 2019 121 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* CUSTOM FONTS */
  2.  
  3. @font-face {
  4.   font-family: 'OpenSansRegular';
  5.   src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
  6.        url('../fonts/opensans-regular-webfont.woff') format('woff');
  7.   font-weight: normal;
  8.   font-style: normal;
  9. }
  10.  
  11. /* GLOBAL */
  12.  
  13. * {
  14.     box-sizing: border-box; /* Because this is more sane :) */
  15. }
  16.  
  17. html {
  18.     font-size: 10px; /* So our rem value will be rem * 10 = px, e.g. 1.2rem * 10 = 12px */
  19. }
  20.  
  21. body {
  22.     font-family: 'OpenSansRegular', sans-serif;
  23.     font-size: 1.8rem;
  24.     line-height: 1.4;
  25. }
  26.  
  27. img {
  28.     display: inline-block;
  29.     max-width: 100%;
  30.     vertical-align: middle;
  31. }
  32.  
  33. a {
  34.     color: inherit;
  35. }
  36.  
  37. a:hover {
  38.     text-decoration: none;
  39. }
  40.  
  41. h1, h2, h3, h4, h5, h6 {
  42.     font-family: 'Kurale', serif;
  43.     font-weight: normal;
  44.     line-height: 1.2;
  45. }
  46.  
  47. h1:first-child,
  48. h2:first-child,
  49. h3:first-child,
  50. h4:first-child,
  51. h5:first-child,
  52. h6:first-child {
  53.     margin-top: 0;
  54. }
  55.  
  56. /* HELPERS */
  57.  
  58. .wrapper {
  59.     max-width: 1100px;
  60.     margin: 0 auto;
  61.     box-shadow: 0 0 15px 0 rgba(0,0,0,0.5);
  62. }
  63.  
  64. .clearfix:after {
  65.     content: "";
  66.     display: table;
  67.     clear: both;
  68. }
  69.  
  70. /* HEADER */
  71.  
  72. .header {
  73.     background-image: linear-gradient(#c3da1c, #b0c519);
  74.     color: white;
  75.     border-bottom: 10px solid #24444c;
  76.     padding: 60px 40px;
  77. }
  78.  
  79. .header-logo {
  80.     margin: 0;
  81.     float: left;
  82.     font-size: 6.0rem;
  83. }
  84.  
  85. .header-nav {
  86.     float: right;
  87.     font-family: 'Kurale', serif;
  88.     font-size: 3.0rem;
  89. }
  90.  
  91. .header-nav ul {
  92.     margin: 12px 0 0;
  93.     padding: 0;
  94.     list-style: none;
  95. }
  96.  
  97. .header-nav li {
  98.     margin: 0 5px;
  99.     display: inline-block;
  100.     line-height: 1;
  101. }
  102.  
  103. .header-nav li a {
  104.     display: block;
  105.     border-radius: 4px;
  106.     padding: 10px 18px;
  107.     text-decoration: none;
  108. }
  109.  
  110. .header-nav li a:hover,
  111. .header-nav li a.is-current {
  112.     background-image: linear-gradient(#335159, #24444c);
  113. }
  114.  
  115. /* SECTIONS */
  116.  
  117. .section {
  118.     padding: 40px;
  119. }
  120.  
  121. /* SECTION: ABOUT */
  122.  
  123. .section-about {
  124.     color: #25444d;
  125. }
  126.  
  127. /* SECTION: WORK */
  128.  
  129. .section-work {
  130.     background-color: #9ca1a4;
  131.     color: white;
  132. }
  133.  
  134. .work-list {
  135.     margin: 0 -15px;
  136.     padding: 0;
  137.     list-style: none;
  138.     display: flex;
  139.     flex-wrap: wrap;
  140.     justify-content: space-between;
  141. }
  142.  
  143. .work-list li {
  144.     margin: 0 15px 50px;
  145.     max-width: 200px;
  146. }
  147.  
  148. .work-list li a {
  149.     display: block;
  150.     border: 3px solid white;
  151. }
  152.  
  153. .work-nav {
  154.  
  155. }
  156.  
  157. .work-nav ul {
  158.     margin: 0;
  159.     padding: 0;
  160.     list-style: none;
  161. }
  162.  
  163. .work-nav li {
  164.  
  165. }
  166.  
  167. /* SECTION: CONTACT */
  168.  
  169. .section-contact {
  170.     background-image: linear-gradient(#c3da1c, #b0c519);
  171.     color: white;
  172. }
  173.  
  174. /* FOOTER */
  175.  
  176. .footer {
  177.     background: #26444c;
  178.     color: white;
  179.     padding: 40px;
  180. }
  181.  
  182. .footer p {
  183.     margin: 0;
  184.     text-align: center;
  185. }
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