Advertisement
makispaiktis

Codecademy - 12th Exercise (Davie's Burgers After Edit)

Oct 9th, 2019 (edited)
309
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.03 KB | None | 0 0
  1. /* Universal Styles */
  2.  
  3. body {
  4.   background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_foodlogo.png");
  5.   text-align: center;
  6.   font-family: 'Roboto', sans-serif;
  7.   font-size: 18px;
  8. }
  9.  
  10. a {
  11.   text-decoration: none;
  12. }
  13.  
  14. /* Navigation */
  15.  
  16. nav {
  17.   text-align: center;
  18. }
  19.  
  20. nav img {
  21.   width: 180px;
  22.   margin: 0 auto;
  23.   display: block;
  24. }
  25.  
  26. nav span {
  27.   display: block;
  28.   font-size: 16px;
  29.   font-weight: 100;
  30.   letter-spacing: 2px;
  31.   margin: 10px 0px;
  32. }
  33.  
  34. nav a {
  35.   color: #666666;
  36. }
  37.  
  38. /* Content Container */
  39.  
  40. .content {
  41.   height: 500px;
  42.   width: 100%;
  43.   margin: 10px auto;
  44.   overflow: scroll;
  45. }
  46.  
  47. /* Content Header */
  48.  
  49. .header {
  50.   background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  51.   background-position: center;
  52.   background-size: cover;
  53. }
  54.  
  55. .header h1 {
  56.   background-color: #05A8AA;
  57.   color: #FFF;
  58.   font-family: 'Oswald', sans-serif;
  59.   font-size: 40px;
  60.   font-weight: 300;
  61.   line-height: 40px;
  62.   height: 320px;
  63.   width: 68%;
  64.   padding: 20px;
  65.   margin: 0 auto;
  66. }
  67.  
  68. /* Content Body */
  69.  
  70. .content .body {
  71.   width: 90%;
  72.   margin: 0 auto;
  73. }
  74.  
  75. .body p {
  76.   color: #333333;
  77.   font-weight: 100;
  78.   line-height: 34px;
  79.   width: 90%;
  80.   margin-top: 18px;
  81. }
  82.  
  83. /* Content Button */
  84.  
  85. .button {
  86.   border-radius: 4px;
  87.   color: #05A8AA;
  88.   display: block;
  89.   font-weight: 700;
  90.   width: 200px;
  91.   padding: 20px;
  92.   border: 1px solid blue;
  93.   margin: 40px auto;
  94. }
  95.  
  96. .button:hover {
  97.   background-color: #05A8AA;
  98.   border: 1px solid #05A8AA;
  99.   color: #FFF;
  100. }
  101.  
  102. /* Content Nutrition */
  103.  
  104. ul.nutrition {
  105.   padding: 20px;
  106. }
  107.  
  108. ul.nutrition li {
  109.   display: inline-block;
  110.   background-color: #05A8AA;
  111.   list-style: none;
  112.   width: 200px;
  113.   padding: 10px 20px;
  114.   margin-bottom: 3px;
  115. }
  116.  
  117. .nutrition .category {
  118.   color: white;
  119.   font-weight: 100;
  120.   letter-spacing: 2px;
  121.   display: block;
  122. }
  123.  
  124. .nutrition .value {
  125.   color: white;
  126.   font-size: 26px;
  127.   font-weight: 700;
  128.   letter-spacing: 2px;
  129. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement