fa84f6c449
* feat: generating steps - Steps 1-32 done. - Steps 33-80 done. - Instructions 1-26 done. - Instructions 27-61 done. - More steps. - Instructions 62-88 done. - Clarify instructions for new concepts. - build fixes - Audit instructions on live site. * fix: add helpCategory * feat: write tests * feat: add intro * chore: use the right selectors Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * chore: cannot read property Shaun of undefined :) Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * feat: Shau-ptional chaining * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: uncross my wires * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
4.4 KiB
4.4 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 60b69a66b6ddb80858c515a6 | Part 49 | 0 | part-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);
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--