Advertisement
makispaiktis

Codecademy - 13th Course (CSS Solution)

Oct 14th, 2019 (edited)
317
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.52 KB | None | 0 0
  1. html, body {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. header {
  7.   background-color: #333333;
  8.   position: fixed;
  9.   width: 100%;
  10.   z-index: 1;
  11. }
  12.  
  13. nav {
  14.   margin: 0;
  15.   padding: 20px 0;
  16. }
  17.  
  18. nav li {
  19.   color: #fff;
  20.   font-family: 'Raleway', sans-serif;
  21.   font-weight: 600;
  22.   font-size: 12px;
  23.   display: inline-block;
  24.   width: 80px;
  25. }
  26.  
  27. main {
  28.   text-align: center;
  29.   position: relative;
  30.   top: 80px;
  31. }
  32.  
  33. main h1 {
  34.   color: #333;
  35.   font-family: 'Raleway', sans-serif;
  36.   font-weight: 600;
  37.   font-size: 70px;
  38.   margin-top: 0px;
  39.   padding-top: 80px;
  40.   margin-bottom: 80px;
  41.   text-transform: uppercase;
  42. }
  43.  
  44. footer {
  45.   background-color: #333;
  46.   color: #fff;
  47.   padding: 30px 0;
  48. }
  49.  
  50. footer p {
  51.   font-family: 'Raleway', sans-serif;
  52.   text-transform: uppercase;
  53.   font-size: 11px;
  54. }
  55.  
  56. .container {
  57.   max-width: 940px;
  58.   margin: 0 auto;
  59.   padding: 0 10px;
  60.   text-align: center;
  61. }
  62.  
  63. .jumbotron {
  64.   height: 800px;
  65.   background-image: url("http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg");
  66.   -webkit-background-size: cover;
  67.   -moz-background-size: cover;
  68.   -o-background-size: cover;
  69.   background-size: cover;
  70. }
  71.  
  72. .btn-main {
  73.   background-color: #333;
  74.   color: #fff;
  75.   font-family: 'Raleway', sans-serif;
  76.   font-weight: 600;
  77.   font-size: 18px;
  78.   letter-spacing: 1.3px;
  79.   padding: 16px 40px;
  80.   text-decoration: none;
  81.   text-transform: uppercase;
  82. }
  83.  
  84. .btn-default {
  85.   font-family: 'Raleway', sans-serif;
  86.   font-weight: 600;
  87.   font-size: 10px;
  88.   letter-spacing: 1.3px;
  89.   padding: 10px 20px;
  90.   text-decoration: none;
  91.   text-transform: uppercase;  
  92.   margin-bottom: 20px;      
  93. }
  94.  
  95. .supporting {
  96.   padding-top: 80px;
  97.   padding-bottom: 100px;
  98. }
  99.  
  100. .supporting .col {
  101.   font-family: 'Raleway', sans-serif;
  102.   text-align: center;
  103.   display: inline-block;
  104.   width: 200px;
  105.   padding: 30px 0 0 0;
  106. }
  107.  
  108. .supporting img {
  109.   height: 32px;
  110. }
  111.  
  112. .supporting h2 {
  113.   font-weight: 600;
  114.   font-size: 23px;
  115.   text-transform: uppercase;
  116. }
  117.  
  118. .supporting p {
  119.   font-weight: 400;
  120.   font-size: 14px;
  121.   line-height: 20px;
  122.   padding: 0 20px;
  123.   margin-bottom: 20px;
  124. }
  125.  
  126. .supporting a {
  127.   background-color: white;
  128.   color: #333333;
  129.   font-family: 'Raleway', sans-serif;
  130.   font-weight: 600;
  131.   font-size: 12px;
  132.   letter-spacing: 1.3px;
  133.   text-decoration: none;
  134.   text-transform: uppercase;
  135.   padding: 10px;
  136.   margin-bottom: 10px;
  137.   border: 2px solid #333333;
  138. }
  139.  
  140. @media (max-width: 500px) {
  141.   main h1 {
  142.     font-size: 50px;
  143.     padding: 0 40px;
  144.   }
  145.  
  146.   .supporting .col {
  147.     width: 100%;
  148.   }
  149. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement