212 lines
4.4 KiB
Markdown
212 lines
4.4 KiB
Markdown
---
|
|
id: 60b69a66b6ddb80858c515a6
|
|
title: Step 49
|
|
challengeType: 0
|
|
dashedName: 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.
|
|
|
|
```js
|
|
assert(new __helpers.CSSHelp(document).getStyle('.fa-music'));
|
|
```
|
|
|
|
Your `.fa-music` selector should have a `display` property set to `inline-block`.
|
|
|
|
```js
|
|
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block');
|
|
```
|
|
|
|
Your `.fa-music` selector should have a `margin-top` property set to `8%`.
|
|
|
|
```js
|
|
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%');
|
|
```
|
|
|
|
Your `.fa-music` selector should have a `margin-left` property set to `13%`.
|
|
|
|
```js
|
|
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<!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">
|
|
<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>
|
|
```
|
|
|
|
```css
|
|
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--
|
|
|
|
```
|