mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-11 18:02:40 -04:00
chore(i18n,learn): processed translations (#46294)
This commit is contained in:
camperbot
@@ -0,0 +1,183 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159f
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Proprio come con l'elemento `white-hat`, dovresti definire lo stile del bordo per l'elemento `black-hat`. Imposta `border-top-color`, `border-right-color` e `border-bottom-color` su`transparent`. Imposta `border-left-color` su `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#black-hat` dovrebbe avere una proprietà `border-top-color` impostata su `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
Il selettore `#black-hat` dovrebbe avere una proprietà `border-right-color` impostata su `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent');
|
||||
```
|
||||
|
||||
Il selettore `#black-hat` dovrebbe avere una proprietà `border-bottom-color` impostata su `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent');
|
||||
```
|
||||
|
||||
Il selettore `#black-hat` dovrebbe avere una proprietà `border-left-color` impostata su `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a0
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora posiziona l'elemento `black-hat`. Imposta `position` su `absolute`, `top` a `-150px` e `left` a `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#black-hat` dovrebbe avere una proprietà `position` con il valore `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#black-hat` dovrebbe avere una proprietà `top` impostata a `-150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px');
|
||||
```
|
||||
|
||||
Il selettore `#black-hat` dovrebbe avere una proprietà `left` impostata a `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
|
||||
```
|
||||
|
||||
# --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);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a1
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usando un selettore di `id`, agisci sullo stile dell'elemento `gray-mask`. Imposta `width` a `150px`, `height` a `150px` e `background-color` a `rgb(167, 162, 117)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#gray-mask`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask'));
|
||||
```
|
||||
|
||||
Il selettore `#gray-mask` dovrebbe avere una proprietà `width` con il valore `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px');
|
||||
```
|
||||
|
||||
Il selettore `#gray-mask` dovrebbe avere una proprietà `height` con il valore `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px')
|
||||
```
|
||||
|
||||
Il selettore `#gray-mask` dovrebbe avere una proprietà `background-color` con il valore `rgb(167, 162, 117)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,201 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a3
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usando un selettore di `id`, crea una regola per l'elemento `white-paper`. Imposta `width` a `400px`, `height` a `100px` e `background-color` su `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#white-paper`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper'));
|
||||
```
|
||||
|
||||
Il selettore `#white-paper` dovrebbe avere una proprietà `width` impostata su `400px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px');
|
||||
```
|
||||
|
||||
Il selettore `#white-paper` dovrebbe avere una proprietà `height` impostata su `100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px');
|
||||
```
|
||||
|
||||
Il selettore `#white-paper` dovrebbe avere una proprietà `background-color` impostata su `GhostWhite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a4
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posiziona `white-paper` impostando `position` su `absolute`, `top` a `250px` e `left` a `-150px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#white-paper` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#white-paper` dovrebbe avere una proprietà `top` impostata su `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px');
|
||||
```
|
||||
|
||||
Il selettore `#white-paper` dovrebbe avere una proprietà `left` impostata su `-150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a5
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Imposta la proprietà `z-index` di `white-paper` a `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#white-paper` dovrebbe avere una proprietà `z-index` impostata a `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a6
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le icone FontAwesome posseggono già il loro stile. Tuttavia, anche tu puoi agire sul loro stile cambiando cose come il colore e le dimensioni. Per ora, usa un selettore dell'attributo `class` per scegliere come target le icone `fa-music`. Imposta `display` su `inline-block`, `margin-top` all'`8%` e `margin-left` al `13%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `.fa-music`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-music'));
|
||||
```
|
||||
|
||||
Il selettore `.fa-music` dovrebbe avere una proprietà `display` impostata su `inline-block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block');
|
||||
```
|
||||
|
||||
Il selettore `.fa-music` dovrebbe avere una proprietà `margin-top` impostata all'`8%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%');
|
||||
```
|
||||
|
||||
Il selettore `.fa-music` dovrebbe avere una proprietà `margin-left` impostata al `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--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a8
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usa un selettore dell'attributo `class` per selezionare i nuovi elementi `blue`. Imposta il `background-color` su `#1E90FF`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `.blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue'));
|
||||
```
|
||||
|
||||
Il selettore `.blue` dovrebbe avere una proprietà `background-color` impostata su `#1E90FF`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,217 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a9
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona l'elemento `blue-left` con un selettore di `id`. Imposta `width` a `500px` e `height` a `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#blue-left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left'));
|
||||
```
|
||||
|
||||
Il selettore `#blue-left` dovrebbe avere una proprietà `width` impostata a `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px');
|
||||
```
|
||||
|
||||
Il selettore `#blue-left` dovrebbe avere una proprietà `height` impostata a `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -7,23 +7,23 @@ dashedName: step-53
|
||||
|
||||
# --description--
|
||||
|
||||
Ora imposta la `position` ad `absolute`, il `top` a `20%` e il `left` a `20%`.
|
||||
Adesso, imposta `position` su `absolute`, `top` al `20%` e `left` al `20%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo selettore `#blue-left` dovrebbe avere una proprietà `position` impostata a `absolute`.
|
||||
Il selettore `#blue-left` dovrebbe avere una proprietà `position` con il valore `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il tuo selettore `#blue-left` dovrebbe avere una proprietà `top` impostata al `20%`.
|
||||
Il selettore `#blue-left` dovrebbe avere una proprietà `top` impostata al `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%');
|
||||
```
|
||||
|
||||
Il selettore `#blue-left` dovrebbe avere una proprietà `left` impostata a `20%`.
|
||||
Il selettore `#blue-left` dovrebbe avere una proprietà `left` impostata al `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ab
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Come prossimo passo, seleziona l'elemento `blue-right` con un selettore di `id`. Imposta `width` a `400px` e `height` a `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#blue-right`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right'));
|
||||
```
|
||||
|
||||
Il selettore `#blue-right` dovrebbe avere una proprietà `width` impostata su `400px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px');
|
||||
```
|
||||
|
||||
Il selettore `#blue-right` dovrebbe avere una proprietà `height` impostata su `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,228 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ac
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posiziona correttamente `blue-right` impostando `position` su `absolute`, `top` al `50%` e `left` al `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#blue-right` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#blue-right` dovrebbe avere una proprietà `top` impostata al `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%');
|
||||
```
|
||||
|
||||
Il selettore `#blue-right` dovrebbe avere una proprietà `left` impostata al `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ad
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sotto gli elementi `blue`, aggiungi un altro `div`. Dagli un `id` con il valore `orange-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un nuovo elemento `div` all'interno del l'elemento `characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 5);
|
||||
```
|
||||
|
||||
Il nuovo elemento `div` dovrebbe avere un `id` con il valore `orange-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,245 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ae
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `orange-character`, aggiungi quattro elementi `div`. Dai loro i valori `id` di `black-round-hat`, `eyes-div`, `triangles` e `guitar` (in ordine).
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere quattro nuovi elementi `div` all'interno dell'elemento `orange-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.length === 4);
|
||||
```
|
||||
|
||||
Il primo nuovo elemento `div` dovrebbe avere un `id` impostato su `black-round-hat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat');
|
||||
```
|
||||
|
||||
Il secondo nuovo elemento `div` dovrebbe avere un `id` impostato su `eyes-div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div');
|
||||
```
|
||||
|
||||
Il terzo nuovo elemento `div` dovrebbe avere un `id` impostato su `triangles`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles');
|
||||
```
|
||||
|
||||
Il quarto nuovo elemento `div` dovrebbe avere un `id` impostato su `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515af
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `eyes-div` dovrebbe contenere degli occhi. Aggiungi due elementi `div` al suo interno. Dai al primo un valore `class` di `eyes left`, e al secondo un valore `class` di `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere due elementi `div` annidati in `eyes-div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
|
||||
```
|
||||
|
||||
Il primo nuovo `div` dovrebbe avere l'attributo `class` impostato su `eyes left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes'));
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left'));
|
||||
```
|
||||
|
||||
Il secondo nuovo `div` dovrebbe avere l'attributo `class` impostato su `eyes right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes'));
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right'));
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="triangles"></div>
|
||||
<div id="guitar"></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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,238 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b0
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno del div `triangles`, dovrai aggiungere gli elementi che diventeranno i tuoi triangoli. Crea trenta elementi `div` e dai a ciascuno di loro la classe `triangle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere 30 elementi `div` all'interno dell'elemento `triangles`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#triangles > div')?.length === 30);
|
||||
```
|
||||
|
||||
Tutti i 30 nuovi elementi `div` dovrebbero avere l'attributo `class` impostato su `triangle`.
|
||||
|
||||
```js
|
||||
const divDivDiv = document.querySelectorAll('#triangles > div');
|
||||
for (const div of divDivDiv) {
|
||||
assert(div?.classList?.contains('triangle'));
|
||||
}
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="guitar"></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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,298 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b1
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `guitar`, crea tre elementi `div`. Dai ai primi due una proprietà `class` con valore di `guitar`. Poi dai al primo un attributo `id` con valore di `guitar-left` e al secondo un `id` con valore di `guitar-right`. Aggiungi un `id` al terzo `div` con un valore di `guitar-neck`.
|
||||
|
||||
Il terzo `div` non dovrebbe avere la classe `guitar`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere tre nuovi elementi `div` dentro l'elemento `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.length === 3);
|
||||
```
|
||||
|
||||
Il primo nuovo `div` dovrebbe avere un attributo `class` impostato su `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar'));
|
||||
```
|
||||
|
||||
Il primo nuovo `div` dovrebbe avere un `id` impostato su `guitar-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left');
|
||||
```
|
||||
|
||||
Il secondo nuovo `div` dovrebbe avere un attributo `class` impostato su `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar'));
|
||||
```
|
||||
|
||||
Il secondo nuovo `div` dovrebbe avere un `id` impostato su `guitar-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right');
|
||||
```
|
||||
|
||||
Il terzo nuovo `div` dovrebbe avere un `id` impostato su `guitar-neck`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck');
|
||||
```
|
||||
|
||||
Non dovresti dare al terzo `div` un attributo `class` con il valore `guitar`.
|
||||
|
||||
```js
|
||||
assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,281 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b2
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usa un'altra icona FontAwesome per l'elemento `guitar`. All'interno degli elementi `guitar-left` e `guitar-right`, aggiungi un elemento `i` e assegnagli un attributo `class` con il valore `fas fa-bars`.
|
||||
|
||||
# --hints--
|
||||
|
||||
All'interno dell'elemento `guitar-left`, dovresti aggiungere un elemento `i`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-left > i')?.length === 1);
|
||||
```
|
||||
|
||||
All'interno dell'elemento `guitar-right`, dovresti aggiungere un elemento `i`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-right > i')?.length === 1);
|
||||
```
|
||||
|
||||
I due nuovi elementi `i` dovrebbero avere l'attributo `class` impostato su `fas fa-bars`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas'));
|
||||
assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars'));
|
||||
assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas'));
|
||||
assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars'));
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
--fcc-editable-region--
|
||||
<div class="guitar" id="guitar-left">
|
||||
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b3
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona l'elemento `orange-character` con un selettore di `id`. Imposta `width` a `250px`, `height` a `550px` e `background-color` su `rgb(240, 78, 42)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#orange-character`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character'));
|
||||
```
|
||||
|
||||
Il selettore `#orange-character` dovrebbe avere una proprietà `width` impostata a `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px');
|
||||
```
|
||||
|
||||
Il selettore `#orange-character` dovrebbe avere una proprietà `height` impostata a `550px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px');
|
||||
```
|
||||
|
||||
Il selettore `#orange-character` dovrebbe avere una proprietà `background-color` impostata su `rgb(240, 78, 42)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,285 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b4
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per l'elemento `orange-character`, imposta `position` su `absolute`, `top` al `25%` e `left` al `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#orange-character` dovrebbe avere una proprietà `position` con il valore `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#orange-character` dovrebbe avere una proprietà `top` con il valore `25%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%');
|
||||
```
|
||||
|
||||
Il selettore `#orange-character` dovrebbe avere una proprietà `left` con il valore `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,296 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b5
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Imposta lo stile dell'elemento `black-round-hat` con un selettore di `id`. Imposta `width` a `180px`, `height` a `150px` e `background-color` su `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti avere un selettore `#black-round-hat`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat'));
|
||||
```
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `width` impostata a `180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px');
|
||||
```
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `height` impostata su `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px');
|
||||
```
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `background-color` impostata su `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,282 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b6
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `black-round-hat` dovrebbe essere rotondo. Dagli una proprietà `border-radius` del `50%` per arrotondarlo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `border-radius` impostata al `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b7
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posiziona l'elemento `black-round-hat` impostando `position` su `absolute`, `top` a `-100px` e `left` a `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `top` con il valore `-100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px');
|
||||
```
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `left` con il valore `5px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,286 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b8
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posiziona sul layer corretto l'elemento `black-round-hat` impostando `z-index` a `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#black-round-hat` dovrebbe avere una proprietà `z-index` impostata a `-1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b9
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usa un selettore di `id` per creare una regola per l'elemento `eyes-div`. Imposta `width` a `180px` e `height` a `50px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `#eyes-div`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div'));
|
||||
```
|
||||
|
||||
Il selettore `#eyes-div` dovrebbe avere una proprietà `width` impostata su `180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px');
|
||||
```
|
||||
|
||||
Il selettore `#eyes-div` dovrebbe avere una proprietà `height` impostata su `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ba
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso posiziona `eyes-div`impostando `position` su `absolute`, `top` a `-40px` e `left` a `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#eyes-div` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#eyes-div` dovrebbe avere una proprietà `top` impostata a `-40px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px');
|
||||
```
|
||||
|
||||
Il selettore `#eyes-div` dovrebbe avere una proprietà `left` impostata a `20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -7,7 +7,7 @@ dashedName: step-70
|
||||
|
||||
# --description--
|
||||
|
||||
Dai a `eyes-div` uno `z-index` di `3`.
|
||||
Assegna a `eyes-div` una proprietà `z-index` di `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,348 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515bd
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora crea un selettore per l'attributo `class` con valore `guitar`. In questo modo, agirai sullo stile delle due "metà" della chitarra. Imposta `width` a `150px`, `height` a `120px`, `background-color` su `Goldenrod` e `border-radius` al `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `.guitar`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar'));
|
||||
```
|
||||
|
||||
Il selettore `.guitar` dovrebbe avere una proprietà `width` impostata su `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px');
|
||||
```
|
||||
|
||||
Il selettore `.guitar` dovrebbe avere una proprietà `height` impostata su `120px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px');
|
||||
```
|
||||
|
||||
Il selettore `.guitar` dovrebbe avere una proprietà `background-color` impostata su `Goldenrod`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod');
|
||||
```
|
||||
|
||||
Il selettore `.guitar` dovrebbe avere una proprietà `border-radius` impostata al `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,337 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515be
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona l'`id` con il valore `guitar-left`, imposta `position` su `absolute` e `left` a `0px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo selettore `#guitar-left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-left'));
|
||||
```
|
||||
|
||||
Il selettore `#guitar-left` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,348 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515bf
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona l'`id` con il valore `guitar-right` e imposta `position` su `absolute`. Questa volta, imposta `left` a `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo selettore `#guitar-right`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right'));
|
||||
```
|
||||
|
||||
Il selettore `#guitar-right` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#guitar-right` dovrebbe avere una proprietà `left` impostata a `100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,365 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c1
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usa un selettore di `id` per creare una regola `guitar-neck`. Imposta `width` a `200px`, `height` a `30px` e `background-color` su `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `#guitar-neck`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck'));
|
||||
```
|
||||
|
||||
Il selettore `#guitar-neck` dovrebbe avere una proprietà `width` impostata a `200px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px');
|
||||
```
|
||||
|
||||
Il selettore `#guitar-neck` dovrebbe avere una proprietà `height` impostata a `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px');
|
||||
```
|
||||
|
||||
Il selettore `#guitar-neck` dovrebbe avere una proprietà `background-color` impostata su `#D2691E`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,363 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c2
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora posiziona `guitar-neck` impostando `position` su `absolute`, `top` a `45px` e `left` a `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#guitar-neck` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#guitar-neck` dovrebbe avere una proprietà `top` impostata a `45px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px');
|
||||
```
|
||||
|
||||
Il selettore `#guitar-neck` dovrebbe avere una proprietà `left` impostata a `200px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,354 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c3
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dai a `guitar-neck` una proprietà `z-index` di `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#guitar-neck` dovrebbe avere una proprietà `z-index` impostata a `3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,381 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c4
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È tempo di pensare allo stile degli elementi `eyes`. Usa un selettore per l'attributo `class` impostando `width` a `35px`, `height` a `20px`, `background-color` su `#8B4513` e `border-radius` su `20px 50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `.eyes`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes'));
|
||||
```
|
||||
|
||||
Il selettore `.eyes` dovrebbe avere una proprietà `width` impostata a `35px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px');
|
||||
```
|
||||
|
||||
Il selettore `.eyes` dovrebbe avere una proprietà `height` impostata a `20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px');
|
||||
```
|
||||
|
||||
Il selettore `.eyes` dovrebbe avere una proprietà `background-color` impostata su `#8B4513`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)');
|
||||
```
|
||||
|
||||
Il selettore `.eyes` dovrebbe avere una proprietà `border-radius` impostata su `20px 50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,382 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c5
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona l'attributo `class` con il valore `right` impostando `position` su `absolute`, `top` a `15px` e `right` a `30px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `.right`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right'));
|
||||
```
|
||||
|
||||
Il selettore `.right` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `.right` dovrebbe avere una proprietà `top` impostata su `15px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px');
|
||||
```
|
||||
|
||||
Il selettore `.right` dovrebbe avere una proprietà `right` impostata su `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.eyes {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background-color: #8B4513;
|
||||
border-radius: 20px 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,388 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c6
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crea un selettore per l'attributo `class` con il valore `left`, impostando `position` su `absolute`, `top` a `15px` e `left` a `30px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo selettore `.left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left'));
|
||||
```
|
||||
|
||||
Il selettore `.left` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `.left` dovrebbe avere una proprietà `top` impostata su `15px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px');
|
||||
```
|
||||
|
||||
Il selettore `.left` dovrebbe aver avuto una proprietà `left` impostata su `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.eyes {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background-color: #8B4513;
|
||||
border-radius: 20px 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,739 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c7
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ecco l'ultimo step. Le icone FontAwesome sono un po' troppo piccole. Selezionale tutte con un selettore per il valore `class` di `fas`, e imposta la proprietà `font-size` a `30px`.
|
||||
|
||||
E con questo, il tuo Picasso è completo!
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `.fas`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fas'));
|
||||
```
|
||||
|
||||
Il selettore `.fas` dovrebbe avere una proprietà `font-size` impostata a `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.eyes {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background-color: #8B4513;
|
||||
border-radius: 20px 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.eyes {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background-color: #8B4513;
|
||||
border-radius: 20px 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.fas {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,312 @@
|
||||
---
|
||||
id: 60ba890832b4940f24d1936b
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Regola il layout degli elementi `triangle` con una proprietà `display` impostata su `inline-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `display` impostata su `inline-block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,326 @@
|
||||
---
|
||||
id: 60ba89123a445e0f5c9e4022
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Assegna agli elementi `triangle` il colore corretto. Imposta `border-top-color`, `border-bottom-color` e `border-left-color` su `transparent`. Imposta `border-right-color` su `Gold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `border-top-color` impostata su `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `border-bottom-color` impostata su `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent');
|
||||
```
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `border-left-color` impostata su `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent');
|
||||
```
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `border-right-color` impostata su `Gold`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,312 @@
|
||||
---
|
||||
id: 60ba8913f1704c0f7a8906b8
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Cambia lo stile del bordo degli elementi `triangle`. Imposta `border-style` su `solid` e `border-width` su `42px 45px 45px 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `border-style` impostata su `solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid');
|
||||
```
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `border-width` impostata su `42px 45px 45px 0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,315 @@
|
||||
---
|
||||
id: 60ba89146b25080f99ab54ad
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crea un selettore `class` per selezionare gli elementi `triangle`. Imposta `width` a `0` e `height` a `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `.triangle`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle'));
|
||||
```
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `width` impostata a `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px');
|
||||
```
|
||||
|
||||
Il selettore `.triangle` dovrebbe avere una proprietà `height` impostata a `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,310 @@
|
||||
---
|
||||
id: 60ba8914bab51f0fb8228e9c
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora seleziona l'elemento `triangles` con un selettore di `id`. Imposta `width` a `250px` e `height` a `550px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un selettore `#triangles`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles'));
|
||||
```
|
||||
|
||||
Il selettore `#triangles` dovrebbe avere una proprietà `width` impostata a `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px');
|
||||
```
|
||||
|
||||
Il selettore `#triangles` dovrebbe avere una proprietà `height` impostata a `550px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,327 @@
|
||||
---
|
||||
id: 60ba929345ab0714a3743655
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora usa un selettore di `id` per `guitar`. Imposta `width` al `100%` e `height` su `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un selettore `#guitar`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar'));
|
||||
```
|
||||
|
||||
Il selettore `#guitar` dovrebbe avere una proprietà `width` impostata sul `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%');
|
||||
```
|
||||
|
||||
Il selettore `#guitar` dovrebbe avere una proprietà `height` impostata su `100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,330 @@
|
||||
---
|
||||
id: 60ba9296d4d6b414c1b10995
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nello stesso selettore `#guitar`, imposta `position` su `absolute`, `top` a `120px` e `left` a `0px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#guitar` dovrebbe avere una proprietà `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Il selettore `#guitar` dovrebbe avere una proprietà `top` impostata a `120px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px');
|
||||
```
|
||||
|
||||
Il selettore `#guitar` dovrebbe avere una proprietà `left` impostata a `0px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,321 @@
|
||||
---
|
||||
id: 60ba92987c1e4914dfa7a0b9
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Assegna alla regola `#guitar` una proprietà `z-index` di `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `#guitar` dovrebbe avere una proprietà `z-index` impostata su `3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
|
||||
```
|
||||
|
||||
# --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 class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</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;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -8,7 +8,7 @@ dashedName: fractran
|
||||
|
||||
# --description--
|
||||
|
||||
FRACTRAN é uma linguagem de programação estotérica, completa para testes Turing, inventada pelo matemático John Horton Conway.
|
||||
FRACTRAN é uma linguagem de programação esotérica, completa para testes Turing, inventada pelo matemático John Horton Conway.
|
||||
|
||||
Um programa em FRACTRAN é uma lista ordenada de frações positivas $P = (f_1, f_2, \\ldots, f_m)$, juntamente com uma primeira entrada positiva inteira $n$.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user