mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(i18n,learn): processed translations (#46177)
This commit is contained in:
camperbot
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
你的 `#nav-bar` 元素應該始終位於視口的頂部
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
你的產品登陸頁面至少要有一個媒體查詢
|
||||
|
||||
+1
-15
@@ -29,21 +29,7 @@ const ourMusic = [
|
||||
];
|
||||
```
|
||||
|
||||
這是一個包含一個對象的數組。 該對象有關於專輯的各種元數據（<dfn>metadata</dfn>）。 它也有一個嵌套的 `formats` 數組。 可以將專輯添加到頂級數組來增加更多的專輯記錄。 對象將數據以一種鍵 - 值對的形式保存。 在上面的示例中，`"artist": "Daft Punk"` 有一個鍵爲 `artist` 值爲 `Daft Punk` 的屬性。 [JavaScript Object Notation](http://www.json.org/) 簡稱 `JSON` 是可以用於存儲數據的數據交換格式。
|
||||
|
||||
```json
|
||||
{
|
||||
"artist": "Daft Punk",
|
||||
"title": "Homework",
|
||||
"release_year": 1997,
|
||||
"formats": [
|
||||
"CD",
|
||||
"Cassette",
|
||||
"LP"
|
||||
],
|
||||
"gold": true
|
||||
}
|
||||
```
|
||||
這是一個包含一個對象的數組。 該對象有關於專輯的各種元數據（<dfn>metadata</dfn>）。 它也有一個嵌套的 `formats` 數組。 可以將專輯添加到頂級數組來增加更多的專輯記錄。 對象將數據以一種鍵 - 值對的形式保存。 在上面的示例中，`"artist": "Daft Punk"` 有一個鍵爲 `artist` 值爲 `Daft Punk` 的屬性。
|
||||
|
||||
**提示：**數組中有多個 JSON 對象的時候，對象與對象之間要用逗號隔開。
|
||||
|
||||
|
||||
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
你的 `#nav-bar` 元素应该始终位于视口的顶部
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
你的产品登陆页面至少要有一个媒体查询
|
||||
|
||||
+1
-15
@@ -29,21 +29,7 @@ const ourMusic = [
|
||||
];
|
||||
```
|
||||
|
||||
这是一个包含一个对象的数组。 该对象有关于专辑的各种元数据（<dfn>metadata</dfn>）。 它也有一个嵌套的 `formats` 数组。 可以将专辑添加到顶级数组来增加更多的专辑记录。 对象将数据以一种键 - 值对的形式保存。 在上面的示例中，`"artist": "Daft Punk"` 有一个键为 `artist` 值为 `Daft Punk` 的属性。 [JavaScript Object Notation](http://www.json.org/) 简称 `JSON` 是可以用于存储数据的数据交换格式。
|
||||
|
||||
```json
|
||||
{
|
||||
"artist": "Daft Punk",
|
||||
"title": "Homework",
|
||||
"release_year": 1997,
|
||||
"formats": [
|
||||
"CD",
|
||||
"Cassette",
|
||||
"LP"
|
||||
],
|
||||
"gold": true
|
||||
}
|
||||
```
|
||||
这是一个包含一个对象的数组。 该对象有关于专辑的各种元数据（<dfn>metadata</dfn>）。 它也有一个嵌套的 `formats` 数组。 可以将专辑添加到顶级数组来增加更多的专辑记录。 对象将数据以一种键 - 值对的形式保存。 在上面的示例中，`"artist": "Daft Punk"` 有一个键为 `artist` 值为 `Daft Punk` 的属性。
|
||||
|
||||
**提示：**数组中有多个 JSON 对象的时候，对象与对象之间要用逗号隔开。
|
||||
|
||||
|
||||
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
Tú `#nav-bar` siempre debe estar en la parte superior del viewport
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
Tu página de inicio de producto debe tener al menos una consulta de medios
|
||||
|
||||
+1
-15
@@ -29,21 +29,7 @@ const ourMusic = [
|
||||
];
|
||||
```
|
||||
|
||||
Esto es una arreglo que contiene un objeto en su interior. El objeto tiene varias piezas de <dfn>metadatos</dfn> sobre un álbum. También tiene un arreglo anidado de `formats`. Si desea añadir más registros de álbumes, puede hacerlo añadiendo registros a la parte superior del arreglo. Los objetos almacenan datos en una propiedad, con formato clave-valor. En el ejemplo anterior, `"artist": "Daft Punk"` es una propiedad que tiene como clave `artist` y su valor es `Daft Punk`. [JavaScript Object Notation](http://www.json.org/) o `JSON` es un formato de intercambio de datos relacionado utilizado para almacenar información.
|
||||
|
||||
```json
|
||||
{
|
||||
"artist": "Daft Punk",
|
||||
"title": "Homework",
|
||||
"release_year": 1997,
|
||||
"formats": [
|
||||
"CD",
|
||||
"Cassette",
|
||||
"LP"
|
||||
],
|
||||
"gold": true
|
||||
}
|
||||
```
|
||||
Esto es una arreglo que contiene un objeto en su interior. El objeto tiene varias piezas de <dfn>metadatos</dfn> sobre un álbum. También tiene un arreglo anidado de `formats`. Si desea añadir más registros de álbumes, puede hacerlo añadiendo registros a la parte superior del arreglo. Los objetos almacenan datos en una propiedad, con formato clave-valor. En el ejemplo anterior, `"artist": "Daft Punk"` es una propiedad que tiene como clave `artist` y su valor es `Daft Punk`.
|
||||
|
||||
**Nota:** Deberás colocar una coma después de cada objeto en el arreglo, a menos que sea el último objeto.
|
||||
|
||||
|
||||
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
L'elemento `#nav-bar` dovrebbe sempre essere in cima al viewport
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
La pagina dovrebbe avere almeno un media query
|
||||
|
||||
+1
-15
@@ -29,21 +29,7 @@ const ourMusic = [
|
||||
];
|
||||
```
|
||||
|
||||
Questo è un array che contiene un oggetto al suo interno. L'oggetto ha vari pezzi di <dfn>metadati</dfn> riguardanti un album. Ha anche un array annidato `formats`. Se volessi aggiungere più record di tipo album, potresti farlo aggiungendo dei record all'array di livello superiore. Gli oggetti contengono i dati nelle proprietà, che hanno un formato chiave-valore (key-value). Nell'esempio sopra, `"artist": "Daft Punk"` è una proprietà che ha una chiave `artist` e un valore `Daft Punk`. [JavaScript Object Notation](http://www.json.org/) o `JSON` è un formato di scambio di dati, utilizzato per memorizzare dati.
|
||||
|
||||
```json
|
||||
{
|
||||
"artist": "Daft Punk",
|
||||
"title": "Homework",
|
||||
"release_year": 1997,
|
||||
"formats": [
|
||||
"CD",
|
||||
"Cassette",
|
||||
"LP"
|
||||
],
|
||||
"gold": true
|
||||
}
|
||||
```
|
||||
Questo è un array che contiene un oggetto al suo interno. L'oggetto ha vari pezzi di <dfn>metadati</dfn> riguardanti un album. Ha anche un array annidato `formats`. Se volessi aggiungere più record di tipo album, potresti farlo aggiungendo dei record all'array di livello superiore. Gli oggetti contengono i dati nelle proprietà, che hanno un formato chiave-valore (key-value). Nell'esempio sopra, `"artist": "Daft Punk"` è una proprietà che ha una chiave `artist` e un valore `Daft Punk`.
|
||||
|
||||
**Nota:** Dovrai inserire una virgola dopo ogni oggetto nell'array, a meno che non sia l'ultimo.
|
||||
|
||||
|
||||
+9
-9
@@ -7,55 +7,55 @@ dashedName: step-62
|
||||
|
||||
# --description--
|
||||
|
||||
Crea un altro elemento `p`, dagli il testo `Calcium 260mg 20%`. Allinea `20%` a destra. Sotto di quello, crea un elemento `p` con il testo `Iron 8mg 45%`, allineando il `45%` a destra.
|
||||
Crea un altro elemento `p` e dagli il testo `Calcium 260mg 20%`. Allinea il `20%` a destra. Al di sotto, crea un elemento `p` con il testo `Iron 8mg 45%`, allineando il `45%` a destra.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare due nuovi elementi `p` alla fine del tuo elemento `.daily-value.sm-text`.
|
||||
Dovresti creare due nuovi elementi `p` alla fine dell'elemento `.daily-value.sm-text`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
|
||||
```
|
||||
|
||||
Il tuo primo nuovo elemento `p` dovrebbe avere il testo `Calcium 260mg 20%`.
|
||||
Il primo nuovo elemento `p` dovrebbe avere il testo `Calcium 260mg 20%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
|
||||
```
|
||||
|
||||
Il tuo primo nuovo elemento `p` dovrebbe avere un elemento `span`.
|
||||
Il primo nuovo elemento `p` dovrebbe avere un elemento `span`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
|
||||
```
|
||||
|
||||
Il tuo primo elemento `span` dovrebbe avere l'attributo `class` impostato a `right`. Ricorda, non renderlo in grassetto.
|
||||
Il primo elemento `span` dovrebbe avere l'attributo `class` con il valore `right`. Ricorda, non metterlo in grassetto.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right'));
|
||||
assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
|
||||
```
|
||||
|
||||
Il tuo primo elemento `span` dovrebbe avvolgere il testo `20%`.
|
||||
Il primo elemento `span` dovrebbe racchiudere il testo `20%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
|
||||
```
|
||||
|
||||
Il tuo secondo nuovo elemento `p` dovrebbe avere il testo `Iron 8mg 45%`.
|
||||
Il secondo nuovo elemento `p` dovrebbe avere il testo `Iron 8mg 45%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
|
||||
```
|
||||
|
||||
Il tuo secondo nuovo elemento `p` dovrebbe avere un elemento `span`.
|
||||
Il secondo nuovo elemento `p` dovrebbe avere un elemento `span`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span');
|
||||
```
|
||||
|
||||
Il tuo secondo elemento di `span` dovrebbe avere l'attributo `class` impostato a `right`. Ricorda, non renderlo in grassetto.
|
||||
Il secondo elemento `span` dovrebbe avere l'attributo `class` con il valore `right`. Ricorda, non metterlo in grassetto.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
|
||||
|
||||
+6
-6
@@ -7,35 +7,35 @@ dashedName: step-63
|
||||
|
||||
# --description--
|
||||
|
||||
Crea l'elemento finale `p` per la tua sezione `.daily-value`. Dagli il testo `Potassium 235mg 6%`. Allinea il testo `6%` a destra e rimuovi il bordo inferiore dell'elemento `p`.
|
||||
Crea l'elemento finale `p` per la sezione `.daily-value`. Dagli il testo `Potassium 235mg 6%`. Allinea il testo `6%` a destra e rimuovi il bordo inferiore dell'elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo elemento `p` alla fine del tuo elemento `.daily-value.sm-text`.
|
||||
Dovresti creare un nuovo elemento `p` alla fine dell'elemento `.daily-value.sm-text`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Il tuo nuovo elemento `p` dovrebbe avere l'attributo `class` impostato a `no-divider`.
|
||||
Il nuovo elemento `p` dovrebbe avere l'attributo `class` con il valore `no-divider`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider'));
|
||||
```
|
||||
|
||||
Il tuo nuovo elemento `p` dovrebbe avere il testo `Potassium 235mg 6%`.
|
||||
Il nuovo elemento `p` dovrebbe avere il testo `Potassium 235mg 6%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
|
||||
```
|
||||
|
||||
Il tuo nuovo elemento `p` dovrebbe avere un elemento `span`.
|
||||
Il nuovo elemento `p` dovrebbe avere un elemento `span`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
|
||||
```
|
||||
|
||||
Il tuo elemento `span` dovrebbe avere l'attributo `class` impostato a `right`. Ricorda che non dovresti farlo in grassetto.
|
||||
L'elemento `span` dovrebbe avere l'attributo `class` con il valore `right`. Ricorda di non metterlo in grassetto.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
|
||||
|
||||
+6
-6
@@ -7,7 +7,7 @@ dashedName: step-64
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un divisore medio dopo il tuo elemento `.daily-value`. Sotto quel nuovo divisore, crea un elemento `p` con l'attributo `class` impostato a `note`.
|
||||
Aggiungi un divider medio dopo l'elemento `.daily-value`. Sotto il nuovo divider, crea un elemento `p` con l'attributo `class` impostato su `note`.
|
||||
|
||||
Dai all'elemento `p` il seguente testo:
|
||||
|
||||
@@ -17,32 +17,32 @@ Dai all'elemento `p` il seguente testo:
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un nuovo `div` dopo il tuo elemento `.daily-value`.
|
||||
Dovresti creare un nuovo `div` dopo l'elemento `.daily-value`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
Il tuo nuovo `div` dovrebbe avere l'attributo `class` impostato su `divider md`.
|
||||
Il nuovo `div` dovrebbe avere l'attributo `class` con il valore `divider md`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
|
||||
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md'));
|
||||
```
|
||||
|
||||
Dovresti creare un elemento `p` dopo il tuo nuovo elemento `div`.
|
||||
Dovresti creare un elemento `p` dopo il nuovo elemento `div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
|
||||
```
|
||||
|
||||
Il tuo nuovo elemento `p` dovrebbe avere la `class` impostata a `note`.
|
||||
Il nuovo elemento `p` dovrebbe avere l'attributo `class` con il valore `note`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
|
||||
```
|
||||
|
||||
Il tuo nuovo elemento `p` dovrebbe avere il testo fornito.
|
||||
Il nuovo elemento `p` dovrebbe avere il testo fornito.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
|
||||
|
||||
+2
-2
@@ -17,13 +17,13 @@ Dovresti avere un nuovo selettore `.note`.
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.note'));
|
||||
```
|
||||
|
||||
Il selettore `.note` dovrebbe avere una proprietà `font-size` impostata a `0.6rem`.
|
||||
Il selettore `.note` dovrebbe avere una proprietà `font-size` con il valore `0.6rem`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
|
||||
```
|
||||
|
||||
Il selettore `.note` dovrebbe avere una proprietà `margin` impostata a `5px 0`.
|
||||
Il selettore `.note` dovrebbe avere una proprietà `margin` con il valore `5px 0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
|
||||
|
||||
+3
-3
@@ -7,13 +7,13 @@ dashedName: step-66
|
||||
|
||||
# --description--
|
||||
|
||||
Dai al selettore `.note` un padding a sinistra e a destra di `8px`, rimuovendo il padding in alto e in basso. Dovresti anche impostare la proprietà `text-indent` a `-8px`.
|
||||
Dai al selettore `.note` un padding di sinistra e di destra di `8px`, rimuovendo il padding in alto e in basso. Dovresti anche impostare la proprietà `text-indent` a `-8px`.
|
||||
|
||||
Con queste ultime modifiche, la tua etichetta nutrizionale è completa!
|
||||
|
||||
# --hints--
|
||||
|
||||
Il selettore `.note` dovrebbe avere una proprietà `padding` impostata a `0 8px`.
|
||||
Il selettore `.note` dovrebbe avere una proprietà `padding` con il valore `0 8px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
|
||||
@@ -22,7 +22,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8p
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
|
||||
```
|
||||
|
||||
Il tuo selettore `.note` dovrebbe avere una proprietà `text-indent` impostata a `-8px`.
|
||||
Il selettore `.note` dovrebbe avere una proprietà `text-indent` con il valore `-8px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
|
||||
|
||||
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
`#nav-bar` は常にビューポートの上部にある必要があります
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
プロダクトランディングページに、少なくとも 1 つのメディアクエリが使われている必要があります
|
||||
|
||||
+1
-15
@@ -29,21 +29,7 @@ const ourMusic = [
|
||||
];
|
||||
```
|
||||
|
||||
これは内部にオブジェクトを 1 つ含む配列です。 このオブジェクトには、アルバムに関するさまざまな<dfn>メタデータ</dfn>があります。 また、ネストされた `formats` という配列もあります。 アルバムレコードを追加したい場合は、最上位の配列にレコードを追加することで実現できます。 オブジェクトではデータがプロパティに保持されます。プロパティはキーと値の組み合わせの形式を持ちます。 上記の例では、`"artist": "Daft Punk"` はプロパティで、`artist` というキーと `Daft Punk` という値を持っています。 データの格納に使用される関連のデータ交換形式として、[JavaScript Object Notation](http://www.json.org/) (`JSON`) という形式があります。
|
||||
|
||||
```json
|
||||
{
|
||||
"artist": "Daft Punk",
|
||||
"title": "Homework",
|
||||
"release_year": 1997,
|
||||
"formats": [
|
||||
"CD",
|
||||
"Cassette",
|
||||
"LP"
|
||||
],
|
||||
"gold": true
|
||||
}
|
||||
```
|
||||
これは内部にオブジェクトを 1 つ含む配列です。 このオブジェクトには、アルバムに関するさまざまな<dfn>メタデータ</dfn>があります。 また、ネストされた `formats` という配列もあります。 アルバムレコードを追加したい場合は、最上位の配列にレコードを追加することで実現できます。 オブジェクトではデータがプロパティに保持されます。プロパティはキーと値の組み合わせの形式を持ちます。 上記の例では、`"artist": "Daft Punk"` はプロパティで、`artist` というキーと `Daft Punk` という値を持っています。
|
||||
|
||||
**注:** 配列内では、最後のオブジェクトを除くすべてのオブジェクトの後にコンマを置く必要があります。
|
||||
|
||||
|
||||
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
`#nav-bar` は常にビューポートの上部にある必要があります。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
プロダクトランディングページには、少なくとも 1 つのメディアクエリが使われている必要があります。
|
||||
|
||||
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
O elemento `#nav-bar` deve estar sempre na parte superior da viewport
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
A página inicial deve ter pelo menos uma media query
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: constructing-strings-with-variables
|
||||
|
||||
# --description--
|
||||
|
||||
Às vezes, você precisará criar uma string, no estilo [Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs). Usando o operador de concatenação (`+`), você pode inserir uma ou mais variáveis em uma string que você está criando.
|
||||
Às vezes, você precisará criar uma string. Usando o operador de concatenação (`+`), você pode inserir uma ou mais variáveis em uma string que você está criando.
|
||||
|
||||
Exemplo:
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: counting-cards
|
||||
|
||||
# --description--
|
||||
|
||||
No jogo de casino Blackjack, um jogador pode ganhar vantagem sobre a casa, mantendo o número relativo de cartas altas e baixas restantes no baralho. Isso se chama [contagem de cartas](https://en.wikipedia.org/wiki/Card_counting).
|
||||
No jogo de casino Blackjack, um jogador pode determinar se tem uma vantagem sobre a próxima mão da casa, mantendo o número relativo de cartas altas e baixas restantes no baralho. Isso se chama "contar as cartas".
|
||||
|
||||
Ter cartas mais altas restantes no baralho favorece o jogador. A cada carta é atribuído um valor de acordo com a tabela abaixo. Quando o contador for positivo, o jogador deve apostar alto. Quando a contagem for zero ou negativa, o jogador deverá apostar baixo.
|
||||
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ dashedName: create-decimal-numbers-with-javascript
|
||||
|
||||
Nós também podemos armazenar números decimais em variáveis. Números decimais são às vezes referidos como números de <dfn>ponto flutuante</dfn> ou <dfn>floats</dfn>.
|
||||
|
||||
**Observação:** nem todos os números reais podem ser representados com precisão no <dfn>ponto flutuante</dfn>. Isso pode levar a erros de arredondamento. [Detalhes aqui](https://en.wikipedia.org/wiki/Floating-point_arithmetic#Accuracy_problems).
|
||||
**Observação:** os computadores representam números com precisão finita. É por isso que as operações com pontos flutuantes não podem representar precisamente as verdadeiras operações aritméticas, o que leva a muitas situações surpreendentes. Se você estiver enfrentando um desses problemas, abra um tópico no [fórum do freeCodeCamp](https://forum.freecodecamp.org/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: golf-code
|
||||
|
||||
# --description--
|
||||
|
||||
No jogo de [golfe](https://en.wikipedia.org/wiki/Golf), cada buraco tem um `par`, significando o número médio de `strokes` que se espera que golfista faça a fim de derrubar a bola no buraco para completar a jogada. Dependendo da distância acima ou abaixo de `par` que seu número de `strokes` estiver, há diferentes apelidos.
|
||||
No jogo de golfe, cada buraco tem um `par`, significando o número médio de `strokes` que se espera que golfista faça a fim de derrubar a bola no buraco para completar a jogada. Dependendo da distância acima ou abaixo de `par` que seu número de `strokes` estiver, há diferentes apelidos.
|
||||
|
||||
Sua função receberá os argumentos `par` e `strokes`. Retorne a string correta de acordo com esta tabela que lista os strokes em ordem de prioridade; superior (mais alta) para o final (mais baixo):
|
||||
|
||||
|
||||
+1
-15
@@ -29,21 +29,7 @@ const ourMusic = [
|
||||
];
|
||||
```
|
||||
|
||||
Este é um array que contém um objeto dentro dele. O objeto possui vários pedaços de <dfn>metadados</dfn> sobre um álbum. Também possui um array aninhado `formats`. Se você quiser adicionar mais álbuns, você pode fazer isso adicionando os discos ao array de alto nível. Objetos armazenam dados em uma propriedade, a qual possui um formato de chave-valor. No exemplo acima, `"artist": "Daft Punk"` é uma propriedade que tem uma chave `artist` e um valor de `Daft Punk`. [JavaScript Object Notation](http://www.json.org/) ou `JSON` é um formato de intercâmbio de dados relacionados usado para armazenar dados.
|
||||
|
||||
```json
|
||||
{
|
||||
"artist": "Daft Punk",
|
||||
"title": "Homework",
|
||||
"release_year": 1997,
|
||||
"formats": [
|
||||
"CD",
|
||||
"Cassette",
|
||||
"LP"
|
||||
],
|
||||
"gold": true
|
||||
}
|
||||
```
|
||||
Este é um array que contém um objeto dentro dele. O objeto possui vários pedaços de <dfn>metadados</dfn> sobre um álbum. Também possui um array aninhado `formats`. Se você quiser adicionar mais álbuns, você pode fazer isso adicionando os discos ao array de alto nível. Objetos armazenam dados em uma propriedade, a qual possui um formato de chave-valor. No exemplo acima, `"artist": "Daft Punk"` é uma propriedade que tem uma chave `artist` e um valor de `Daft Punk`.
|
||||
|
||||
**Observação:** você precisará colocar uma vírgula após cada objeto no array, a não ser que ele seja o último objeto no array.
|
||||
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ dashedName: word-blanks
|
||||
|
||||
# --description--
|
||||
|
||||
Vamos agora usar nosso conhecimento de strings para criar um "[Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)" estilo de jogo de palavras que chamamos de "Palavras em Branco". Você criará uma frase no estilo "Preencha os espaços em branco" (opcional: de modo engraçado).
|
||||
Vamos agora usar nosso conhecimento de strings para criar um "Mad Libs" estilo de jogo de palavras que chamamos de "Preencher espaços em branco". Você criará uma frase no estilo "Preencha os espaços em branco" (opcional: de modo engraçado).
|
||||
|
||||
Em um jogo de "Mad Libs", você recebe frases com algumas palavras faltando, como substantivos, verbos, adjetivos e advérbios. Você então preencherá os pedaços faltantes com palavras de sua escolha de modo que a frase completa faça sentido.
|
||||
|
||||
|
||||
+2
-4
@@ -8,11 +8,9 @@ dashedName: dna-pairing
|
||||
|
||||
# --description--
|
||||
|
||||
A faixa de DNA está faltando o elemento de pareamento. Pegue cada caractere, pegue seu par e retorne os resultados como um array de duas dimensões.
|
||||
Os pares de fileiras de ADN são constituídos por pares de bases de proteínas. Os pares de bases são representados pelos caracteres <em>AT</em> and <em>CG</em>, que formam os blocos de construção da dupla hélice do ADN.
|
||||
|
||||
[Pares de base](http://en.wikipedia.org/wiki/Base_pair) são pares de AT e CG. Associe o elemento faltando para o caractere fornecido.
|
||||
|
||||
Retorne o caractere fornecido como o primeiro elemento em cada array.
|
||||
A fileira do ADN está sem o elemento de que faz par com ele. Escreva uma função que corresponda aos pares de base que faltam para a fileira de ADN fornecida. Para cada caractere na string fornecida, encontre o caractere de par de bases. Retorne os resultados em um array bidimensional.
|
||||
|
||||
Por exemplo, para a entrada `GCG`, retorne `[["G", "C"], ["C","G"], ["G", "C"]]`
|
||||
|
||||
|
||||
+2
-2
@@ -10,9 +10,9 @@ dashedName: caesars-cipher
|
||||
|
||||
Uma das <dfn>cifras</dfn> mais simples e mais conhecidas é a <dfn>cifra de César</dfn>, também conhecida como uma <dfn>cifra de mudança</dfn>. Em uma cifra de transferência, os significados das letras são deslocados de acordo com a quantidade definida.
|
||||
|
||||
Um uso moderno comum é a cifra [ROT13](https://en.wikipedia.org/wiki/ROT13), onde os valores das letras são deslocados em 13 lugares. Da seguinte forma: `A ↔ N`, `B ↔ O` e assim por diante.
|
||||
Um uso moderno comum é a cifra [ROT13](https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/), onde os valores das letras são deslocados em 13 lugares. Da seguinte forma: `A ↔ N`, `B ↔ O` e assim por diante.
|
||||
|
||||
Escreva uma função que recebe uma string codificada de [ROT13](https://en.wikipedia.org/wiki/ROT13) como entrada e retorna uma string decodificada.
|
||||
Escreva uma função que recebe uma string codificada de [ROT13](https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/) como entrada e retorna uma string decodificada.
|
||||
|
||||
Todas as letras serão maiúsculas. Não transforme nenhum caractere não-alfabético (ou seja, espaços, pontuação), mas passe por eles.
|
||||
|
||||
|
||||
+17
-1
@@ -10,7 +10,23 @@ dashedName: roman-numeral-converter
|
||||
|
||||
Converta o número dado em um número romano.
|
||||
|
||||
Todas as respostas de [números romanos](http://www.mathsisfun.com/roman-numerals.html) devem ser fornecidas em maiúsculas.
|
||||
| Números romanos | Números arábicos |
|
||||
| --------------- | ---------------- |
|
||||
| M | 1000 |
|
||||
| CM | 900 |
|
||||
| D | 500 |
|
||||
| CD | 400 |
|
||||
| C | 100 |
|
||||
| XC | 90 |
|
||||
| L | 50 |
|
||||
| XL | 40 |
|
||||
| X | 10 |
|
||||
| IX | 0 |
|
||||
| V | 5 |
|
||||
| IV | 4 |
|
||||
| I | 1 |
|
||||
|
||||
Todos os números romanos devem ser em maiúsculas.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
+3
-1
@@ -10,7 +10,9 @@ dashedName: implementation-of-social-authentication-ii
|
||||
|
||||
A última parte da configuração da autenticação no GitHub é criar a própria estratégia. Para isso, você precisará adicionar a dependência do `passport-github@~1.1.0` ao projeto e solicitá-la no `auth.js` como `GithubStrategy` assim: `const GitHubStrategy = require('passport-github').Strategy;`. Não se esqueça de solicitar e configurar o `dotenv` para usar as variáveis de ambiente.
|
||||
|
||||
Para configurar a estratégia do GitHub, você precisa dizer ao Passport para usar uma `GitHubStrategy` instanciada, que aceite 2 argumentos: um objeto (contendo `clientID`, `clientSecret` e `callbackURL`) e uma função a ser chamada quando um usuário é autenticado com sucesso, que determinará se o usuário é novo e quais campos salvar inicialmente no objeto do banco de dados do usuário. Isto é comum em muitas estratégias, mas algumas podem exigir mais informações, conforme descrito no README do GitHub da estratégia específica. Por exemplo, O Google também requer um *scope*, o qual determina que tipo de informação a solicitação está pedindo que seja devolvida e pede ao usuário que aprove esse acesso. A estratégia atual que estamos implementando tem seu uso delineado [aqui](https://github.com/jaredhanson/passport-github/), mas nós a examinaremos bem aqui, no freeCodeCamp!
|
||||
Para configurar a estratégia do GitHub, você precisa dizer ao Passport para usar uma `GitHubStrategy` instanciada, que aceite 2 argumentos: um objeto (contendo `clientID`, `clientSecret` e `callbackURL`) e uma função a ser chamada quando um usuário é autenticado com sucesso, que determinará se o usuário é novo e quais campos salvar inicialmente no objeto do banco de dados do usuário. Isto é comum em muitas estratégias, mas algumas podem exigir mais informações, conforme descrito no README do GitHub da estratégia específica. Por exemplo, O Google também requer um *scope*, o qual determina que tipo de informação a solicitação está pedindo que seja devolvida e pede ao usuário que aprove esse acesso.
|
||||
|
||||
A estratégia atual que estamos implementando autentica os usuários usando uma conta do GitHub e tokens OAuth 2.0. O ID do cliente e o segredo obtidos ao criar um aplicativo são fornecidos como opções ao criar a estratégia. A estratégia também requer uma função de callback `verify`, que recebe o token de acesso e o token de atualização opcional, bem como a função `profile`, que contém o perfil do usuário autenticado no GitHub. A função de callback `verify` deve chamar `cb` fornecendo um usuário para concluir a autenticação.
|
||||
|
||||
Saiba como a nova estratégia deve se parecer nesse momento:
|
||||
|
||||
|
||||
+35
-4
@@ -206,10 +206,41 @@ assert(!!el && el.name === 'email')
|
||||
O elemento `#nav-bar` deve estar sempre na parte superior da viewport.
|
||||
|
||||
```js
|
||||
const el = document.getElementById('nav-bar')
|
||||
const top1 = el?.offsetTop
|
||||
const top2 = el?.offsetTop
|
||||
assert(!!el && top1 >= -15 && top1 <= 15 && top2 >= -15 && top2 <= 15)
|
||||
(async () => {
|
||||
const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
|
||||
|
||||
const header = document.getElementById('header');
|
||||
const headerChildren = header.children;
|
||||
const navbarCandidates = [header, ...headerChildren];
|
||||
|
||||
// Return smallest top position of all navbar candidates
|
||||
const getNavbarPosition = (candidates = []) => {
|
||||
return candidates.reduce(
|
||||
(min, candidate) =>
|
||||
Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
|
||||
Infinity
|
||||
);
|
||||
};
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the viewport '
|
||||
);
|
||||
|
||||
window.scroll(0, 500);
|
||||
await timeout(1);
|
||||
|
||||
assert.approximately(
|
||||
getNavbarPosition(navbarCandidates),
|
||||
0,
|
||||
15,
|
||||
'#header or one of its children should be at the top of the ' +
|
||||
'viewport even after scrolling '
|
||||
);
|
||||
|
||||
window.scroll(0, 0);
|
||||
})();
|
||||
```
|
||||
|
||||
A página inicial deve ter pelo menos uma media query.
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@ dashedName: step-7
|
||||
|
||||
# --description--
|
||||
|
||||
Defina a `position` do seletor `.line` para `absolute`, a pripiedade `left` para `50%` e a propriedade `top` para `50%`.
|
||||
Defina a `position` do seletor `.line` para `absolute`, a propiedade `left` para `50%` e a propriedade `top` para `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
+1
-1
@@ -36,7 +36,7 @@ const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
O elemento `div` da tampa verde deve estar antes do elemento `div` da capa.
|
||||
O elemento `div` da tampa azul deve estar antes do elemento `div` da capa.
|
||||
|
||||
```js
|
||||
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
|
||||
+1
-1
@@ -17,7 +17,7 @@ Você deve adicionar uma nova `@media` query.
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
|
||||
```
|
||||
|
||||
A nova `@media` query deverá ter uma `max-width` de `800px`.
|
||||
A nova `@media` query deve ter uma `max-width` de `800px` assim: `@media (max-width: 800px)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
|
||||
+2
-2
@@ -21,13 +21,13 @@ Você deve ter uma segunda `@media` query.
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
|
||||
```
|
||||
|
||||
Sua nova `@media` query deve vir depois da atual.
|
||||
Sua nova `@media` query deve vir depois da atual. Você deve ter uma regra `@media (max-width: 800px)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)');
|
||||
```
|
||||
|
||||
Sua nova `@media` query deverá ter um `max-width` de `600px`.
|
||||
A nova `@media` query deve ter uma `max-width` de `600px` assim: `@media (max-width: 600px)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)');
|
||||
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 61969e7451455614217e901b
|
||||
title: Passo 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para fazer com que a montanha pareça mais com uma montanha, você pode usar a função de transformação `skew`, que recebe dois argumentos. O primeiro é um ângulo para alinhar o eixo x e o segundo é um ângulo para alinhar o eixo y.
|
||||
|
||||
Use a propriedade `transform` para alinhar a montanha em `0deg` no eixo x e `44deg` no eixo y.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar a `.left-mountain` uma propriedade `transform`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
|
||||
```
|
||||
|
||||
Você deve usar a função `skew` na `transform`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
|
||||
```
|
||||
|
||||
Você deve dar a `.left-mountain` uma `transform` de `skew(0deg, 44deg)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
+119
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 6196d1ac33c68d27dcda5796
|
||||
title: Passo 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gire o elemento `.back-mountain` `45deg` no sentido horário. Então, dê a propriedade `left` de `110px` e uma propriedade `top` de `225px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar a propriedade `transform` para girar o elemento.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.back-mountain` um `transform` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)');
|
||||
```
|
||||
|
||||
Você deve dar a `.back-mountain` uma propriedade `left`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
|
||||
```
|
||||
|
||||
Você deve dar à classe`.back-mountain` uma propriedade `left` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
|
||||
```
|
||||
|
||||
Você deve dar a `.back-mountain` uma propriedade `top`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
|
||||
```
|
||||
|
||||
Você deve dar à classe`.back-mountain` uma propriedade `top` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 61993cf26a8e0f0a553db223
|
||||
title: Passo 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
_A maioria_ dos pinguins não tem uma cabeça quadrada.
|
||||
|
||||
Dê ao pinguim uma cabeça ligeiramente oval definindo o raio dos cantos superiores como `70%` e o raio dos cantos inferiores como `65%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar a `.penguin-head` um `border-radius` de `70% 70% 65% 65%`.
|
||||
|
||||
```js
|
||||
// Maybe check for individual border-radius properties?
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 61993dbb35adf30b10d49e38
|
||||
title: Passo 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Defina um elemento `.penguin-body` e dê a ele uma `width` de `53%` e uma `height` de `45%`. Então, defina o `background` como um gradiente linear de `45deg`, `rgb(134, 133, 133)` de `0%`, `rgb(234, 231, 231)` de `25%` e `white` de `67%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.penguin-head`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin-body\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar ao `.penguin-body` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
|
||||
```
|
||||
|
||||
Você deve dar ao `.penguin-body` uma `height` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
|
||||
```
|
||||
|
||||
Você deve dar a `.penguin-body` um `background` de `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 6199409834ccaf0d10736596
|
||||
title: Passo 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule todos os elementos descendentes do elemento `.penguin` e dê a eles uma `position` `absolute`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.penguin *`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin\s*\*\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar a `.penguin *` uma `position` de `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 619be80062551a080e32c821
|
||||
title: Passo 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Arredonde a crista, dando aos cantos inferiores do pseudoelemento um raio de `100%`, deixando os cantos superiores em `0%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar a propriedade `border-radius` para arredondar o cume.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
|
||||
```
|
||||
|
||||
Você deve dar ao `.penguin-body::before` um `border-radius` de `0% 0% 100% 100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
---
|
||||
id: 619c155df0063a0a3fec0e32
|
||||
title: Passo 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê aos elementos `.face` uma `width` de `60%`, uma `height` de `70%` e um `background-color` de `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.face`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.face\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar a `.face` uma propriedade `width`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
|
||||
```
|
||||
|
||||
Você deve dar a `.face` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
|
||||
```
|
||||
|
||||
Você deve dar a `.face` uma propriedade `height`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
|
||||
```
|
||||
|
||||
Você deve dar a `.face` uma `height` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
|
||||
```
|
||||
|
||||
Você deve dar a `.face` uma propriedade `background-color`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
|
||||
```
|
||||
|
||||
Você deve dar a `.face` um `background-color` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face"></div>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+165
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 619c16debd0c270b01c5ce38
|
||||
title: Passo 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Faça os cantos superiores do elemento `.face` ficar com um raio de `70%` e os cantos inferiores com um raio de `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar a `.face` uma `border-radius` de `70% 70% 60% 60%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face"></div>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+169
@@ -0,0 +1,169 @@
|
||||
---
|
||||
id: 619cfdf2e63ddf05feab86ad
|
||||
title: Passo 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posicione os elementos `.face` para que eles estejam a `15%` do topo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar a `.face` uma propriedade `top`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
|
||||
```
|
||||
|
||||
Você deve dar a `.face` um `top` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face"></div>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+181
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 619d02c7bc95bf0827a5d296
|
||||
title: Passo 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o elemento `.face` com a classe `right` e posicione-o `5%` à direita do elemento pai.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.face.right`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.face\.right\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar a `.face.right` uma propriedade `right`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.face.right` um `right` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+207
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 619d0b51ca42ed0d74582186
|
||||
title: Passo 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule os elementos `.eye` e dê a eles uma `width` de `15%`, uma `height` de `17%` e uma `background-color` de `black`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.eye`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar a `.eye` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
|
||||
```
|
||||
|
||||
Você deve dar a `.eye` uma `height` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
|
||||
```
|
||||
|
||||
Você deve dar a `.eye` uma `background-color` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+200
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 619d0bc9cb05360e1bf549c3
|
||||
title: Passo 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posicione os elementos `.eye` a `45%` do topo dos elementos pais, e dê a todos os cantos um raio de `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar aos elementos `.eye` um `top` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.eye` um `border-radius` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 619d0c1594c38c0ebae75878
|
||||
title: Passo 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Marque o elemento `.eye` com a classe `left` e posicione-o `25%` da esquerda de seu elemento pai. Marque o elemento `.eye` com a classe `right` e posicione-o `25%` da direita de seu elemento pai.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.eye.left`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye\.left\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.eye.left` um `left` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
|
||||
```
|
||||
|
||||
Você deve usar o seletor `.eye.right`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye\.right\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.eye.right` um `right` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+227
@@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 619d0daf214542102739b0da
|
||||
title: Passo 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule os elementos `.eye-lid` e dê a eles uma `width` de `150%`, uma `height` de `100%` e um `background-color` de `--penguin-face`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.eye-lid`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye-lid\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar ao seletor `.eye-lid` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
|
||||
```
|
||||
|
||||
Você deve dar a `.eye-lid` uma `height` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
|
||||
```
|
||||
|
||||
Você deve dar a `.eye-lid` uma `background-color` de `var(--penguin-face)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+226
@@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 619d0e56f9ca9710fcb974e3
|
||||
title: Passo 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posicione o elemento `.eye-lid` a `25%` da parte superior e a `-23%` da esquerda do elemento pai. Então, dê a todos os cantos um raio de `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar aos elementos `.eye-lid` um `top` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.eye-lid` um `left` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.eye-lid` um `border-radius` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+246
@@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 619d107edf7ddf13cc77106a
|
||||
title: Passo 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o elemento `.blush` com uma `class` de `left` e posicione-o `15%` àesquerda de seu elemento pai. Na sequência, vincule o elemento `.blush` com uma `class` com o valor `right` e posicione-o `15%` à direita de seu elemento pai.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.blush.left`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.blush\.left\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.blush.left` um `left` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
|
||||
```
|
||||
|
||||
Você deve usar o seletor `.blush.right`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.blush\.right\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.blush.right` um `right` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+262
@@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 619d11e6d5ef9515d2a16033
|
||||
title: Passo 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o elemento `.beak` com uma `class` de `top`, dê a ele uma `width` de `20%` e posicione-o a `60%` do topo e `40%` à esquerda de seu elemento pai.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.beak.top`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.beak\.top\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.beak.top` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.beak.top` um `top` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.beak.top` um `left` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+267
@@ -0,0 +1,267 @@
|
||||
---
|
||||
id: 619d129a417d0716a94de913
|
||||
title: Passo 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o elemento `.beak` com uma `class` de `bottom`, dê a ele uma `width` `4%` menor que o `.beak.top`, `5%` a mais de distância do topo e `2%` a mais da sua esquerda de seu elemento pai do que o `.beak.top`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.beak.bottom`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.beak\.bottom\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.beak.bottom` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.beak.bottom` um `top` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `.beak.bottom` um `left` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+278
@@ -0,0 +1,278 @@
|
||||
---
|
||||
id: 619d1629a8adc61960ca8b40
|
||||
title: Passo 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o elemento `.shirt` e defina o `font-size` como `25px`, `font-family` como `Helvetica` com uma fonte `sans-serif` como alternativa e `font-weight` de `bold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.shirt`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.shirt\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar a `.shirt` um `font-size` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
|
||||
```
|
||||
|
||||
Você deve dar a `.shirt` uma `font-family` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
|
||||
```
|
||||
|
||||
Você deve dar a `.shirt` um `font-weight` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+295
@@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 619d1fb5d244c31db8a7fdb7
|
||||
title: Passo 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule os elementos `.foot` e dê a eles uma `width` de `15%`, uma `height` de `30%` e uma `background-color` de `orange`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.foot`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.foot\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar a `.foot` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
|
||||
```
|
||||
|
||||
Você deve dar a `.foot` uma `height` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
|
||||
```
|
||||
|
||||
Você deve dar a `.foot` uma `background-color` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+317
@@ -0,0 +1,317 @@
|
||||
---
|
||||
id: 619d26b12e651022d80cd017
|
||||
title: Passo 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule os elementos `.arm` e dê a eles uma `width` de `30%`, uma `height` de `60%` e uma `background` de gradiente linear de `90deg` a partir do sentido horário, começando em `gray` e terminando em `rgb(209, 210, 199)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.arm`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.arm\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar à `.arm` uma `width` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
|
||||
```
|
||||
|
||||
Você deve dar à `.arm` uma `height` de `--fcc-expected--`, mas foi encontrado `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
|
||||
```
|
||||
|
||||
Você deve dar a `.arm` um `background` de `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+347
@@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 619d3482f505452d861d0f62
|
||||
title: Passo 101
|
||||
challengeType: 0
|
||||
dashedName: step-101
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o elemento `.penguin` quando estiver ativo e aumente seu tamanho em `50%` em ambas as dimensões.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.penguin:active`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin:active\s*\{/);
|
||||
```
|
||||
|
||||
Você deve dar ao `.penguin:active` uma `transform` de `scale(1.5)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<title>Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
animation: 3s linear infinite wave;
|
||||
}
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
10% {
|
||||
transform: rotate(110deg) scaleX(-1);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(110deg) scaleX(-1);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
+82
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d2
|
||||
title: Passo 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aninhe uma `div` com uma classe de `bb1` no contêiner dos edifícios em segundo plano. Abra o arquivo `styles.css` e dê a `.bb1` uma `width` de `10%` e uma `height` de `70%`. "bb" é a abreviação para "background building" (construção em segundo plano). Esse será o primeiro prédio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um elemento `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div').length, 2);
|
||||
```
|
||||
|
||||
Você deve dar à nova `div` a classe `bb1`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1'));
|
||||
```
|
||||
|
||||
Você deve usar um seletor de classe `.bb1` para estilizar o elemento.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `.bb1` uma `width` de `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `.bb1` uma `height` de `70%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="background-buildings"></div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
+4
-4
@@ -7,17 +7,17 @@ dashedName: step-24
|
||||
|
||||
# --description--
|
||||
|
||||
Enfatize a palavra `love` no elemento `figcaption` encapsulando-o em um elemento (`em`).
|
||||
Enfatize a palavra `love` no elemento `figcaption` encapsulando-o em um elemento `em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento de ênfase (`em`) deve ter uma tag de abertura. As tags de abertura têm essa sintaxe: `<elementName>`.
|
||||
O elemento de ênfase `em` deve ter uma tag de abertura. As tags de abertura têm essa sintaxe: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('em'));
|
||||
```
|
||||
|
||||
O elemento de ênfase (`em`) deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
|
||||
O elemento de ênfase `em` deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/em\>/));
|
||||
@@ -29,7 +29,7 @@ Você excluiu o elemento `figcaption` ou está faltando nele uma tag de abertura
|
||||
assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/));
|
||||
```
|
||||
|
||||
O elemento de ênfase (`em`) deve estar ao redor do texto `love`. Você omitiu o texto ou tem um erro de digitação.
|
||||
O elemento de ênfase `em` deve estar ao redor do texto `love`. Você omitiu o texto ou tem um erro de digitação.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51579
|
||||
title: Passo 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro do elemento `head`, adicione uma `meta` com o atributo `charset` definido como `utf-8`. Adicione também um elemento `title` com o texto `Picasso Painting`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar exatamente um elemento `meta`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('meta').length === 1);
|
||||
```
|
||||
|
||||
O elemento `meta` deve ter o atributo `charset`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta')?.getAttribute('charset'));
|
||||
```
|
||||
|
||||
O atributo `charset` deve ser definido como `utf-8`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8');
|
||||
```
|
||||
|
||||
Você deve adicionar exatamente um elemento `title`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('title').length === 1);
|
||||
```
|
||||
|
||||
O elemento `title` deve ter o texto `Picasso Painting`. Atente-se a ortografia e letras maiúsculas.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('title')?.innerText === 'Picasso Painting');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157a
|
||||
title: Passo 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
FontAwesome é uma biblioteca de ícones que utiliza SVG, muitos deles estão livremente disponíveis para uso. Você usará alguns desses ícones no projeto, então precisará associar a folha de estilos externa ao HTML.
|
||||
|
||||
Adicione um elemento `link` com um `rel` de `stylesheet` e um `href` de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar outro elemento `link`.
|
||||
|
||||
```js
|
||||
// We set this to 1 because the CSS link is stripped from the code by our parser.
|
||||
assert(document.querySelectorAll('link').length === 1);
|
||||
```
|
||||
|
||||
O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet');
|
||||
```
|
||||
|
||||
O elemento `link` deve ter para o atributo `href` o valor de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link')?.[0]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')
|
||||
```
|
||||
|
||||
# --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" />
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157b
|
||||
title: Passo 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para começar com a pintura, dê ao elemento `body` uma `background-color` de `rgb(184, 132, 46)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `body`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
O elemento `body` deve ter a propriedade `background-color` definida como `rgb (184, 132, 46)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)');
|
||||
```
|
||||
|
||||
# --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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157c
|
||||
title: Passo 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro da tag body, crie um elemento `div`. Dê a ele um `id` de `back-wall`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar exatamente 1 elemento `div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 1);
|
||||
```
|
||||
|
||||
O elemento `div` deve ter o valor de `id` de `back-wall`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.getAttribute('id') === 'back-wall');
|
||||
```
|
||||
|
||||
# --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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
```
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157e
|
||||
title: Passo 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê ao elemento `back-wall` uma `width` de `100%` e uma `height` de `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve definir a `width` do seletor `#back-wall` como `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%');
|
||||
```
|
||||
|
||||
Você deve definir a `height` do seletor `#back-wall` como `60%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%');
|
||||
```
|
||||
|
||||
# --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>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51580
|
||||
title: Passo 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A propriedade `z-index` é usada para criar "camadas" para os elementos HTML. Se você já está familiarizado com as ferramentas de edição de imagem, deve ter trabalhado com camadas antes. Este é um conceito semelhante.
|
||||
|
||||
Elementos com um valor de `z-index` maior aparecerão como se estivessem sobrepostos aos elementos com um valor de `z-index` inferior. Elas podem ser combinadas com o posicionamento da lição anterior para criar efeitos exclusivos.
|
||||
|
||||
Como o elemento `back-wall` precisará aparecer "atrás" dos outros elementos que você vai criar, dê ao elemento `back-wall` um `z-index` de `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#back-wall` deve ter a propriedade `z-index` definida como `-1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.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>
|
||||
</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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51583
|
||||
title: Passo 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crie quatro elementos `div` dentro do elemento `offwhite-character`. Dê a esses elementos `div` os seguintes valores de `id`, em ordem: `white-hat`, `black-mask`, `gray-instrument` e `tan-table`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar quatro elementos `div` dentro do elemento `.offwhite-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div').length === 4);
|
||||
```
|
||||
|
||||
A primeira nova `div` deve ter para o atributo `id` o valor de `white-hat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat');
|
||||
```
|
||||
|
||||
A segunda nova `div` deve ter para o atributo `id` o valor de `black-mask`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask');
|
||||
```
|
||||
|
||||
A terceira nova `div` deve ter para o atributo `id` o valor de `gray-instrument`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument');
|
||||
```
|
||||
|
||||
A quarta nova `div` deve ter para o atributo `id` o valor de `tan-table`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table');
|
||||
```
|
||||
|
||||
# --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">
|
||||
--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;
|
||||
}
|
||||
```
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51586
|
||||
title: Passo 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use um seletor `id` para criar uma regra para o elemento `offwhite-character`. Dê a ele uma `width` de `300px`, uma `height` de `550px` e uma `background-color` de `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `#offwhite-character`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character'));
|
||||
```
|
||||
|
||||
`#offwhite-character` deve ter a propriedade `width` definida como `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px');
|
||||
```
|
||||
|
||||
`#offwhite-character` deve ter a propriedade `height` definida como `550px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px');
|
||||
```
|
||||
|
||||
`#offwhite-character` deve ter a propriedade `background-color` definida como `GhostWhite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51588
|
||||
title: Passo 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Usando um seletor `id`, estilize o elemento `white-hat`. Dê a ele uma `width` e uma `height` de `0` e um `border-style` de `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar um seletor `#white-hat`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat'));
|
||||
```
|
||||
|
||||
O seletor `#white-hat` deve ter a propriedade `width` definida como `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px');
|
||||
```
|
||||
|
||||
O seletor `#white-hat` deve ter a propriedade `height` definida como `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px');
|
||||
```
|
||||
|
||||
O seletor `#white-hat` deve ter a propriedade `border-style` definida como `solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid');
|
||||
```
|
||||
|
||||
# --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>
|
||||
</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%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51589
|
||||
title: Passo 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Isso não parece muito certo. Defina uma `border-width` de `0 120px 140px 180px` para dimensionar o chapéu corretamente.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#white-hat` deve ter a propriedade `border-width` definida como `0 120px 140px 180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px');
|
||||
```
|
||||
|
||||
# --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>
|
||||
</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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158b
|
||||
title: Passo 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê ao chapéu uma `position` `absolute`, um valor de `top` de `-140px` e um valor de `left` de `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#white-hat` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#white-hat` deve ter a propriedade `top` definida como `-140px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px');
|
||||
```
|
||||
|
||||
O seletor `#white-hat` deve ter a propriedade `left` definida como `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-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>
|
||||
</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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158d
|
||||
title: Passo 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê a máscara uma `position` `absolute` e um `top` e um `left` de `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#black-mask` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#black-mask` deve ter a propriedade `top` definida como `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px');
|
||||
```
|
||||
|
||||
O seletor `#black-mask` deve ter a propriedade `left` definida como `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.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>
|
||||
</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);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158e
|
||||
title: Passo 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para garantir que você possa ver a máscara, dê a ela um `z-index` de `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#black-mask` deve ter a propriedade `z-index` definida como `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.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>
|
||||
</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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51590
|
||||
title: Passo 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Agora, mova o elemento para o lugar certo com uma `position` `absolute`, um valor de `top` de `50px` e um valor de `left` de `125px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#gray-instrument` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#gray-instrument` deve ter o valor de `top` definido como `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px');
|
||||
```
|
||||
|
||||
O seletor `#gray-instrument` deve ter o valor de `left` definido como `125px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px');
|
||||
```
|
||||
|
||||
# --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>
|
||||
</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);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51592
|
||||
title: Passo 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use um seletor de classe para criar uma regra para os elementos `black-dot`. Defina a `width` como `10px`, a `height` como `10px` e a `background-color` como `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um seletor `.black-dot`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot'));
|
||||
```
|
||||
|
||||
O seletor `.black-dot` deve ter a propriedade `width` definida como `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px');
|
||||
```
|
||||
|
||||
O seletor `.black-dot` deve ter a propriedade `height` definida como `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px');
|
||||
```
|
||||
|
||||
O seletor `.black-dot` deve ter a propriedade `background-color` definida como `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.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>
|
||||
</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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51595
|
||||
title: Passo 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use um seletor id para estilizar o elemento `tan-table`. Dê a ele uma `width` de `450px`, uma `height` de `140px` e uma `background-color` de `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um seletor `#tan-table`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table'));
|
||||
```
|
||||
|
||||
O seletor `#tan-table` deve ter a propriedade `width` definida como `450px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px');
|
||||
```
|
||||
|
||||
O seletor `#tan-table` deve ter a propriedade `height` definida como `140px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px');
|
||||
```
|
||||
|
||||
O seletor `#tan-table` deve ter a propriedade `background-color` definida como `#D2691E`.
|
||||
|
||||
```js
|
||||
assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.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>
|
||||
</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%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+142
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51598
|
||||
title: Passo 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Depois do elemento `div#offwhite-character`, adicione uma `div` com o `id` `black-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um novo elemento `div` dentro do elemento `.characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 2);
|
||||
```
|
||||
|
||||
O novo elemento `div` deve ter `id` definido como `black-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-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>
|
||||
--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;
|
||||
}
|
||||
```
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159a
|
||||
title: Passo 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A máscara precisa de olhos. Dentro do elemento `gray-mask`, adicione dois elementos `div`. O primeiro deve ter a `class` definida como `eyes left` e o segundo deve ter a `class` definida como `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter dois elementos `div` dentro do elemento `#gray-mask`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#gray-mask > div')?.length === 2);
|
||||
```
|
||||
|
||||
O primeiro novo elemento `div` deve ter a `class` definida como `eyes left`.
|
||||
|
||||
```js
|
||||
const first = document.querySelectorAll('#gray-mask > div')?.[0];
|
||||
assert(first?.classList?.contains('eyes'));
|
||||
assert(first?.classList?.contains('left'));
|
||||
```
|
||||
|
||||
O segundo novo elemento `div` deve ter a `class` definida como `eyes right`.
|
||||
|
||||
```js
|
||||
const second = document.querySelectorAll('#gray-mask > div')?.[1];
|
||||
assert(second?.classList?.contains('eyes'));
|
||||
assert(second?.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">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="white-paper"></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;
|
||||
}
|
||||
```
|
||||
+167
@@ -0,0 +1,167 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159d
|
||||
title: Passo 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Mova o elemento `black-character` para a posição correta com uma `position` `absolute`, um `top` de `30%` e um `left` de `59%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#black-character` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#black-character` deve ter a propriedade `top` definida como `30%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%');
|
||||
```
|
||||
|
||||
O seletor `#black-character` deve ter a propriedade `left` definida como `59%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%');
|
||||
```
|
||||
|
||||
# --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);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+183
@@ -0,0 +1,183 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159f
|
||||
title: Passo 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Assim como em `white-hat`, você deve estilizar a borda do elemento `black-hat`. Dê a ele uma `border-top-color`, uma `border-right-color` e uma `border-bottom-color` de `transparent`. Defina a `border-left-color` como `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#black-hat` deve ter a propriedade `border-top-color` definida como `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
O seletor `#black-hat` deve ter a propriedade `border-right-color` definida como `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent');
|
||||
```
|
||||
|
||||
O seletor `#black-hat` deve ter a propriedade `border-bottom-color` definida como `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent');
|
||||
```
|
||||
|
||||
O seletor `#black-hat` deve ter a propriedade `border-left-color` definida como `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--
|
||||
}
|
||||
```
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a2
|
||||
title: Passo 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Posicione `gray-mask` definindo `position` como `absolute`, `top` como `-10px` e `left` como `70px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#gray-mask` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#gray-mask` deve ter a propriedade `top` definida como `-10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px');
|
||||
```
|
||||
|
||||
O seletor `#gray-mask` deve ter a propriedade `left` definida como `70px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
|
||||
```
|
||||
|
||||
# --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);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+199
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a4
|
||||
title: Passo 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê a `white-paper` uma `position` `absolute`, um `top` de `250px` e um `left` de `-150px` para colocá-lo no lugar certo.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#white-paper` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#white-paper` deve ter a propriedade `top` definida como `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px');
|
||||
```
|
||||
|
||||
O seletor `#white-paper` deve ter a propriedade `left` definida como `-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--
|
||||
}
|
||||
```
|
||||
+217
@@ -0,0 +1,217 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a7
|
||||
title: Passo 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abaixo do elemento `black-character`, adicione dois elementos `div` novos. Eles serão o xale. Dê aos dois uma `class` `blue`. Em seguida, dê ao primeiro um `id` de `blue-left` e ao segundo um `id` de `blue-right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter dois novos elementos `div` dentro do elemento `.characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 4);
|
||||
```
|
||||
|
||||
Os dois novos elementos `div` devem ter `class` definida como `blue`.
|
||||
|
||||
```js
|
||||
const divs = document.querySelectorAll('.characters > div');
|
||||
assert(divs?.[2]?.classList?.contains('blue'))
|
||||
assert(divs?.[3]?.classList?.contains('blue'))
|
||||
```
|
||||
|
||||
A primeira nova `div` deve ter para o atributo `id` o valor de `blue-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left');
|
||||
```
|
||||
|
||||
A segunda nova `div` deve ter para o atributo `id` o valor de `blue-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-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>
|
||||
--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%;
|
||||
}
|
||||
```
|
||||
+207
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a8
|
||||
title: Passo 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use um seletor `class` para focar nos novos elementos `blue`. Defina a`background-color` como `#1E90FF`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um seletor `.blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue'));
|
||||
```
|
||||
|
||||
O seletor `.blue` deve ter a propriedade `background-color` definida como `#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--
|
||||
|
||||
```
|
||||
+220
@@ -0,0 +1,220 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515aa
|
||||
title: Passo 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Agora, defina a `position` como `absolute`, `top` como `20%` e `left` como `20%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#blue-left` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#blue-left` deve ter a propriedade `top` definida como `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%');
|
||||
```
|
||||
|
||||
O seletor `#blue-left` deve ter a propriedade `left` definida como `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
+228
@@ -0,0 +1,228 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ac
|
||||
title: Passo 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê à `blue-right` o posicionamento correto com `position` definida como `absolute`, `top` definido como `50%` e `left` definido como `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#blue-right` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#blue-right` deve ter a propriedade `top` definida como `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%');
|
||||
```
|
||||
|
||||
O seletor `#blue-right` deve ter a propriedade `left` definida como `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--
|
||||
}
|
||||
```
|
||||
+225
@@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ad
|
||||
title: Passo 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abaixo dos elementos `blue`, adicione outra `div`. Dê a ele o valor de `id` de `orange-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter um novo elemento `div` dentro do elemento `characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 5);
|
||||
```
|
||||
|
||||
O novo elemento `div` deve ter `id` definido como `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%;
|
||||
}
|
||||
```
|
||||
+240
@@ -0,0 +1,240 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515af
|
||||
title: Passo 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O elemento `eyes-div` deve ter olhos. Adicione dois elementos `div` dentro dele. Dê ao primeiro uma `class` de `eyes left` e ao segundo uma `class` de `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter dois elementos `div` dentro de `eyes-div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
|
||||
```
|
||||
|
||||
A primeira nova `div` deve ter a `class` definida como `eyes left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes'));
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left'));
|
||||
```
|
||||
|
||||
A segunda nova `div` deve ter a `class` definida como `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%;
|
||||
}
|
||||
```
|
||||
+298
@@ -0,0 +1,298 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b1
|
||||
title: Passo 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro do elemento `guitar`, crie três elementos `div`. Dê aos dois primeiros o valor de `class` de `guitar`. Em seguida, dê ao terceiro um `id` de `guitar-left` e ao segundo um `id` de `guitar-right`. Adicione um `id` à terceira `div` com o valor `guitar-neck`.
|
||||
|
||||
A terceira `div` não deve ter a classe `guitar`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter três novos elementos `div` dentro do elemento `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.length === 3);
|
||||
```
|
||||
|
||||
A primeira nova `div` deve ter a `class` definida como `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar'));
|
||||
```
|
||||
|
||||
A primeira nova `div` deve ter um `id` definido como `guitar-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left');
|
||||
```
|
||||
|
||||
A segunda nova `div` deve ter a `class` definida como `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar'));
|
||||
```
|
||||
|
||||
A segunda nova `div` deve ter um `id` definido como `guitar-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right');
|
||||
```
|
||||
|
||||
A terceira nova `div` deve ter um `id` definido como `guitar-neck`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck');
|
||||
```
|
||||
|
||||
Você não deve dar à terceira `div` uma `class` `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%;
|
||||
}
|
||||
```
|
||||
+285
@@ -0,0 +1,285 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b4
|
||||
title: Passo 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê a `orange-character` uma `position` `absolute`, um `top` de `25%` e um `left` de `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#orange-character` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#orange-character` deve ter a propriedade `top` definida como `25%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%');
|
||||
```
|
||||
|
||||
O seletor `#orange-character` deve ter a propriedade `left` definida como `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--
|
||||
}
|
||||
```
|
||||
+282
@@ -0,0 +1,282 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b6
|
||||
title: Passo 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O elemento `black-round-hat` deve ser redondo. Dê a ele um `border-radius` de `50%` para corrigir isso.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#black-round-hat` deve ter a propriedade `border-radius` definida como `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--
|
||||
}
|
||||
```
|
||||
+295
@@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b7
|
||||
title: Passo 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Mova `black-round-hat` para o lugar com uma `position` `absolute`, um `top` de `-100px` e um `left` de `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#black-round-hat` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#black-round-hat` deve ter a propriedade `top` definida como `-100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px');
|
||||
```
|
||||
|
||||
O seletor `#black-round-hat` deve ter a propriedade `left` definida como `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--
|
||||
}
|
||||
```
|
||||
+301
@@ -0,0 +1,301 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b9
|
||||
title: Passo 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use um seletor `id` para criar uma regra para o elemento `eyes-div`. Defina a `width` como `180px` e a `height` como `50px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um seletor `#eyes-div`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div'));
|
||||
```
|
||||
|
||||
O seletor `#eyes-div` deve ter a propriedade `width` definida como `180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px');
|
||||
```
|
||||
|
||||
O seletor `#eyes-div` deve ter a propriedade `height` definida como `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--
|
||||
|
||||
```
|
||||
+304
@@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ba
|
||||
title: Passo 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Agora, mova `eyes-div` para a posição correta com `position` definida como `absolute`, `top` definido como `-40px` e `left` definido como `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#eyes-div` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#eyes-div` deve ter a propriedade `top` definida como `-40px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px');
|
||||
```
|
||||
|
||||
O seletor `#eyes-div` deve ter a propriedade `left` definida como `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--
|
||||
}
|
||||
```
|
||||
+337
@@ -0,0 +1,337 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515be
|
||||
title: Passo 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Selecione o `id` com valor `guitar-left` e defina a `position` como `absolute` e `left` como `0px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um seletor `#guitar-left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-left'));
|
||||
```
|
||||
|
||||
O seletor `#guitar-left` deve ter a propriedade `position` definida como `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--
|
||||
|
||||
```
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515bf
|
||||
title: Passo 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Selecione o `id` com valor `guitar-right` e também defina `position` como `absolute`. Dessa vez, defina `left` como `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um seletor `#guitar-right`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right'));
|
||||
```
|
||||
|
||||
O seletor `#guitar-right` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `#guitar-right` deve ter a propriedade `left` definida como `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--
|
||||
|
||||
```
|
||||
+359
@@ -0,0 +1,359 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c0
|
||||
title: Passo 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Agora, você precisa mover os ícones de barra para o lugar certo. Crie um seletor `class` para a classe `fa-bars`. Defina `display` como `block`, `margin-top` como `30%` e `margin-left` como `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um seletor `.fa-bars`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars'));
|
||||
```
|
||||
|
||||
O seletor `.fa-bars` deve ter a propriedade `display` definida como `block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block');
|
||||
```
|
||||
|
||||
O seletor `.fa-bars` deve ter uma propriedade `margin-top` definida como `30%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%');
|
||||
```
|
||||
|
||||
O seletor `.fa-bars` deve ter uma propriedade `margin-left` definida como `30%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '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);
|
||||
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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
+365
@@ -0,0 +1,365 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c1
|
||||
title: Passo 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use um seletor `id` para criar uma regra `guitar-neck`. Defina a `width` como `200px`, a `height` como `30px` e a `background-color` como `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um seletor `#guitar-neck`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck'));
|
||||
```
|
||||
|
||||
O seletor `#guitar-neck` deve ter a propriedade `width` definida como `200px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px');
|
||||
```
|
||||
|
||||
O seletor `#guitar-neck` deve ter a propriedade `height` definida como `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px');
|
||||
```
|
||||
|
||||
O seletor `#guitar-neck` deve ter a propriedade `background-color` definida como `#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--
|
||||
|
||||
```
|
||||
+354
@@ -0,0 +1,354 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c3
|
||||
title: Passo 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê a `guitar-neck` um `z-index` de `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `#guitar-neck` deve ter a propriedade `z-index` definida como `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--
|
||||
}
|
||||
```
|
||||
+388
@@ -0,0 +1,388 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c6
|
||||
title: Passo 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para a `class` com o valor `left`, crie o seletor e defina `position` como `absolute`, `top` como `15px` e `left` como `30px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um seletor `.left`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left'));
|
||||
```
|
||||
|
||||
O seletor `.left` deve ter a propriedade `position` definida como `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
O seletor `.left` deve ter a propriedade `top` definida como `15px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px');
|
||||
```
|
||||
|
||||
O seletor `.left` deve ter a propriedade `left` definida como `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--
|
||||
|
||||
```
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 60b80da8676fb3227967a731
|
||||
title: Passo 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o arquivo CSS agora, mesmo que você ainda não tenha escrito o CSS.
|
||||
|
||||
Adicione um elemento `link` com um `rel` de `stylesheet`, um `type` de `text/css` e um `href` de `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
O código deve ter um elemento `link`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
O elemento `link` deve ser de fechamento automático.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\w\W\s]+\/>/i));
|
||||
```
|
||||
|
||||
O elemento `link` deve estar dentro do elemento `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
O elemento `link` deve ter o atributo `type` com o valor `text/css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
|
||||
```
|
||||
|
||||
O elemento `link` deve ter o atributo `href` com o valor `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Picasso Painting</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
+326
@@ -0,0 +1,326 @@
|
||||
---
|
||||
id: 60ba89123a445e0f5c9e4022
|
||||
title: Passo 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dê aos elementos `triangle` a cor correta. Defina a `border-top-color`, a `border-bottom-color` e a `border-left-color` como `transparent`. Defina a `border-right-color` como `Gold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O seletor `.triangle` deve ter a propriedade `border-top-color` definida como `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
O seletor `.triangle` deve ter a propriedade `border-bottom-color` definida como `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent');
|
||||
```
|
||||
|
||||
O seletor `.triangle` deve ter a propriedade `border-left-color` definida como `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent');
|
||||
```
|
||||
|
||||
O seletor `.triangle` deve ter a propriedade `border-right-color` definida como `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--
|
||||
}
|
||||
```
|
||||
+315
@@ -0,0 +1,315 @@
|
||||
---
|
||||
id: 60ba89146b25080f99ab54ad
|
||||
title: Passo 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Crie um seletor `class` para os elementos `triangle`. Defina a `width` como `0` e a `height` como `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um seletor `.triangle`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle'));
|
||||
```
|
||||
|
||||
O seletor `.triangle` deve ter a propriedade `width` definida para `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px');
|
||||
```
|
||||
|
||||
O seletor `.triangle` deve ter a propriedade `height` definida para `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--
|
||||
|
||||
```
|
||||
+310
@@ -0,0 +1,310 @@
|
||||
---
|
||||
id: 60ba8914bab51f0fb8228e9c
|
||||
title: Passo 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o elemento `triangles` um seletor `id`. Defina a `width` como `250px` e a `height` como `550px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um seletor `#triangles`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles'));
|
||||
```
|
||||
|
||||
O seletor `#triangles` deve ter a propriedade `width` definida como `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px');
|
||||
```
|
||||
|
||||
O seletor `#triangles` deve ter a propriedade `height` definida para `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--
|
||||
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user