diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 380206d43ae..32a6e97073c 100644 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -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); +})(); ``` 你的產品登陸頁面至少要有一個媒體查詢 diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index f303012dad8..47694d5f86a 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -29,21 +29,7 @@ const ourMusic = [ ]; ``` -這是一個包含一個對象的數組。 該對象有關於專輯的各種元數據（metadata）。 它也有一個嵌套的 `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 -} -``` +這是一個包含一個對象的數組。 該對象有關於專輯的各種元數據（metadata）。 它也有一個嵌套的 `formats` 數組。 可以將專輯添加到頂級數組來增加更多的專輯記錄。 對象將數據以一種鍵 - 值對的形式保存。 在上面的示例中，`"artist": "Daft Punk"` 有一個鍵爲 `artist` 值爲 `Daft Punk` 的屬性。 **提示：**數組中有多個 JSON 對象的時候，對象與對象之間要用逗號隔開。 diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 39f9eb0d629..26afb73f1d6 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -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); +})(); ``` 你的产品登陆页面至少要有一个媒体查询 diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index d2145515b93..c2d9a2ffcad 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -29,21 +29,7 @@ const ourMusic = [ ]; ``` -这是一个包含一个对象的数组。 该对象有关于专辑的各种元数据（metadata）。 它也有一个嵌套的 `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 -} -``` +这是一个包含一个对象的数组。 该对象有关于专辑的各种元数据（metadata）。 它也有一个嵌套的 `formats` 数组。 可以将专辑添加到顶级数组来增加更多的专辑记录。 对象将数据以一种键 - 值对的形式保存。 在上面的示例中，`"artist": "Daft Punk"` 有一个键为 `artist` 值为 `Daft Punk` 的属性。 **提示：**数组中有多个 JSON 对象的时候，对象与对象之间要用逗号隔开。 diff --git a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 98ac4a16a04..3c5ed143f59 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -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 diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index 5404cd0fd0a..c391715d2da 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -29,21 +29,7 @@ const ourMusic = [ ]; ``` -Esto es una arreglo que contiene un objeto en su interior. El objeto tiene varias piezas de metadatos 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 metadatos 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. diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 1399fa32b76..d5023c785a6 100644 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -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 diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index ee2a3f97b13..7c9f7352f09 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -29,21 +29,7 @@ const ourMusic = [ ]; ``` -Questo è un array che contiene un oggetto al suo interno. L'oggetto ha vari pezzi di metadati 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 metadati 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. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md index 6dabe285bcb..26c92fa59d6 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md @@ -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')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md index 7f81afef36c..3d13aea822f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md @@ -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')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md index 6e01b50f23a..a76b6c7959e 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md @@ -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.'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md index d88fc72112e..1a7568cb176 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md @@ -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'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md index 47d490e5db9..9019d74eac4 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -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'); diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 5a39c77c551..ecc15b51e90 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -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 つのメディアクエリが使われている必要があります diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index 7f11baa104a..e3f8f3502b3 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -29,21 +29,7 @@ const ourMusic = [ ]; ``` -これは内部にオブジェクトを 1 つ含む配列です。 このオブジェクトには、アルバムに関するさまざまなメタデータがあります。 また、ネストされた `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 つ含む配列です。 このオブジェクトには、アルバムに関するさまざまなメタデータがあります。 また、ネストされた `formats` という配列もあります。 アルバムレコードを追加したい場合は、最上位の配列にレコードを追加することで実現できます。 オブジェクトではデータがプロパティに保持されます。プロパティはキーと値の組み合わせの形式を持ちます。 上記の例では、`"artist": "Daft Punk"` はプロパティで、`artist` というキーと `Daft Punk` という値を持っています。 **注:** 配列内では、最後のオブジェクトを除くすべてのオブジェクトの後にコンマを置く必要があります。 diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md index f6d624e3443..5c38e14dbdc 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -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 つのメディアクエリが使われている必要があります。 diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index c2de62a9188..ed0a07a376a 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -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 diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md index 82017bedc72..908f3a99065 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md @@ -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: diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md index 44e512b9c83..2d5acc09c49 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md @@ -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. diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md index 2690820cb7a..56c016486ee 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md @@ -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 ponto flutuante ou floats. -**Observação:** nem todos os números reais podem ser representados com precisão no ponto flutuante. 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-- diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md index bc401dc1d74..247e5b82f55 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md @@ -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): diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index 3c7f958fc44..7712ea77333 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -29,21 +29,7 @@ const ourMusic = [ ]; ``` -Este é um array que contém um objeto dentro dele. O objeto possui vários pedaços de metadados 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 metadados 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. diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md index 4b28d911f64..f8e433c665a 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md @@ -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. diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md index 64f8fea21ae..4fce9b028c3 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md @@ -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 AT and CG, 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"]]` diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md index a5795068b34..8cb7bbeceea 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md @@ -10,9 +10,9 @@ dashedName: caesars-cipher Uma das cifras mais simples e mais conhecidas é a cifra de César, também conhecida como uma cifra de mudança. 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. diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md index ff0d3b6bacf..42926e25491 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md @@ -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-- diff --git a/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md index b376f7b85c8..381b87506c0 100644 --- a/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md +++ b/curriculum/challenges/portuguese/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md @@ -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: diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md index f38d76616f5..460b75e2a51 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -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. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md index 53d8f84bdfe..a00602e399a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md @@ -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-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md index 48dcb560030..5274b39d3a4 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md @@ -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]; diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index 83f2f809489..550d46bf29d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -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)'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md index 44695fedb70..8386797afb6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -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)'); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md new file mode 100644 index 00000000000..fe9463f7091 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md @@ -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 + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md new file mode 100644 index 00000000000..b4f46e62980 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md new file mode 100644 index 00000000000..e51592feb14 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md new file mode 100644 index 00000000000..1c4685e3bc2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md new file mode 100644 index 00000000000..b6a3eab6d64 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md new file mode 100644 index 00000000000..e006426b9e1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md new file mode 100644 index 00000000000..07b7f079046 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md new file mode 100644 index 00000000000..3695afff925 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md new file mode 100644 index 00000000000..77790b5412f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md new file mode 100644 index 00000000000..3e645e01f2c --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md new file mode 100644 index 00000000000..d47f50636fe --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md new file mode 100644 index 00000000000..a493344f00f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md new file mode 100644 index 00000000000..945807190a1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md new file mode 100644 index 00000000000..7252fcf16a1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md new file mode 100644 index 00000000000..ec6a5f0a75b --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md new file mode 100644 index 00000000000..a674e504031 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md new file mode 100644 index 00000000000..79ac0fa1952 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md new file mode 100644 index 00000000000..41dac265822 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md new file mode 100644 index 00000000000..b4cd1ae12bb --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md new file mode 100644 index 00000000000..5b6187e43a9 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md new file mode 100644 index 00000000000..213dfa620f2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md new file mode 100644 index 00000000000..b1af5238d0a --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md @@ -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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md new file mode 100644 index 00000000000..dead08397db --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md @@ -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 + + + + City Skyline + + + + +--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +``` + diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md index 1511d731db7..1cfb26bfca1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md @@ -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: ``. +O elemento de ênfase `em` deve ter uma tag de abertura. As tags de abertura têm essa sintaxe: ``. ```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( diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md new file mode 100644 index 00000000000..bec7fffec3e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md @@ -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 + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md new file mode 100644 index 00000000000..003fa4d8f98 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md @@ -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 + + + + + Picasso Painting + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md new file mode 100644 index 00000000000..dc6350ed171 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md @@ -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 + + + + + Picasso Painting + + + + + + +``` + +```css + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md new file mode 100644 index 00000000000..bd401b1b105 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md @@ -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 + + + + + Picasso Painting + + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md new file mode 100644 index 00000000000..13ed6b125a2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md @@ -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 + + + + + Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md new file mode 100644 index 00000000000..3bff24bd9a6 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md @@ -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 + + + + + Picasso Painting + + + + +
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md new file mode 100644 index 00000000000..68590324a4d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md new file mode 100644 index 00000000000..86210f683b0 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md new file mode 100644 index 00000000000..850ea802cda --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md new file mode 100644 index 00000000000..39031800129 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md new file mode 100644 index 00000000000..1e090f54576 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md new file mode 100644 index 00000000000..77afa3c25d1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md new file mode 100644 index 00000000000..ab9e3c7cabf --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md new file mode 100644 index 00000000000..a520087463f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md new file mode 100644 index 00000000000..eb157a2f5c0 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md new file mode 100644 index 00000000000..18af50ebb2a --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md new file mode 100644 index 00000000000..bb2004f5e37 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md new file mode 100644 index 00000000000..0f1c8fb1c30 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```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; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md new file mode 100644 index 00000000000..ed42072a3ef --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md new file mode 100644 index 00000000000..90f7556bd91 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md new file mode 100644 index 00000000000..7a9748fb45e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md new file mode 100644 index 00000000000..ed90f945d60 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md new file mode 100644 index 00000000000..ebffbca2e25 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```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%; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md new file mode 100644 index 00000000000..e54ec126d50 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md new file mode 100644 index 00000000000..92ffa5b8f10 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md new file mode 100644 index 00000000000..984ee7b97dd --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md new file mode 100644 index 00000000000..1c98019f20f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```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%; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md new file mode 100644 index 00000000000..3720a74ebb3 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```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%; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md new file mode 100644 index 00000000000..1ed31eccac8 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```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%; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md new file mode 100644 index 00000000000..6161325a5df --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md new file mode 100644 index 00000000000..169f729c45e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md new file mode 100644 index 00000000000..48b9493c45d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md new file mode 100644 index 00000000000..b330a831725 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md new file mode 100644 index 00000000000..ce8f8a73669 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md new file mode 100644 index 00000000000..fe974981124 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md new file mode 100644 index 00000000000..e378be975ad --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md new file mode 100644 index 00000000000..c7545b28f3a --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md new file mode 100644 index 00000000000..bbd0ad005d3 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md new file mode 100644 index 00000000000..8a61124a94a --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md new file mode 100644 index 00000000000..9aa98621fd0 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md new file mode 100644 index 00000000000..693a249436e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md @@ -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, //i)); +``` + +O elemento `link` deve estar dentro do elemento `head`. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`. + +```js +assert.match(code, / + + + + Picasso Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md new file mode 100644 index 00000000000..531031b106f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md new file mode 100644 index 00000000000..9bd74dc99fb --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md new file mode 100644 index 00000000000..06b4fd1be2b --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -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 + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md new file mode 100644 index 00000000000..410ea5d7511 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -0,0 +1,330 @@ +--- +id: 60ba9296d4d6b414c1b10995 +title: Passo 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +No mesmo seletor `#guitar`, defina `position` como `absolute`, `top` como `120px` e `left` como `0px`. + +# --hints-- + +O seletor `#guitar` deve ter a propriedade `position` definida como `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); +``` + +O seletor `#guitar` deve ter a propriedade `top` definida como `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); +``` + +O seletor `#guitar` deve ter a propriedade `left` definida como `0px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md new file mode 100644 index 00000000000..cd2e22a3a83 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -0,0 +1,321 @@ +--- +id: 60ba92987c1e4914dfa7a0b9 +title: Passo 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Dê à regra `#guitar` um `z-index` de `3`. + +# --hints-- + +O seletor `#guitar` deve ter a propriedade `z-index` definida como `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md new file mode 100644 index 00000000000..379d6d733df --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md @@ -0,0 +1,48 @@ +--- +id: 61fd6343fb42013d99bcd7f3 +title: Passo 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Dentro do elemento `body`, aninhe um elemento `section` e um elemento `main`. + +# --hints-- + +O primeiro elemento dentro do elemento `body` deve ser seu elemento `main`. + +```js +assert(document.querySelector('body')?.children?.[0]?.localName === 'main'); +``` + +Você deve ter um elemento `section` dentro do elemento `main`. + +```js +assert(document.querySelector('main')?.children?.[0]?.localName === 'section'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md new file mode 100644 index 00000000000..47eb65f6ca2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md @@ -0,0 +1,52 @@ +--- +id: 61fd66c687e610436494c6f1 +title: Passo 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Dentro do elemento `section`, adicione um elemento `h1` e um elemento `span`. + +# --hints-- + +O elemento `section` deve ter um elemento `h1`. + +```js +assert(document.querySelector('section')?.children?.[0]?.localName === 'h1'); +``` + +O elemento `h1` deve ter um elemento `span`. + +```js +assert(document.querySelector('h1')?.children?.[0]?.localName === 'span'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md new file mode 100644 index 00000000000..10d41bf6ecb --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md @@ -0,0 +1,78 @@ +--- +id: 61fd67a656743144844941cb +title: Passo 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Leitores de tela anunciam os elementos do HTML com base no fluxo do documento. No fim das contas, queremos que o balanço patrimonial tenha o título de "Balance Sheet" e um subtítulo de "AcmeWidgetCorp". No entanto, essa ordem não faz sentido se anunciada por um leitor de tela. + +Dê ao `span` existente o atributo `class` definido como `flex` e adicione dois elementos `span` dentro dele. Dê ao primeiro o texto `AcmeWidgetCorp`. Dê ao segundo o texto `Balance Sheet`. Você usará o CSS para inverter a ordem do texto na página, mas a ordem do HTML fará mais sentido para um leitor de tela. + +# --hints-- + +O elemento span existente deve ter o atributo `class` definido como `flex`. + +```js +assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex')); +``` + +O elemento `span` existente deve ter dois novos elementos `span` dentro dele. + +```js +assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span'); +assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span'); +``` + +Os novos elementos `span` não devem ter um atributo `class`. + +```js +assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length); +assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length); +``` + +O primeiro novo elemento `span` deve ter o texto `AcmeWidgetCorp`. + +```js +assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp'); +``` + +O segundo novo elemento `span` deve ter o texto `Balance Sheet`. + +```js +assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+--fcc-editable-region-- + + +--fcc-editable-region-- +

+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md new file mode 100644 index 00000000000..d44c5a48808 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md @@ -0,0 +1,65 @@ +--- +id: 61fd6ab779390f49148773bb +title: Passo 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Abaixo do elemento `h1`, crie um elemento `div`. Dê a ele um atributo `id` definido como `years`. Você quer que esse elemento específico esteja escondido dos leitores de tela, então dê a ele o atributo `aria-hidden` definido como `true`. + +# --hints-- + +Você deve criar um elemento `div` após o elemento `h1`. + +```js +assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div'); +``` + +O novo elemento `div` deve ter um atributo `id` definido como `years`. + +```js +assert(document.querySelector('div')?.getAttribute('id') === 'years'); +``` + +O novo elemento `div` deve ter o atributo `aria-hidden` definido como `true`. + +```js +assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md new file mode 100644 index 00000000000..d7e8aacf778 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md @@ -0,0 +1,79 @@ +--- +id: 61fd6b7c83dbf54a08cf0498 +title: Passo 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Dentro do elemento `div`, adicione três elementos `span`. Dê a cada um deles um atributo `class` definido como `year` e adicione os textos a seguir (em ordem): `2019`, `2020` e `2021`. + +# --hints-- + +O elemento `div` deve ter três elementos `span`. + +```js +assert(document.querySelector('div')?.children?.length === 3); +``` + +Cada elemento `span` deve ter o atributo `class` definido como `year`. + +```js +const spans = [...document.querySelector('div')?.children]; +spans.forEach(span => assert(span?.classList?.contains('year'))); +``` + +O primeiro `span` deve ter o texto `2019`. + +```js +assert(document.querySelector('div')?.children?.[0]?.textContent === '2019'); +``` + +O segundo `span` deve ter o texto `2020`. + +```js +assert(document.querySelector('div')?.children?.[1]?.textContent === '2020'); +``` + +O terceiro `span` deve ter o texto `2021`. + +```js +assert(document.querySelector('div')?.children?.[2]?.textContent === '2021'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md new file mode 100644 index 00000000000..31c335033f0 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md @@ -0,0 +1,80 @@ +--- +id: 61fd6cc9475a784b7776233e +title: Passo 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Abaixo do elemento `div` existente, adicione um novo elemento `div` com a `class` definida como `table-wrap`. Este será o contêiner das suas tabelas. + +Dentro dela, adicione três elementos `table`. Você usará o CSS para estilizá-las em uma única tabela, mas usar tabelas separadas ajudará os leitores de tela a entender o fluxo do documento. + +# --hints-- + +Você deve criar um elemento `div`. + +```js +assert(document.querySelectorAll('div')?.length === 2); +``` + +O novo elemento `div` deve ter a `class` definida como `table-wrap`. + +```js +assert(document.querySelector('.table-wrap')?.localName === 'div'); +``` + +O elemento `.table-wrap` deve vir após o elemento `div` existente. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap')); +``` + +O elemento `.table-wrap` deve ter três elementos `table`. + +```js +const children = [...(document.querySelector('.table-wrap')?.children ?? [])]; +assert(children?.length === 3); +children.forEach(child => assert(child?.localName === 'table')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md new file mode 100644 index 00000000000..463aceb8b3d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md @@ -0,0 +1,86 @@ +--- +id: 61fd719788899952e67692b9 +title: Passo 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Os elementos `thead` and `tbody` são usados para indicar qual porção da tabela é o cabeçalho e qual porção contém os dados primários ou o conteúdo. + +Adicione um `thead` e um `tbody` à primeira `table`, abaixo do elemento `caption`. + +# --hints-- + +O primeiro elemento `table` deve ter um elemento `thead`. + +```js +assert(document.querySelectorAll('table')?.[0]?.querySelector('thead')); +``` + +O primeiro elemento `table` deve ter um elemento `tbody`. + +```js +assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody')); +``` + +O elemento `thead` deve estar imediatamente abaixo do elemento `caption`. + +```js +assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead'); +``` + +O elemento `tbody` deve estar imediatamente abaixo do elemento `thead`. + +```js +assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+--fcc-editable-region-- + + +
Assets
+--fcc-editable-region-- + +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md new file mode 100644 index 00000000000..f9baa9ba50c --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md @@ -0,0 +1,86 @@ +--- +id: 61fd71d596e8f253b9408b39 +title: Passo 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +O elemento `tr` é usado para indicar uma linha de tabela. Adicione um elemento `tr` dentro do elemento `thead`. No novo elemento `tr`, adicione um elemento `td` seguido por três elementos `th`. + +O elemento `td` indica uma célula de dados, enquanto o elemento `th` indica uma célula do cabeçalho. + +# --hints-- + +O elemento `thead` deve ter um elemento `tr`. + +```js +assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr'); +``` + +O elemento `tr` deve ter um elemento `td` como primeiro filho. + +```js +assert(document.querySelector('tr')?.children?.[0]?.localName === 'td'); +``` + +O elemento `tr` deve ter três elementos `th` depois do elemento `td`. + +```js +assert(document.querySelector('tr')?.children?.[1]?.localName === 'th'); +assert(document.querySelector('tr')?.children?.[2]?.localName === 'th'); +assert(document.querySelector('tr')?.children?.[3]?.localName === 'th'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + +--fcc-editable-region-- + + +--fcc-editable-region-- + + +
Assets
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md new file mode 100644 index 00000000000..9baa1581467 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md @@ -0,0 +1,125 @@ +--- +id: 61fd75ea7f663457612dba02 +title: Passo 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Dentro de cada um dos novos elementos `th`, aninhe um elemento `span` com o atributo `class` definido como `sr-only year`. Dê a eles os seguintes textos (em ordem): `2019`, `2020` e `2021`. + +Dê ao terceiro elemento `th` a `class` com o valor de `current`. + +Deixe o elemento `td` vazio. Esse elemento existe apenas para garantir que a tabela tenha um layout de quatro colunas e associar os cabeçalhos às colunas corretas. + +# --hints-- + +Cada um dos elementos `th` deve ter um elemento `span`. + +```js +const ths = [...document.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.length === 1); + assert(th?.children?.[0]?.localName === 'span'); +}); +``` + +Cada um dos novos elementos `span` deve ter o atributo `class` com o valor `sr-only year`. + +```js +const ths = [...document.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.[0]?.classList?.contains('sr-only')); + assert(th?.children?.[0]?.classList?.contains('year')); +}); +``` + +O primeiro elemento `span` deve ter o texto `2019`. + +```js +assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); +``` + +O segundo elemento `span` deve ter o texto `2020`. + +```js +assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); +``` + +O terceiro elemento `span` deve ter o texto `2021`. + +```js +assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); +``` + +O terceiro elemento `th` deve ter o atributo `class` com o valor `current`. + +```js +assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current')); +``` + +O elemento `td` deve estar vazio. + +```js +assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === ''); +assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- + + +
Assets
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md new file mode 100644 index 00000000000..820d11640c0 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md @@ -0,0 +1,96 @@ +--- +id: 61fd7648a7ba2e5882436831 +title: Passo 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Dentro do elemento `tbody`, adicione quatro elementos `tr`. Dê aos três primeiros um atributo `class` definido como `data` e ao quarto um atributo `class` definido como `total`. + +# --hints-- + +O elemento `tbody` deve ter quatro elementos `tr`. + +```js +const children = [...document.querySelector('tbody')?.children]; +assert(children?.length === 4); +children.forEach(child => assert(child?.localName === 'tr')); +``` + +Os primeiros três elementos `tr` devem ter o atributo `class` definido como `data`. + +```js +const children = [...document.querySelector('tbody')?.children]; +children.forEach((child, index) => { + if (index < 3) { + assert(child?.classList?.contains('data')); + } +}); +``` + +O quarto elemento `tr` deve ter o atributo `class` definido como `total`. + +```js +const children = [...document.querySelector('tbody')?.children]; +assert(children?.[3]?.classList?.contains('total')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- +
Assets
201920202021
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md new file mode 100644 index 00000000000..02a0aa35d4f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md @@ -0,0 +1,134 @@ +--- +id: 61fd778081276b59d59abad6 +title: Passo 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +No primeiro `tr`, adicione um elemento `th` com o texto `Cash This is the cash we currently have on hand.`. Envolva todo esse texto, exceto `Cash`, em um elemento `span` com a `class` definida como `description`. + +Depois disso, adicione três elementos `td` com os seguintes textos (em ordem): `$25`, `$30` e `$28`. Dê ao terceiro elemento `td` a `class` com o valor de `current`. + +# --hints-- + +O primeiro `tr` deve ter um elemento `th`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); +``` + +O elemento `th` deve ter o texto `Cash This is the cash we currently have on hand.`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.'); +``` + +Você deve envolver o texto `This is the cash we currently have on hand.` em um elemento `span`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.'); +``` + +O elemento `span` deve ter o atributo `class` com o valor `description`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$25`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25'); +``` + +O segundo elemento `td` deve ter o texto `$30`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30'); +``` + +O terceiro elemento `td` deve ter o texto `$28`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28'); +``` + +O terceiro elemento `td` deve ter o atributo `class` com o valor `current`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- + + + + + + + +
Assets
201920202021
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md new file mode 100644 index 00000000000..386247308b9 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md @@ -0,0 +1,138 @@ +--- +id: 61fd77f7ad2aeb5ae34d07d6 +title: Passo 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +No segundo elemento `tr`, adicione um elemento `th` com o texto `Checking Our primary transactional account.`. Envolva esse texto, exceto `Checking`, em um elemento `span` com o atributo `class` definido como `description`. + +Depois disso, adicione três elementos `td` com o seguinte texto (em ordem): `$54`, `$56`, `$53`. Dê ao terceiro elemento `td` a `class` com o valor de `current`. + +# --hints-- + +O segundo elemento `tr` deve ter um elemento `th`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')); +``` + +O elemento `th` deve ter o texto `Checking Our primary transactional account.`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.'); +``` + +Você deve emvolver o texto `Our primary transactional account.` em um elemento `span`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.'); +``` + +O elemento `span` deve ter o atributo `class` com o valor `description`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$54`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54'); +``` + +O segundo elemento `td` deve ter o texto `$56`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56'); +``` + +O terceiro elemento `td` deve ter o texto `$53`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53'); +``` + +O terceiro elemento `td` deve ter o atributo `class` com o valor `current`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md new file mode 100644 index 00000000000..46a56efd0e9 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md @@ -0,0 +1,140 @@ +--- +id: 61fd7a160ed17960e971f28b +title: Passo 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +No quarto elemento `tr`, adicione um elemento `th` com o texto `Total Assets`. Envolva o texto `Assets` em um elemento `span` com o atributo `class` definido como `sr-only`. + +Depois disso, adicione três elementos `td` com o seguinte texto (em ordem): `$579`, `$736`, `$809`. Dê ao terceiro elemento `td` a `class` com o valor de `current`. + +# --hints-- + +O quarto `tr` deve ter um elemento `th`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); +``` + +O elemento `th` deve conter o texto `Total Assets`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets'); +``` + +Você deve envolver o texto `Assets` dentro de um elemento `span`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets'); +``` + +O elemento `span` deve ter o atributo `class` com o valor `sr-only`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$579`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579'); +``` + +O segundo elemento `td` deve ter o texto `$736`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736'); +``` + +O terceiro elemento `td` deve ter o texto `$809`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +--fcc-editable-region-- + + +--fcc-editable-region-- + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md new file mode 100644 index 00000000000..131edd62ab8 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md @@ -0,0 +1,130 @@ +--- +id: 61fd7b3fcaa5406257abc5d1 +title: Passo 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Hora de passar para a segunda tabela. Comece dando a ela um elemento `caption` definido como `Liabilities`. Em seguida, adicione `thead` e `tbody`. + +# --hints-- + +O segundo elemento `table` deve ter um elemento `caption`. + +```js +assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption'); +``` + +O elemento `caption` dever ter o texto `Liabilities`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities'); +``` + +O segundo elemento `table` deve ter um elemento `thead`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')); +``` + +O segundo elemento `table` deve ter um elemento `tbody`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')); +``` + +O elemento `thead` deve estar imediatamente abaixo do elemento `caption`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead'); +``` + +O elemento `tbody` deve estar imediatamente abaixo do elemento `thead`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + +
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md new file mode 100644 index 00000000000..5000d64c0bd --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md @@ -0,0 +1,119 @@ +--- +id: 61fd8e491324ce717da97ffe +title: Passo 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Dentro do `thead`, adicione um `tr`. Dentro dele, adicione um `td` e três elementos `th`. + +# --hints-- + +O elemento `thead` deve ter um elemento `tr`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr'); +``` + +O elemento `tr` deve ter um elemento `td` como primeiro filho. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td'); +``` + +O elemento `tr` deve ter três elementos `th` depois do elemento `td`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + + + + + + +
Liabilities
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md new file mode 100644 index 00000000000..1563d4beeae --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md @@ -0,0 +1,149 @@ +--- +id: 61fd8fd08af43372f02952d0 +title: Passo 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Dê a cada um dos elementos `th` um elemento `span` com a classe definida como `sr-only` e os seguintes textos, em ordem: `2019`, `2020` e `2021`. + +# --hints-- + +Cada um dos elementos `th` deve ter um elemento `span`. + +```js +const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.length === 1); + assert(th?.children?.[0]?.localName === 'span'); +}); +``` + +Cada um dos novos elementos `span` deve ter o atributo `class` com o valor `sr-only`. + +```js +const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.[0]?.classList?.contains('sr-only')); +}); +``` + +O primeiro elemento `span` deve ter o texto `2019`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); +``` + +O segundo elemento `span` deve ter o texto `2020`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); +``` + +O terceiro elemento `span` deve ter o texto `2021`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); +``` + +O elemento `td` deve estar vazio. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === ''); +assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + + + + + + + + + + + + +
Liabilities
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md new file mode 100644 index 00000000000..427ebba3b4a --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md @@ -0,0 +1,131 @@ +--- +id: 61fd9126aa72a474301fc49f +title: Passo 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Dentro do elemento `tbody`, adicione quatro elementos `tr`. Dê aos três primeiros um atributo `class` definido como `data` e ao quarto um atributo `class` definido como `total`. + +# --hints-- + +O elemento `tbody` deve ter quatro elementos `tr`. + +```js +const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; +assert(children?.length === 4); +children.forEach(child => assert(child?.localName === 'tr')); +``` + +Os primeiros três elementos `tr` devem ter o atributo `class` definido como `data`. + +```js +const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; +children.forEach((child, index) => { + if (index < 3) { + assert(child?.classList?.contains('data')); + } +}); +``` + +O quarto elemento `tr` deve ter o atributo `class` definido como `total`. + +```js +const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children]; +assert(children?.[3]?.classList?.contains('total')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+--fcc-editable-region-- + + + + + + + + + + + + +
Liabilities
201920202021
+--fcc-editable-region-- + +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md new file mode 100644 index 00000000000..4eac2047861 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md @@ -0,0 +1,177 @@ +--- +id: 61fd986ddbcbd47ba8fbc5ec +title: Passo 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Dentro do terceiro `tr`, adicione um elemento `th` com o texto `Credit The outstanding balance on our credit card.`. Envolva esse texto, exceto `Credit`, em um elemento `span` com a `class` definida como `description`. + +Adicione três elementos `td` abaixo disso e insira neles os seguintes textos, respectivamente: `$50`, `$50` e `$75`. No terceiro elemento `td`, adicione uma `class` com o valor `current`. + +# --hints-- + +O terceiro `tr` deve ter um elemento `th`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')); +``` + +O elemento `th` deve ter o texto `Credit The outstanding balance on our credit card.`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.'); +``` + +Você deve envolver o texto `The outstanding balance on our credit card.` dentro de um elemento `span`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.'); +``` + +O elemento `span` deve ter o atributo `class` com o valor `description`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$50`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50'); +``` + +O segundo elemento `td` deve ter o texto `$50`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50'); +``` + +O terceiro elemento `td` deve ter o texto `$75`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75'); +``` + +O terceiro elemento `td` deve ter o atributo `class` com o valor `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md new file mode 100644 index 00000000000..6f2a8d8882d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md @@ -0,0 +1,181 @@ +--- +id: 61fd990577d8227dd93fbeeb +title: Passo 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +No quarto elemento `tr`, adicione um elemento `th` com o texto `Total Liabilities`. Envolva o texto `Liabilities` em um elemento `span` com o atributo `class` definido como `sr-only`. + +Depois disso, adicione três elementos `td` com o seguinte texto (em ordem): `$750`, `$600`, `$475`. Dê ao terceiro elemento `td` a `class` com o valor de `current`. + +# --hints-- + +O quarto `tr` deve ter um elemento `th`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); +``` + +O elemento `th` deve conter o texto `Total Liabilities`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities'); +``` + +Você deve colocar o texto `Liabilities` dentro de um elemento `span`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities'); +``` + +O elemento `span` deve ter o atributo `class` com o valor `sr-only`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$750`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750'); +``` + +O segundo elemento `td` deve ter o texto `$600`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600'); +``` + +O terceiro elemento `td` deve ter o texto `$475`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475'); +``` + +O terceiro elemento `td` deve ter o atributo `class` com o valor `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + + + + + + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md new file mode 100644 index 00000000000..3125080ad35 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md @@ -0,0 +1,165 @@ +--- +id: 61fd9a4ff2fc4481b9157bd7 +title: Passo 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Para a terceira tabela, adicione uma `caption` com o texto `Net Worth` e defina um cabeçalho e um corpo de tabela. + +# --hints-- + +O terceiro elemento `table` deve ter um elemento `caption`. + +```js +assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption'); +``` + +O elemento `caption` dever ter o texto `Net Worth`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth'); +``` + +O terceiro elemento `table` deve ter um elemento `thead`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')); +``` + +O terceiro elemento `table` deve ter um elemento `tbody`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')); +``` + +O elemento `thead` deve estar imediatamente abaixo do elemento `caption`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead'); +``` + +O elemento `tbody` deve estar imediatamente abaixo do elemento `thead`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+--fcc-editable-region-- + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md new file mode 100644 index 00000000000..0a8f15cd590 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md @@ -0,0 +1,198 @@ +--- +id: 61fd9ad665a4a282c8106be3 +title: Passo 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Dentro do `thead`, crie um elemento `tr`. Dentro dele, adicione um `td` e três elementos `th`. Dentro de cada um dos elementos `th`, adicione um elemento `span` com a `class` definida como `sr-only` e os seguintes textos, em ordem: `2019`, `2020` e `2021`. + +# --hints-- + +O elemento `thead` deve ter um elemento `tr`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr'); +``` + +O elemento `tr` deve ter um elemento `td` como primeiro filho. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td'); +``` + +O elemento `tr` deve ter três elementos `th` depois do elemento `td`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th'); +assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th'); +``` + +Cada um dos elementos `th` deve ter um elemento `span`. + +```js +const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.length === 1); + assert(th?.children?.[0]?.localName === 'span'); +}); +``` + +Cada um dos novos elementos `span` deve ter o atributo `class` com o valor `sr-only`. + +```js +const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')]; +ths?.forEach(th => { + assert(th?.children?.[0]?.classList?.contains('sr-only')); +}); +``` + +O primeiro elemento `span` deve ter o texto `2019`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019'); +``` + +O segundo elemento `span` deve ter o texto `2020`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020'); +``` + +O terceiro elemento `span` deve ter o texto `2021`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021'); +``` + +O elemento `td` deve estar vazio. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === ''); +assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+--fcc-editable-region-- + + + + + + +
Net Worth
+--fcc-editable-region-- +
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md new file mode 100644 index 00000000000..79979d1bf00 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md @@ -0,0 +1,208 @@ +--- +id: 61fd9b7285bde783ad5b8aac +title: Passo 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Dentro de `tbody`, adicione uma `tr` com a `class` `total`. Nela, adicione um `th` com o texto `Total Net Worth` e envolva `Net Worth` em um `span` com a `class` definida como `sr-only`. + +Em seguida, adicione três elementos `td`, dando ao terceiro uma `class` definida como `current` e dando a cada uma o texto a seguir: `$-171`, `$136` e `$334`. + +# --hints-- + +O elemento `tbody` deve ter um elemento `tr`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1); +``` + +O elemento `tr` deve ter a `class` definida como `total`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total')); +``` + +O `tr` deve ter um elemento `th`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); +``` + +O elemento `th` deve conter o texto `Total Net Worth`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth'); +``` + +Você deve envolver o texto `Net Worth` dentro de um elemento `span`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth'); +``` + +O elemento `span` deve ter o atributo `class` com o valor `sr-only`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$-171`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171'); +``` + +O segundo elemento `td` deve ter o texto `$136`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136'); +``` + +O terceiro elemento `td` deve ter o texto `$334`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334'); +``` + +O terceiro elemento `td` deve ter a `class` definida como `current`. + +```js +assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+--fcc-editable-region-- + + + + + + + + + + + + +
Net Worth
201920202021
+--fcc-editable-region-- +
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md new file mode 100644 index 00000000000..51be3657153 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md @@ -0,0 +1,158 @@ +--- +id: 61fd9d9fbdfe078800317055 +title: Passo 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Hora de estilizar a sua tabela. Comece redefinindo o modelo de caixa. Crie um seletor `html` e dê a ele uma propriedade `box-sizing` definida como `border-box`. + +# --hints-- + +Você deve ter um seletor `html`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +O seletor `html` deve ter a propriedade `box-sizing` definida como `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md new file mode 100644 index 00000000000..8561337af67 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md @@ -0,0 +1,168 @@ +--- +id: 61fda307bde0b091cf7d884a +title: Passo 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Crie um seletor `body` e dê a ele a propriedade `font-family` definida como `sans-serif` e a propriedade `color` definida como `#0a0a23`. + +# --hints-- + +Você deve ter um seletor `body`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +O seletor `body` deve ter a propriedade `font-family` com o valor `sans-serif`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif'); +``` + +O seletor `body` deve ter a propriedade `color` definida como `#0a0a23`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md new file mode 100644 index 00000000000..c30fb7f155f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md @@ -0,0 +1,171 @@ +--- +id: 61fda339eadcfd92a6812bed +title: Passo 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Antes de irmos muito mais longe na estilização, devemos usar a classe `sr-only`. Você pode usar o CSS para tornar os elementos dessa classe completamente ocultos na página visual, mas ainda podendo ser anunciados pelos leitores de tela. + +O CSS que você está prestes a escrever é um conjunto comum de propriedades usadas para garantir que os elementos estejam completamente ocultos visualmente. + +O seletor `span[class~="sr-only"]` selecionará qualquer elemento `span` cujo atributo `class` *inclua* `sr-only`. Crie esse seletor e dê a ele uma propriedade `border` definida como `0`. + +# --hints-- + +Você deve ter um seletor `span[class~="sr-only"]`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `border` definida como `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md new file mode 100644 index 00000000000..c7a97b241c0 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md @@ -0,0 +1,178 @@ +--- +id: 61fdac1e31692f9a9ad97295 +title: Passo 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +A propriedade `clip` do CSS é usada para definir porções visíveis de um elemento. Defina o seletor `span[class~="sr-only"]` para que tenha uma propriedade `clip` de `rect(1px, 1px, 1px, 1px)`. + +A propriedade `clip-path` determina a forma que a propriedade `clip` receberá. Use os seletores `clip-path` e `-webkit-clip-path` para definir o valor como `inset(50%)`, deixando o clip-path na forma de um retângulo dentro do elemento. + +# --hints-- + +O seletor `span[class~="sr-only"]` deve ter uma propriedade `clip` definida como `rect(1px, 1px, 1px, 1px)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)'); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `clip-path` definida como `inset(50%)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)'); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `-webkit-clip-path` definida como `inset(50%)`. + +```js +assert(/-webkit-clip-path\s*:\s*inset\(\s*50%\s*\)\s*(;|})/.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md new file mode 100644 index 00000000000..39bfd3e11f1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md @@ -0,0 +1,173 @@ +--- +id: 61fdaea3999cb19d76ce717b +title: Passo 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Agora, você precisa reduzir esses elementos. Dê ao seletor `span[class~="sr-only"]` as propriedades `width` e `height` definidas como `1px`. + +# --hints-- + +O seletor `span[class~="sr-only"]` deve ter a propriedade `width` definida como `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px'); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `height` definida como `1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md new file mode 100644 index 00000000000..0786830cad3 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md @@ -0,0 +1,175 @@ +--- +id: 61fdaf9ff894b6a084ecdc1b +title: Passo 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Para evitar que o conteúdo do texto exceda os limites, dê ao seletor `span[class~="sr-only"]` uma propriedade `overflow` definida como `hidden` e uma propriedade `white-space` definida como `nowrap`. + +# --hints-- + +O seletor `span[class~="sr-only"]` deve ter a propriedade `overflow` definida como `hidden`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden'); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `white-space` definida como `nowrap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md new file mode 100644 index 00000000000..e43f0a511e1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md @@ -0,0 +1,183 @@ +--- +id: 61fdafe6f07fd7a1c6785bc2 +title: Passo 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Por último, é necessário retirar estes elementos ocultos do fluxo do documento. Dê ao seletor `span[class~="sr-only"]` a propriedade `position` definida como `absolute`, a propiedade `padding` definida como `0` e a propriedade `margin` definida como `-1px`. Isso garantirá que não somente eles deixaram de ser visíveis, como também não estarão sequer na exibição de página. + +# --hints-- + +O seletor `span[class~="sr-only"]` deve ter a propriedade `position` definida como `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute'); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `padding` definida como `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px'); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `margin` definida como `-1px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + overflow: hidden; + white-space: nowrap; + +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md new file mode 100644 index 00000000000..a84e18ba04e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md @@ -0,0 +1,193 @@ +--- +id: 61fdb04d9939f0a26ca51c2b +title: Passo 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Hora de estilizar o cabeçalho da tabela. Crie um seletor `h1`. Dê a ele uma propriedade `max-width` definida como `37.25rem`, uma propriedade `margin` definida como `0 auto` e uma propriedade `padding` definida como `1.5rem 1.25rem`. + +# --hints-- + +Você deve ter um seletor `h1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +O seletor `h1` deve ter a propriedade `max-width` definida como `37.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem'); +``` + +O seletor `h1` deve ter uma propriedade `margin` definida como `0 auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto'); +``` + +O seletor `h1` deve ter a propriedade `padding` definida como `1.5rem 1.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md new file mode 100644 index 00000000000..cc843245194 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md @@ -0,0 +1,199 @@ +--- +id: 620159cd5431aa34bc6a4c9c +title: Passo 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Selecione o contêiner flex com um seletor `h1 .flex`. Dê a ele uma propriedade `display` definida como `flex` para ativar o layout do flexbox. Então, defina a propriedade `flex-direction` como `column-reverse` - isso exibirá os elementos aninhados da parte inferior para a superior. Por fim, defina a propriedade `gap` como `1rem` para fornecer mais espaçamento entre os elementos. + +# --hints-- + +Você deve ter um seletor `h1 .flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')); +``` + +O seletor `h1 .flex` deve ter a propriedade `display` definida como `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex'); +``` + +O seletor `h1 .flex` deve ter a propriedade `flex-direction` definida como `column-reverse`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse'); +``` + +O seletor `h1 .flex` deve ter a propriedade `gap` definida como `1rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md new file mode 100644 index 00000000000..2d286890bf8 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md @@ -0,0 +1,195 @@ +--- +id: 62015a5da1c95c358f079ebb +title: Passo 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +O pseudosseletor `:first-of-type` é utilizado para focar no primeiro elemento que corresponde ao seletor. Crie um seletor `h1 .flex span:first-of-type` para escolher o primeiro elemento `span` no contêiner `.flex`. Lembre-se de que os elementos `span` estão invertidos visualmente, então esse parecerá ser o segundo elemento na página. + +Dê ao novo seletor uma propriedade `font-size` de `0.7em` para que ele pareça com um subtítulo. + +# --hints-- + +Você deve ter um seletor `h1 .flex span:first-of-type`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')); +``` + +O seletor `h1 .flex span:first-of-type` deve ter a propriedade `font-size` definida como `0.7em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md new file mode 100644 index 00000000000..0074cbcfcdf --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md @@ -0,0 +1,197 @@ +--- +id: 62015cd2654a1139321a89d2 +title: Passo 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +O pseudosseletor `:last-of-type` é utilizado para focar exatamente o oposto: o último elemento que corresponde ao seletor. Crie um seletor `h1 .flex span:last-of-type` para focar no último `span` em seu contêiner flex e dê a ele uma propriedade `font-size` definida como `1.2em` para que se pareça com um cabeçalho. + +# --hints-- + +Você deve ter um seletor `h1 .flex span:last-of-type`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')); +``` + +O seletor `h1 .flex span:last-of-type` deve ter a propriedade `font-size` definida como `1.2em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md new file mode 100644 index 00000000000..a3b5f687699 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md @@ -0,0 +1,213 @@ +--- +id: 62015d8942384c3aed48329e +title: Passo 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Você envolveu a tabela em um elemento de seção - agora você pode estilizá-la para dar a ela uma borda. Crie um seletor `section` e dê a ele uma propriedade `max-width` definida como `40rem` para deixar o design responsivo. Defina a propriedade `margin` como `0 auto` para centralizá-la e defina a propriedade `border` como `2px solid #d0d0d5`. + +# --hints-- + +Você deve ter um seletor `section`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')); +``` + +O seletor `section` deve ter a propriedade `max-width` definida como `40rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem'); +``` + +O seletor `section` deve ter a propriedade `margin` definida como `0 auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto'); +``` + +O seletor `section` deve ter a propriedade `border` definida para `2px solid #d0d0d5`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md new file mode 100644 index 00000000000..5b80c9bb5bd --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md @@ -0,0 +1,225 @@ +--- +id: 620167374bb8b4455cd11125 +title: Passo 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +A última parte da tabela são os anos. Crie um seletor `#years` e ative o flexbox. Justifique o conteúdo para o final da direção do flex e faça com que o elemento permaneça no lugar. Prenda o elemento na parte superior do contêiner com `top: 0`. + +# --hints-- + +Você deve ter um seletor `#years`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')); +``` + +O seletor `#years` deve ter a propriedade `display` definida como `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex'); +``` + +O seletor `#years` deve ter uma propriedade `justify-content` definida para `flex-end`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end'); +``` + +O seletor `#years` deve ter a propriedade `position` definida como `sticky`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky'); +``` + +O seletor `#years` deve ter a propriedade `top` definida como `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md new file mode 100644 index 00000000000..3d13b2c6498 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md @@ -0,0 +1,213 @@ +--- +id: 620174ed519dd7506c1a4b61 +title: Passo 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Agora, aplique uma cor a `#years`. Dê ao texto a cor `#fff` e o fundo `#0a0a23`. + +# --hints-- + +O seletor `#years` deve ter a propriedade `color` definida com o valor de `#fff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)'); +``` + +O seletor `#years` deve ter a propriedade `background-color` definida como `#0a0a23`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +--fcc-editable-region-- +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md new file mode 100644 index 00000000000..ae923ebc3ac --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md @@ -0,0 +1,230 @@ +--- +id: 620175b3710a0951cfa86edf +title: Passo 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +A função `calc()` é uma função do CSS que permite calcular um valor baseado em outros valores. Por exemplo, você pode usá-la para calcular a largura da viewport menos a margem de um elemento: + +```css +.example { + margin: 10px; + width: calc(100% - 20px); +} +``` + +Certifique-se de que os anos não fiquem escondidos definindo um `z-index` de `999`. Então, dê ao elemento uma `margin` de `0 -2px` e um `padding` definido como `0.5rem calc(1.25rem + 2px) 0.5rem 0`. + +# --hints-- + +O seletor `#years` deve ter a propriedade `z-index` definida como `999`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999'); +``` + +O seletor `#years` deve ter uma propriedade `margin` definida como `0 -2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px'); +``` + +O seletor `#years` deve ter a propriedade `padding` definida como `0.5rem calc(1.25rem + 2px) 0.5rem 0`. + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding'); +assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +--fcc-editable-region-- +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md new file mode 100644 index 00000000000..623d078c303 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md @@ -0,0 +1,233 @@ +--- +id: 6201782cc420715562f36271 +title: Passo 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Estilize o texto dentro do elemento `#years` criando um seletor `#years span[class]`. A sintaxe `span[class]` terá como destino qualquer elemento `span` que tenha um atributo `class` definido, independentemente do valor do atributo. + +Dê ao novo seletor uma fonte `bold`, uma largura de `4.5rem` e texto alinhado à direita. + +# --hints-- + +Você deve ter um seletor `#years span[class]`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')); +``` + +O seletor `#years span[class]` deve ter a propriedade `font-weight` definida como `bold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold'); +``` + +O seletor `#years span[class]` deve ter a propriedade `width` definida como `4.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem'); +``` + +O seletor `#years span[class]` deve ter a propriedade `text-align` definida como `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md new file mode 100644 index 00000000000..a5fb1fb7dee --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md @@ -0,0 +1,225 @@ +--- +id: 620179bc0a6a2358c72b90ad +title: Passo 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Você envolveu as suas tabelas em um contêiner com a classe `table-wrap`. Crie um seletor para aquela classe e dê a ela um `padding` definido como `0 0.75rem 1.5rem 0.75rem`. + +# --hints-- + +Você deve ter um seletor `.table-wrap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')); +``` + +O seletor `.table-wrap` deve ter a propriedade `padding` definida como `0 0.75rem 1.5rem 0.75rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md new file mode 100644 index 00000000000..f3e612bc917 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md @@ -0,0 +1,231 @@ +--- +id: 62017b6f47454059bf2d3bd1 +title: Passo 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Antes de começar a entrar em detalhes na tabela, os elementos `span` estão atualmente em negrito. Crie um seletor `span:not(.sr-only)` e dê a ele uma propriedade `font-weight` definida como `normal`. + +O pseudosseletor `:not()` é usado para direcionar todos os elementos que não coincidem com o seletor - neste caso, qualquer dos elementos `span` que não possua a classe `span[class~="sr-only"]`. Isso garante que as regras anteriores para a classe `sr-only` não sejam substituídas. + +# --hints-- + +Você deve ter um seletor `span:not(.sr-only)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')); +``` + +O seletor `span:not(.sr-only)` deve ter uma propriedade `font-weight` definida como `normal`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md new file mode 100644 index 00000000000..3a78c125c11 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md @@ -0,0 +1,299 @@ +--- +id: 62017f47c87be96457c49f46 +title: Passo 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Ao invés de ter que verificar constantemente se você não está substituindo as propriedades anteriores, você pode usar a palavra-chave `!important` para garantir que essas propriedades sejam sempre aplicadas, independentemente da ordem ou da especificidade. + +Dê a cada propriedade do seletor `span[class~="sr-only"]` uma palavra-chave `!important`. Não altere nenhum dos valores. + +# --hints-- + +O seletor `span[class~="sr-only"]` deve ter a propriedade `border` definida como `0 !important`. + +```js +// log it +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `clip` definida como `rect(1px, 1px, 1px, 1px) !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `clip-path` definida como `inset(50%) !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('clip-path: inset(50%) !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `-webkit-clip-path` definida como `inset(50%) !important`. + +```js +// this one gets removed apparently +assert(code.includes('-webkit-clip-path: inset(50%) !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `height` definida como `1px !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('height: 1px !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `width` definida como `1px !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('width: 1px !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `position` definida como `absolute !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('position: absolute !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `overflow` definida como `hidden !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('overflow: hidden !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `white-space` definida como `nowrap !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('white-space: nowrap !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `padding` definida como `0 !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('padding: 0px !important;')); +``` + +O seletor `span[class~="sr-only"]` deve ter a propriedade `margin` definida como `-1px !important`. + +```js +const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText; +assert(text.includes('margin: -1px !important;')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} +--fcc-editable-region-- + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span:not(.sr-only) { + font-weight: normal; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md new file mode 100644 index 00000000000..3436d249143 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md @@ -0,0 +1,237 @@ +--- +id: 62017fa5bbef406580ceb44f +title: Passo 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Agora que você adicionou a palavra-chave `!important`, você pode remover o `:not(.sr-only)` do seletor `span`. + +# --hints-- + +Você não deve ter um seletor `span:not(.sr-only)`. + +```js +assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'))); +``` + +Você deve ter um seletor `span`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span')); +``` + +Você não deve alterar o `font-weight`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +--fcc-editable-region-- +span:not(.sr-only) { + font-weight: normal; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md new file mode 100644 index 00000000000..0cbe3efbe77 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md @@ -0,0 +1,239 @@ +--- +id: 62018243f046a368fab8ffb6 +title: Passo 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Crie um seletor `table` para utilizar com as tabelas. Defina a propriedade `border-collapse` como `collapse`, o que permitirá que as bordas das células se recolham em uma única borda, em vez de uma borda em torno de cada célula. Defina também a propriedade `border` como `0` para ocultar as bordas. + +# --hints-- + +Você deve ter um seletor `table`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')); +``` + +O seletor `table` deve ter a propriedade `border-collapse` definida como `collapse`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse'); +``` + +O seletor `table` deve ter a propriedade `border` definida como `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md new file mode 100644 index 00000000000..a9310055e85 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md @@ -0,0 +1,243 @@ +--- +id: 6201830cb0c74b69f1b41635 +title: Passo 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Certifique-se de que sua tabela preencha o contêiner com uma propriedade `width` definida como `100%`, então posicione-a relativamente e dê a ela uma margem superior de `3rem`. + +# --hints-- + +O seletor `table` deve ter a propriedade `width` definida para `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%'); +``` + +O seletor `table` deve ter uma propriedade `position` definida como `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative'); +``` + +O seletor `table` deve ter uma propriedade `margin-top` definida como `3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +--fcc-editable-region-- +table { + border-collapse: collapse; + border: 0; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md new file mode 100644 index 00000000000..d06bea1182d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md @@ -0,0 +1,253 @@ +--- +id: 620186f4b6b8356d2def576b +title: Passo 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Em seguida, você precisa estilizar os elementos `caption` para que se pareçam mais com cabeçalhos. Criar um seletor `table caption`. Defina o texto para que tenha uma cor `#356eaf`, um tamanho de `1.3em` e um peso normal. + +# --hints-- + +Você deve ter um seletor `table caption`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')); +``` + +O seletor `table caption` deve ter a propriedade `color` definida como `#356eaf`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)'); +``` + +O seletor `table caption` deve ter a propriedade `font-size` definida como `1.3em`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em'); +``` + +O seletor `table caption` deve ter a propriedade `font-weight` definida como `normal`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md new file mode 100644 index 00000000000..2ab5778d59e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md @@ -0,0 +1,252 @@ +--- +id: 62018ba1aa263770c953be66 +title: Passo 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Agora, dê às legendas uma posição absoluta e desloque-as `-2.25rem` da parte superior e `0.5rem` da esquerda. + +# --hints-- + +O seletor `table caption` deve ter a propriedade `position` definida como `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute'); +``` + +O seletor `table caption` deve ter a propriedade `top` definida como `-2.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem'); +``` + +O seletor `table caption` deve ter a propriedade `left` definida como `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +--fcc-editable-region-- +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md new file mode 100644 index 00000000000..b84d30d75d2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md @@ -0,0 +1,262 @@ +--- +id: 62018c3e94434a71af1d5eaa +title: Passo 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Crie um seletor com foco nos elementos `td` dentro do corpo da tabela. Dê a eles uma largura para preencher a viewport, com um mínimo e máximo de `4rem`. Essa abordagem garante que a largura seja fixa, enquanto configurar `width` permitiria especificamente aos elementos encolherem de acordo com o contêiner (porque estamos usando flexbox). + +# --hints-- + +Você deve ter um seletor `tbody td`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')); +``` + +O seletor `tbody td` deve ter a propriedade `width` definida como `100vw`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw'); +``` + +O seletor `tbody td` deve ter a propriedade `min-width` definida como `4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem'); +``` + +O seletor `tbody td` deve ter a propriedade `max-width` definida como `4rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md new file mode 100644 index 00000000000..c3a27b099ab --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md @@ -0,0 +1,256 @@ +--- +id: 62018ec29b3ae674f40bef31 +title: Passo 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Agora, coloque em foco os elementos `th` dentro do corpo da tabela e dê a eles a largura do contêiner inteiro menos `12rem`. + +# --hints-- + +Você deve ter um seletor `tbody th`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody th')); +``` + +O seletor `tbody th` deve ter a propriedade `width` definida como `calc(100% - 12rem)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md new file mode 100644 index 00000000000..95ac591da94 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md @@ -0,0 +1,266 @@ +--- +id: 62019093fe30e278e797d2f6 +title: Passo 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +O seletor `[attribute="value"]` visa qualquer elemento que tenha um atributo com um valor específico. Crie um seletor `tr[class="total"]` para focar especificamente nos elementos `tr` com a classe `total`. Dê a ele uma borda inferior de `4px double #0a0a23` e deixe a fonte em negrito. + +# --hints-- + +Você deve ter um seletor `tr[class="total"]`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')); +``` + +O seletor `tr[class="total"]` deve ter a propriedade `border-bottom` definida como `4px double #0a0a23`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)'); +``` + +O seletor `tr[class="total"]` deve ter a propriedade `font-weight` definida como `bold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md new file mode 100644 index 00000000000..ee944578d90 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md @@ -0,0 +1,278 @@ +--- +id: 620192a767533a7ad19d96d7 +title: Passo 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +A diferença principal entre `tr[class="total"]` e `tr.total` é que o primeiro selecionará os elementos `tr` onde a classe for *apenas* `total`. O segundo selecionará os elementos `tr` em que a(s) class(es) *incluam* total. + +Nesse caso, `tr.total` servirá. Você pode usar esse seletor com foco nos elementos `td` dentro das linhas `.total`. Alinha o texto à esquerda e dê a eles um preenchimento (padding) de `0 0.25rem`. + +# --hints-- + +Você deve ter um seletor `tr.total td`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td')); +``` + +O seletor `tr.total td` deve ter a propriedade `text-align` definida como `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right'); +``` + +O seletor `tr.total td` deve ter a propriedade `padding` definida como `0 0.25rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md new file mode 100644 index 00000000000..6fb0557b59c --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md @@ -0,0 +1,275 @@ +--- +id: 6201995d9ab88e80f1989dce +title: Passo 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +O pseudosseletor `:nth-of-type()` é usado para focar em elementos específicos com base em sua ordem entre irmãos do mesmo tipo. Use esse pseudosseletor com foco no terceiro elemento `td` dentro das linhas da tabela `total`. Dê a ele um preenchimento (padding) de `0.5rem`. + +# --hints-- + +Você deve ter um seletor `tr.total td:nth-of-type(3)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')); +``` + +O seletor `tr.total td:nth-of-type(3)` deve ter a propriedade `padding-right` definida como `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md new file mode 100644 index 00000000000..7c4fffea32c --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md @@ -0,0 +1,279 @@ +--- +id: 620199c7a7a32c81d4db3410 +title: Passo 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Dê aos elementos `tr.total` um efeito ao passar o mouse sobre eles que altera o fundo para `#99c9ff`. + +# --hints-- + +Você deve ter um seletor `tr.total:hover`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')); +``` + +O seletor `tr.total:hover` deve ter a propriedade `background-color` definida como `#99c9ff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md new file mode 100644 index 00000000000..dfad59adbc1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md @@ -0,0 +1,285 @@ +--- +id: 6201a1a7af32c287bd6b8183 +title: Passo 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Selecione os elementos `td` com o valor de `class` `current` e deixe a fonte em itálico. + +# --hints-- + +Você deve ter um seletor `td.current`. + +```js +const def = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert(def('td.current') || def('td[class="current"]')); +``` + +O seletor `td.current` deve ter a propriedade `font-style` definida como `italic`. + +```js +const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style'); +assert((font('td.current') || font('td[class="current"]')) === 'italic'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md new file mode 100644 index 00000000000..5f687f729a2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md @@ -0,0 +1,289 @@ +--- +id: 6201a1cc668a34888f5b2f52 +title: Passo 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Selecione os elementos `tr` com a `class` definida como `data`. Dê a eles uma imagem de fundo de `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`. + +# --hints-- + +Você deve ter um seletor `tr.data`. + +```js +const def = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert(def('tr.data') || def('tr[class="data"]')); +``` + +O seletor `tr.data` deve ter a propriedade `background-image` definida como `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`. + +```js +const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image'); +assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md new file mode 100644 index 00000000000..6596404a86e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md @@ -0,0 +1,303 @@ +--- +id: 6201a20d742f5c89736c8cfb +title: Passo 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Selecione os elementos `th` dentro dos elementos `tr.data`. Alinhe o texto à esquerda e dê a eles um preenchimento (padding) superior de `0.3rem` e um preenchimento à esquerda de `0.5rem`. + +# --hints-- + +Você deve ter um seletor `tr.data th`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')); +``` + +O seletor `tr.data th` deve ter a propriedade `text-align` definida como `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left'); +``` + +O seletor `tr.data th` deve ter a propriedade `padding-top` definida como `0.3rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem'); +``` + +O seletor `tr.data th` deve ter a propriedade `padding-left` definida como `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md new file mode 100644 index 00000000000..9e982d5f111 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md @@ -0,0 +1,321 @@ +--- +id: 6201a42e39bf3b95b6a33bf3 +title: Passo 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Crie um seletor `tr.data th .description` para focar nos elementos com a `class` definida como `description` que estão dentro dos elementos `th` nas linhas da tabela `.data`. Dê a eles uma exibição de bloco, deixe o texto em itálico com um peso normal e posicione-os com um `padding` definido como `1rem 0 0.75rem` e uma margem direita de `-13.5rem`. + +# --hints-- + +Você deve ter um seletor `tr.data th .description`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')); +``` + +O seletor `tr.data th .description` deve ter a propriedade `display` definida como `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block'); +``` + +O seletor `tr.data th .description` deve ter a propriedade `font-style` definida como `italic`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic'); +``` + +O seletor `tr.data th .description` deve ter a propriedade `font-weight` definida como `normal`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal'); +``` + +O seletor `tr.data th .description` deve ter a propriedade `padding` definida como `1rem 0 0.75rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem'); +``` + +O seletor `tr.data th .description` deve ter a propriedade `margin-right` definida como `-13.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md new file mode 100644 index 00000000000..9c7a911a2f6 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md @@ -0,0 +1,297 @@ +--- +id: 6201a4adcc6414968b391592 +title: Passo 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Os elementos `span` agora têm estilos mais específicos, o que significa que você pode remover a regra para `span`. + +# --hints-- + +Você não deve ter um seletor `span`. + +```js +assert(!(new __helpers.CSSHelp(document).getStyle('span'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +--fcc-editable-region-- +span { + font-weight: normal; +} +--fcc-editable-region-- + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md new file mode 100644 index 00000000000..da2885c49b3 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md @@ -0,0 +1,313 @@ +--- +id: 6201a5258af7b398b030bfaf +title: Passo 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Os valores em dólar estão desalinhados no momento. Crie um seletor com foco nos elementos `td` dentro dos elementos `tr.data`. Alinhe verticalmente o texto na parte superior, alinhe o texto horizontalmente à direita e defina o preenchimento (padding) como `0.3rem 0.25rem 0`. + +# --hints-- + +Você deve ter um seletor `tr.data td`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')); +``` + +O seletor `tr.data td` deve definir a propriedade `vertical-align` como `top`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top'); +``` + +O seletor `tr.data td` deve ter a propriedade `text-align` definida como `right`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right'); +``` + +O seletor `tr.data td` deve ter a propriedade `padding` definida como `0.3rem 0.25rem 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md new file mode 100644 index 00000000000..82d389210a5 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md @@ -0,0 +1,591 @@ +--- +id: 6201a59be346d399c21d10b1 +title: Passo 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Crie outro seletor para os elementos `td` dentro do elemento `tr.data`, mas selecione especificamente o último. Dê a ele um preenchimento (padding) à direita de `0.5rem`. + +Com isso, o balanço patrimonial está completo! + +# --hints-- + +Você deve ter um seletor `tr.data td:last-of-type`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')); +``` + +O seletor `tr.data td:last-of-type` deve ter a propriedade `padding-right` definida como `0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} + +tr.data td { + vertical-align: top; + padding: 0.3rem 0.25rem 0; + text-align: right; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +tr[class="total"] th { + text-align: left; + padding: 0.5rem 0 0.25rem 0.5rem; +} + +tr.total td { + text-align: right; + padding: 0 0.25rem; +} + +tr.total td:nth-of-type(3) { + padding-right: 0.5rem; +} + +tr.total:hover { + background-color: #99c9ff; +} + +td.current { + font-style: italic; +} + +tr.data { + background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem); +} + +tr.data th { + text-align: left; + padding-top: 0.3rem; + padding-left: 0.5rem; +} + +tr.data th .description { + display: block; + font-weight: normal; + font-style: italic; + padding: 1rem 0 0.75rem; + margin-right: -13.5rem; +} + +tr.data td { + vertical-align: top; + padding: 0.3rem 0.25rem 0; + text-align: right; +} + +tr.data td:last-of-type { + padding-right: 0.5rem; +} +``` + diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md index caf1b687059..8112f448889 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md @@ -10,9 +10,9 @@ dashedName: build-a-caesars-cipher Uma das cifras mais simples e mais conhecidas é a cifra de César, também conhecida como uma cifra de mudança. 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. diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md index 5fa7cd310dc..a0a0f280ab2 100644 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md @@ -10,7 +10,23 @@ dashedName: build-a-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-- diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index cbcfa558d39..3523aab691a 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -29,21 +29,7 @@ const ourMusic = [ ]; ``` -Це масив, який містить один об'єкт всередині. Об'єкт має різні частини metadata про альбом. Він також має вкладений масив `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 -} -``` +Це масив, який містить один об'єкт всередині. Об'єкт має різні частини metadata про альбом. Він також має вкладений масив `formats`. Якщо ви хочете додати більше записів в альбом, це можна зробити, додавши записи до масиву верхнього рівня. Об'єкти зберігають дані у властивості, яка має формат ключ-значення. У прикладі вище, `"artist": "Daft Punk"` - це властивість, що має ключ `artist` і значення `Daft Punk`. **Примітка:** Вам потрібно буде розмістити кому після кожного об'єкта в масиві, якщо він не є останнім його об'єктом.