SHARE
TWEET

Codecademy - 16th Exercise (CSS - MY WEBSITE STYLE GUIDE)

makispaiktis Oct 19th, 2019 (edited) 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. body{
  2.   background-color: rgb(250,250,250);
  3.   position: relative;
  4.   left: 40px;
  5.   font-family: "Roboto";
  6. }
  7.  
  8. header h1{
  9.   font-family: "Nunito Sans";
  10. }
  11.  
  12. section{
  13.   margin: 30px auto;
  14. }
  15.  
  16. section h2{
  17.   font-family: Poppins;
  18. }
  19.  
  20.  
  21.  
  22. /* 1. Colors Section */
  23. section.colors{
  24.   padding: 15px 10px;
  25.   border-style: solid;
  26.   border-color: grey;
  27.   border-width: 3px;
  28. }
  29.  
  30.  
  31. .colors div{
  32.   display: inline-block;
  33.   width: 30%;
  34.   text-align: center;
  35.   margin: 20px 5px;
  36.   font-family: Poppins;
  37. }
  38.  
  39. .colors .cool-blue{
  40.   color: white;
  41.   background-color: #2d5dcc;
  42. }
  43.  
  44. .colors .pink{
  45.   color: black;
  46.   background-color: #d957d9;
  47. }
  48.  
  49. .colors .mint-green{
  50.   color: black;
  51.   background-color: #4fe0b0;
  52. }
  53.  
  54. .colors .beige{
  55.   color: black;
  56.   background-color: #efd9ca;
  57. }
  58.  
  59.  
  60.  
  61. /* 2. Fonts Section*/
  62. section.fonts{
  63.   padding: 15px 10px;
  64.   border-style: solid;
  65.   border-color: grey;
  66.   border-width: 3px;
  67. }
  68.  
  69.  
  70. .fonts div{
  71.   display: inline-block;
  72.   width: 45%;
  73.   text-align: left;
  74.   margin: 20px 5px;
  75.   font-family: Poppins;
  76. }
  77.  
  78. .fonts .source-code-pro{
  79.   font-family: "Source Code Pro";
  80. }
  81.  
  82. .fonts .nunito-sans{
  83.   font-family: "Nunito Sans";
  84. }
  85.  
  86. .fonts .poppins{
  87.   font-family: "Poppins";
  88. }
  89.  
  90. .fonts .underline{
  91.   font-size: 20px;
  92.   color: red;
  93. }
  94.  
  95.  
  96.  
  97. /* 3. Text Styles Section*/
  98. section.text-styles{
  99.   padding: 15px 10px;
  100.   border-style: solid;
  101.   border-color: grey;
  102.   border-width: 3px;
  103. }
  104.  
  105.  
  106. .text-styles div{
  107.   display: block;
  108.   width: 100%;
  109.   text-align: left;
  110.   margin: 20px 5px;
  111. }
  112.  
  113. .text-styles .h1{
  114.   font-weight: 700;
  115.   font-size: 26px;
  116.   font-family: Nunito Sans;
  117. }
  118.  
  119. .text-styles .h2{
  120.   font-weight: 500;
  121.   font-size: 18px;
  122.   font-family: Poppins;
  123. }
  124.  
  125. .text-styles .p{
  126.   font-weight: 400;
  127.   font-size: 14px;
  128.   font-family: Poppins;
  129. }
  130.  
  131.  
  132. /* Footer Section */
  133. footer{
  134.   position: relative;
  135.   left: 20px;
  136.   margin: 30px auto;
  137. }
  138.  
  139. footer a{
  140.   color: red;
  141. }
  142.  
  143. footer:hover{
  144.   position: relative;
  145.   left: 100px;
  146.   margin: 30px auto;
  147. }
  148.  
  149. footer a:hover{
  150.   color: rebeccapurple;
  151. }
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