Advertisement
makispaiktis

Codecademy - 25th Exercise (Piano Keys - CSS)

Feb 29th, 2020 (edited)
379
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.28 KB | None | 0 0
  1. body{
  2.   margin: 0;
  3.   padding: 0;
  4.   font-family: sans-serif;
  5.   background: #ffc63f;
  6. }
  7. .title{
  8.   font-size: 36px;
  9.   margin-top: 10px;
  10.   margin-bottom: 0px;
  11.   padding: 0;
  12.   color: #141c3a;
  13.   text-transform: uppercase;
  14.   letter-spacing: 2px;
  15.   text-align: center;
  16. }
  17. #demo{
  18.   text-align: center;
  19.   font-size: 18px;
  20.   margin-top: 15px;
  21.   color: #141c3a;
  22.   letter-spacing: 1px;
  23.   font-style: italic;
  24. }
  25. .piano{
  26.   width: 305px;
  27.   height: 210px;
  28.   display: block;
  29.   margin: 0 auto;
  30.   background-color: #fd4d3f;
  31.   margin-top: 30px;
  32. }
  33. .key{
  34.   width: 30px;
  35.   height: 200px;
  36.   display: inline-block;
  37.   border: solid #141c3a 2px;
  38.   box-shadow: 2px 5px;
  39.   background-color: white;
  40.   color: #141c3a;
  41. }
  42. .black-key{
  43.   width: 25px;
  44.   height: 100px;
  45.   display: inline-block;
  46.   background-color: #141c3a;
  47.   color: white;
  48.   position: absolute;
  49.   margin-left: -12px;
  50.   padding: 0px;
  51. }
  52. .keynote{
  53.   width: 20px;
  54.   height: 20px;
  55.   text-align: center;
  56.   display: block;
  57.   margin: 0 auto;
  58.   margin-top: 175px;
  59.   color: #141c3a;
  60. }
  61. .black-keynote{
  62.   width: 20px;
  63.   height: 20px;
  64.   text-align: center;
  65.   display: block;
  66.   margin: 0 auto;
  67.   margin-top: 75px;
  68. }
  69. #lyrics{
  70.   width: 400px;
  71.   height: 240px;
  72.   display: block;
  73.   margin: 0 auto;
  74.   padding-left: 20px;
  75.   margin-top: 50px;
  76.   background-color: #fd4d3f;
  77. }
  78. #column-one, #column-two, #column-three, #column-four, #column-five, #column-six, #column-optional{
  79.   width: 90px;
  80.   display: inline-block;
  81.   text-align: center;
  82.   margin-top: 30px;
  83. }
  84. #column-optional{
  85.   display: none;
  86. }
  87. #word-one, #word-two, #word-three, #word-four, #word-five, #word-six, #word-optional{
  88.   background-color: white;
  89.   width: 90px;
  90.   height: 25px;
  91.   padding-top: 10px;
  92.   letter-spacing: 5px;
  93.   color: #141c3a;
  94. }
  95. #letter-note-one, #letter-note-two, #letter-note-three, #letter-note-four, #letter-note-five, #letter-note-six, #letter-note-optional{
  96.   color: white;
  97.   width: 25px;
  98.   height: 25px;
  99.   margin-top: 15px;
  100.   margin-left: 35px;
  101. }
  102. #first-next-line, #second-next-line, #third-next-line, #fourth-next-line{
  103.   width: 80px;
  104.   height: 40px;
  105.   font-size: 16px;
  106.   position: absolute;
  107.   margin-top: 30px;
  108.   margin-left: 10px;
  109.   border: none;
  110.   background-color: #ffc63f;
  111.   color: #141c3a;
  112.   letter-spacing: 1px;
  113.   cursor: pointer;
  114. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement