3.5 KiB

Raw Blame History

id	title	challengeType	dashedName
60b69a66b6ddb80858c5159b	Step 37	0	step-37

--description--

Time to use some FontAwesome icons.

The i element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for italic text, such as scientific terms, or for icons like those provided by FontAwesome.

Within your white-paper element, add four i elements. Give them all a class value of fas fa-music.

This special class is how FontAwesome determines which icon to load. fas indicates the category of icons (FontAwesome Solid, here), while fa-music selects the specific icon.

--hints--

You should have four new i elements within your #white-paper element.

assert(document.querySelectorAll('#white-paper > i')?.length === 4);

All of your i elements should have the class set to fas fa-music.

const icons = document.querySelectorAll('#white-paper > i');
for (const icon of icons) {
  assert(icon.classList?.contains('fas'));
  assert(icon.classList?.contains('fa-music'));
};

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>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">
              --fcc-editable-region--

              --fcc-editable-region--
            </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;
}

3.5 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

3.5 KiB

Raw Blame History