Files

Shaun Hamilton 10f0d3c07a fix: new practice project tests (#44554 )

* fix accessibility-quiz and reg-form tests

(cherry picked from commit 467f0b3e78)

* fix: registration-form tests

* fix: ferris wheel tests

* fix: photo-gallery tests

* fix: magazine tests

(cherry picked from commit 5831c2345d)

* fix: picasso tests

* fix: piano tests

* fix: magazine and nutrition tests

* fix: again magazine...I am doing this in sill order

* chore: resolve discrepancies with tests

(cherry picked from commit a7b5e031df)

* fix: the stuffs...I am tired

* fix: oops

(cherry picked from commit 05ff55a036)

* fix: add missing solutions

(cherry picked from commit 61fa23fc70)

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>

2021-12-22 08:16:59 -08:00

4.4 KiB

Raw Blame History

id, title, challengeType, dashedName

id	title	challengeType	dashedName
60b69a66b6ddb80858c515a6	Step 49	0	step-49

--description--

FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a class selector to target your fa-music icons. Set the display to inline-block, the margin-top to 8%, and the margin-left to 13%.

--hints--

You should have a .fa-music selector.

assert(new __helpers.CSSHelp(document).getStyle('.fa-music'));

Your .fa-music selector should have a display property set to inline-block.

assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block');

Your .fa-music selector should have a margin-top property set to 8%.

assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%');

Your .fa-music selector should have a margin-left property set to 13%.

assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%');

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>freeCodeCamp Picasso Painting</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>
  <body>
    <div id="back-wall"></div>
        <div class="characters">
          <div id="offwhite-character">
            <div id="white-hat"></div>
            <div id="black-mask">
              <div class="eyes left"></div>
              <div class="eyes right"></div>
            </div>
            <div id="gray-instrument">
              <div class="black-dot"></div>
              <div class="black-dot"></div>
              <div class="black-dot"></div>
              <div class="black-dot"></div>
              <div class="black-dot"></div>
            </div>
            <div id="tan-table"></div>
          </div>
          <div id="black-character">
            <div id="black-hat"></div>
            <div id="gray-mask">
              <div class="eyes left"></div>
              <div class="eyes right"></div>
            </div>
            <div id="white-paper">
              <i class="fas fa-music"></i>
              <i class="fas fa-music"></i>
              <i class="fas fa-music"></i>
              <i class="fas fa-music"></i>
            </div>
          </div>
        </div>
  </body>
</html>

body {
  background-color: rgb(184, 132, 46);
}

#back-wall {
  background-color: #8B4513;
  width: 100%;
  height: 60%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#offwhite-character {
  width: 300px;
  height: 550px;
  background-color: GhostWhite;
  position: absolute;
  top: 20%;
  left: 17.5%;
}

#white-hat {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 120px 140px 180px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: GhostWhite;
  border-left-color: transparent;
  position: absolute;
  top: -140px;
  left: 0;
}

#black-mask {
  width: 100%;
  height: 50px;
  background-color: rgb(45, 31, 19);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#gray-instrument {
  width: 15%;
  height: 40%;
  background-color: rgb(167, 162, 117);
  position: absolute;
  top: 50px;
  left: 125px;
  z-index: 1;
}

.black-dot {
  width: 10px;
  height: 10px;
  background-color: rgb(45, 31, 19);
  border-radius: 50%;
  display: block;
  margin: auto;
  margin-top: 65%;
}

#tan-table {
  width: 450px;
  height: 140px;
  background-color: #D2691E;
  position: absolute;
  top: 275px;
  left: 15px;
  z-index: 1;
}

#black-character {
  width: 300px;
  height: 500px;
  background-color: rgb(45, 31, 19);
  position: absolute;
  top: 30%;
  left: 59%;
}

#black-hat {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 150px 0 0 300px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: rgb(45, 31, 19);
  position: absolute;
  top: -150px;
  left: 0;
}

#gray-mask {
  width: 150px;
  height: 150px;
  background-color: rgb(167, 162, 117);
  position: absolute;
  top: -10px;
  left: 70px;
}

#white-paper {
  width: 400px;
  height: 100px;
  background-color: GhostWhite;
  position: absolute;
  top: 250px;
  left: -150px;
  z-index: 1;
}

--fcc-editable-region--

--fcc-editable-region--

4.4 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

4.4 KiB

Raw Blame History