CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+--fcc-editable-region--
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md
new file mode 100644
index 00000000000..fd689449586
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md
@@ -0,0 +1,85 @@
+---
+id: 6140d10d50636e14695013b2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Crea un selettore per selezionare il tuo secondo elemento `.line`. Imposta la proprietà `transform` a `rotate(60deg)`.
+
+Ricorda che la proprietà `transform` ti permette di manipolare la forma di un elemento. In questo caso, utilizzando il valore `rotate(60deg)` ruoterà l'elemento attorno al suo punto `transform-origin` di 60 gradi in senso orario.
+
+# --hints--
+
+Dovresti creare un selettore `.line:nth-of-type(2)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
+```
+
+Il selettore `.line:nth-of-type(2)` dovrebbe avere una proprietà `transform` con valore di `rotate(60deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md
new file mode 100644
index 00000000000..c56f831c954
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md
@@ -0,0 +1,111 @@
+---
+id: 6140d263016325162fd076fe
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Crea un selettore `.cabin`. Imposta il `background-color` a `red`, `width` a `20%` e `height` a `20%`.
+
+# --hints--
+
+Dovresti avere un selettore `.cabin`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin'));
+```
+
+Il selettore `.cabin` dovrebbe avere una proprietà `background-color` impostata su `red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red');
+```
+
+Il selettore `.cabin` dovrebbe avere una proprietà `width` impostata a `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%');
+```
+
+Il selettore `.cabin` dovrebbe avere una proprietà `height` impostata a `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md
new file mode 100644
index 00000000000..1e5d27b83a3
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md
@@ -0,0 +1,100 @@
+---
+id: 6140d36b8b747718b50d4b7a
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Dai al selettore `.cabin` una proprietà `transform-origin` di `50% 0%`. Questo farà si che il punto di origine sia spostato di `50%` da sinistra e `0%` dall'alto, posizionandolo al centro del bordo superiore dell'elemento.
+
+# --hints--
+
+Il tuo selettore `.cabin` dovrebbe avere una proprietà `transform-origin` impostata su `50% 0%`.
+
+```js
+const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin;
+assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md
new file mode 100644
index 00000000000..16885c88755
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md
@@ -0,0 +1,137 @@
+---
+id: 6140d94b5fab7f1d73c9bedb
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+La regola `@keyframes` è usata per definire il flusso di un'animazione CSS. All'interno della regola `@keyframes`, puoi creare selettori per punti specifici nella sequenza di animazione, come `0%` o `25%`, oppure puoi usare `from` e `to` per definire l'inizio e la fine della sequenza.
+
+Le regole `@keyframes` richiedono che venga assegnato loro un nome, da utilizzare come referenza in altre regole. Ad esempio, la regola `@keyframes freeCodeCamp { }` è chiamata `freeCodeCamp`.
+
+È ora di iniziare ad animare. Crea una regola `@keyframes` chiamata `wheel`.
+
+# --hints--
+
+Dovresti avere una regola `@keyframes`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);
+```
+
+La tua nuova regola `@keyframes` dovrebbe avere un nome di `wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md
new file mode 100644
index 00000000000..1f76e80977f
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md
@@ -0,0 +1,139 @@
+---
+id: 6140dc5e13d0c81e7496f182
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Ora è necessario definire come l'animazione dovrebbe iniziare. Per fare questo, crea una regola `0%` all'interno della tua regola `@keyframes wheel`. Le proprietà impostate in questo selettore annidato si applicheranno all'inizio dell'animazione.
+
+Ad esempio, questa sarebbe una regola del `12%`:
+
+```css
+@keyframes freecodecamp {
+ 12% {
+ color: green;
+ }
+}
+```
+
+# --hints--
+
+La regola `@keyframes wheel` dovrebbe avere un selettore `0%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md
new file mode 100644
index 00000000000..9cd2fba8827
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md
@@ -0,0 +1,131 @@
+---
+id: 6140dd77e0bc5a1f70bd7466
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Dai alla regola `0%` una proprietà `transform` impostata su `rotate(0deg)`. Questo avvierà l'animazione senza rotazione.
+
+# --hints--
+
+Il tuo selettore `0%` dovrebbe avere una proprietà `transform` con valore di `rotate(0deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+ 0% {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md
new file mode 100644
index 00000000000..466605f44c3
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md
@@ -0,0 +1,146 @@
+---
+id: 6140de31b1f5b420410728ff
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Ora dai alla regola `@keyframes wheel` un selettore `100%`. All'interno di quello, imposta la proprietà `transform` a `rotate(360deg)`. Facendo questo, la vostra animazione ora completerà una rotazione completa.
+
+# --hints--
+
+La tua regola `@keyframes wheel` dovrebbe avere un selettore `100%`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules
+assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+```
+
+Il tuo selettore `100%` dovrebbe venire dopo il tuo selettore `0%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%')
+```
+
+Il tuo selettore `100%` dovrebbe avere una proprietà `transform` con valore di `rotate(360deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)')
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md
new file mode 100644
index 00000000000..6488f055d86
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md
@@ -0,0 +1,142 @@
+---
+id: 6140df547f09402144e40b92
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+La proprietà `animation-name` viene utilizzata per collegare una regola `@keyframes` a un selettore CSS. Il valore di questa proprietà dovrebbe corrispondere al nome della regola `@keyframes`. Dai al tuo selettore `.wheel` una proprietà `animation-name` impostata su `wheel`.
+
+La proprietà `animation-duration` viene utilizzata per impostare il tempo di durata dell'animazione per il completamento della sequenza. Il tempo deve essere specificato in secondi (`s`) o millisecondi (`ms`). Il selettore `.wheel` dovrebbe avere una proprietà `animation-duration` impostata a `10s`.
+
+# --hints--
+
+Il selettore `.wheel` dovrebbe avere una proprietà `animation-name` impostata a `wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel');
+```
+
+Il selettore `.wheel` dovrebbe avere una proprietà `animation-duration` impostata a `10s`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+}
+--fcc-editable-region--
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md
new file mode 100644
index 00000000000..ce0278d3bf3
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md
@@ -0,0 +1,144 @@
+---
+id: 6140e0d875ec16262f26432b
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+La proprietà `animation-iteration-count` imposta quante volte la tua animazione si dovrebbe ripetere. Questo può essere impostato su un numero, o su `infinite` per ripetere all'infinito l'animazione. La tua ruota panoramica non dovrebbe mai fermarsi, quindi imposta il selettore `.wheel` per avere un `animation-iteration-count` di `infinite`.
+
+La proprietà `animation-timing-function` imposta come l'animazione dovrebbe progredire nel tempo. Ci sono alcuni valori diversi per questa proprietà, ma vuoi che l'animazione della ruota panoramica prosegua alla stessa velocità dall'inizio alla fine. Imposta la `animation-timing-function` a `linear` nel selettore `.wheel`.
+
+# --hints--
+
+Il tuo selettore `.wheel` dovrebbe avere una proprietà `animation-iteration-count` impostata a `infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite');
+```
+
+Il selettore `.wheel` dovrebbe avere una proprietà `animation-timing-function` impostata a `linear`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+}
+--fcc-editable-region--
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md
new file mode 100644
index 00000000000..fbd71ee806d
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md
@@ -0,0 +1,191 @@
+---
+id: 6140f4b5c1555a2960de1e5f
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Crea un'altra regola `@keyframes` con il nome `cabins`. Usa le stesse proprietà del tuo `@keyframes wheel`, copiando entrambe le regole `0%` e `100%`, ma imposta la prorpietà `transform` del selettore `100%` a `rotate(-360deg)`.
+
+# --hints--
+
+Dovresti avere una regola `@keyframes`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2);
+```
+
+La tua nuova regola `@keyframes` dovrebbe essere nominata `cabins`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes');
+assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins');
+```
+
+La tua nuova regola `@keyframes` dovrebbe venire dopo la regola `@keyframes wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins');
+```
+
+Non dovresti cambiare il nome della tua regola `@keyframes wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+```
+
+La regola `@keyframes cabins` dovrebbe avere un selettore `0%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%');
+```
+
+Il tuo selettore `0%` dovrebbe avere una proprietà `transform` con valore di `rotate(0deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+```
+
+La regola della ruota `@keyframes cabins` dovrebbe avere un selettore `100%`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules
+assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+```
+
+Il tuo selettore `100%` dovrebbe venire dopo il tuo selettore `0%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%')
+```
+
+Il tuo selettore `100%` dovrebbe avere una proprietà `transform` impostata a `rotate(-360deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)')
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md
new file mode 100644
index 00000000000..073b56762b1
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md
@@ -0,0 +1,149 @@
+---
+id: 614100d7d335bb2a5ff74f1f
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Dentro il selettore `.wheel`, hai creato quattro diverse proprietà per controllare l'animazione. Per il tuo selettore `.cabin`, puoi utilizzare la proprietà `animation` per impostarli tutti contemporaneamente.
+
+Dai alla la proprietà `animation` della regola `.cabin` un valore di `cabins 10s linear infinite`. Questo imposterà le proprietà `animation-name`, `animation-duration`, `animation-timing-function`, e `animation-iteration-count` in quell'ordine.
+
+# --hints--
+
+Il selettore `.cabin` dovrebbe avere una proprietà `animation` impostata a `cabins 10s linear infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+}
+--fcc-editable-region--
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes cabins {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
new file mode 100644
index 00000000000..868d470d602
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -0,0 +1,151 @@
+---
+id: 61410126fa3a6d2b3cda502e
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Per rendere l'animazione della cabina più simile a un movimento oscillante naturale, puoi usare la funzione di temporizzazione `ease-in-out`. Questa impostazione dirà all'animazione di iniziare e terminare ad un ritmo più lento, ma di muoversi più rapidamente all'interno del ciclo.
+
+Sostituisci `linear` con `ease-in-out` nel selettore `.cabin`.
+
+# --hints--
+
+Il selettore `.cabin` dovrebbe avere una proprietà `animation` impostata a `cabins 10s ease-in-out infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+ animation: cabins 10s linear infinite;
+}
+--fcc-editable-region--
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes cabins {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md
new file mode 100644
index 00000000000..09a6158ffab
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md
@@ -0,0 +1,148 @@
+---
+id: 6141019eadec6d2c6c6f007b
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Puoi usare le regole `@keyframes` per controllare di più di una semplice trasformazione di un elemento. Nel selettore `0%` del tuo `@keyframes cabins`, imposta il `background-color` su `yellow`.
+
+# --hints--
+
+Il tuo selettore `0%` dovrebbe avere una `background-color` impostata a `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+ animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md
new file mode 100644
index 00000000000..1c418e16d64
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md
@@ -0,0 +1,291 @@
+---
+id: 6141026ec9882f2d39dcf2b8
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Tra i selettori `0%` e `100%`, aggiungi un selettore `50%`. Questo si inserirà nel mezzo del ciclo di animazione. Imposta il `background-color` a `purple`.
+
+# --hints--
+
+Dovresti creare un nuovo selettore `50%` nella tua regola `@keyframes cabins`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%');
+```
+
+Il tuo selettore `50%` dovrebbe essere tra i tuoi selettori `0%` e `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%');
+```
+
+Il tuo selettore `50%` dovrebbe avere una proprietà `background-color` impostata a `purple`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+ animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+ 0% {
+ transform: rotate(0deg);
+ background-color: yellow;
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+--fcc-editable-region--
+```
+
+## --solutions--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+ animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes cabins {
+ 0% {
+ transform: rotate(0deg);
+ background-color: yellow;
+ }
+ 50% {
+ background-color: purple;
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+```
+
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md
new file mode 100644
index 00000000000..6f3ba3436b6
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md
@@ -0,0 +1,154 @@
+---
+id: 6169ab1aaeb4cd1174def700
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Anche se l'animazione è su un ciclo infinito, i colori di inizio e fine non sono uguali, la transizione appare a scatti quando passa dal rosso al giallo.
+
+Per iniziare a correggerlo, rimuovi il `background-color` dal selettore `0%`.
+
+# --hints--
+
+Il selettore `0%` non dovrebbe avere una proprietà `background-color`.
+
+```js
+assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+ animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+ 0% {
+ transform: rotate(0deg);
+ background-color: yellow;
+ }
+ 50% {
+ background-color: purple;
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md
new file mode 100644
index 00000000000..19a40f91158
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md
@@ -0,0 +1,164 @@
+---
+id: 6169b1357fcb701bb5efc619
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Crea un nuovo selettore `25%` tra i tuoi selettori `0%` e `50%`. Dai a questo nuovo selettore una proprietà `background-color` impostata su `yellow`.
+
+# --hints--
+
+Dovresti creare un nuovo selettore `25%` nella tua regola `@keyframes cabins`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%');
+```
+
+Il tuo selettore `25%` dovrebbe essere compreso tra i tuoi selettori `0%` e `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%');
+```
+
+Il tuo selettore `25%` dovrebbe avere una proprietà `background-color` impostata su `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+.wheel {
+ border: 2px solid black;
+ border-radius: 50%;
+ margin-left: 50px;
+ position: absolute;
+ height: 55vw;
+ width: 55vw;
+ max-width: 500px;
+ max-height: 500px;
+ animation-name: wheel;
+ animation-duration: 10s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+
+.line {
+ background-color: black;
+ width: 50%;
+ height: 2px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+ transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+ transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+ transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+ transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+ transform: rotate(300deg);
+}
+
+.cabin {
+ background-color: red;
+ width: 20%;
+ height: 20%;
+ position: absolute;
+ border: 2px solid;
+ transform-origin: 50% 0%;
+ animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+ right: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(2) {
+ right: 17%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+ right: 67%;
+ top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+ left: -8.5%;
+ top: 50%;
+}
+.cabin:nth-of-type(5) {
+ left: 17%;
+ top: 7%;
+}
+.cabin:nth-of-type(6) {
+ right: 17%;
+ top: 7%;
+}
+
+@keyframes wheel {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ background-color: purple;
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 00000000000..9baf443edc0
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Posiziona lo pseudo-elemento relativo al suo antenato posizionato più vicino.
+
+# --hints--
+
+Dovresti dare a `.penguin-body::before` una `position` di `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+
+}
+--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/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 00000000000..ecd64fd398e
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Assegna allo pseudoelemento una `width` metà di quella del suo genitore, un `height` di `45%` e un `background-color` di `gray`.
+
+# --hints--
+
+Dovresti dare a `.penguin-body::before` un `width` di `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+Dovresti dare a `.penguin-body::before` una `height` di `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+Dovresti dare a `.penguin-body::before` un `background-color` di `--fcc-expected--`, invece che `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+
+}
+--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/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 00000000000..973d40677fc
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Posiziona lo pseudoelemento a `10%` dall'alto e `25%` da sinistra del suo genitore.
+
+# --hints--
+
+Dovresti dare a `.penguin-body::before` un `top` di `--fcc-expected--`, invece di `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+Dovresti dare a `.penguin-body::before` un `left` di `--fcc-expected--`, invece che `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+
+}
+--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/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md
new file mode 100644
index 00000000000..f334f4fd71a
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Arrotonda la cresta, dando agli angoli inferiori dei pseudo-elementi un raggio di `100%`, lasciando gli angoli superiori a `0%`.
+
+# --hints--
+
+Dovresti utilizzare la proprietà `border-radius` per chiudere la cresta.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+Dovresti dare a `.penguin-body::before` un `border-radius` di `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
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 00000000000..d599d343347
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Aumenta la trasparenza del psuedo-elemento del `30%`.
+
+# --hints--
+
+Dovresti dare a `.penguin-body::before` un `opacity` di `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+ top: 10%;
+ left: 25%;
+ border-radius: 0% 0% 100% 100%;
+
+}
+--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/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 00000000000..8c888e61996
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Fai si che gli angoli superiori degli elementi `.face` abbiano un raggio di `70%`, e gli angoli inferiori un raggio di `60%`.
+
+# --hints--
+
+Dovresti dare a `.face` un `border-radius` di `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
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 00000000000..b40c097027a
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalizza la tua pagina, impostando `width` a `100%` e `height` a `100vh`.
+
+# --hints--
+
+Dovresti dare a `body` una `width` di `--fcc-expected--`, invece di `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+Dovresti dare a `body` un `height` di `--fcc-expected--`, invece che `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+ 
+
```
# --instructions--
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
index f6f66a013df..91dc7cd2b96 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
@@ -32,7 +32,7 @@ JavaScript は 7 つのプリミティブな (イミュータブル) データ
2 つの `console.log()` ステートメントで `typeof` を使用して変数の型を確認する必要があります。
```js
-assert(code.match(/console\.log\(typeof[\( ].*\)?\)/g).length == 2);
+assert(code.match(/console\.log\s*\(typeof[\( ].*\)?\)/g).length == 2);
```
`typeof` を使用して変数 `seven` の型を確認する必要があります。
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
index 76efc679d8c..f66e233a1c2 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
@@ -18,120 +18,123 @@ JavaScript では、`truthy` な値 (真値) とは、ブール値のコンテ
# --hints--
-`truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex")` は `true` を返す必要があります。
+`truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "isBot")` は `false` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck(
- [
- { user: 'Tinky-Winky', sex: 'male' },
- { user: 'Dipsy', sex: 'male' },
- { user: 'Laa-Laa', sex: 'female' },
- { user: 'Po', sex: 'female' }
- ],
- 'sex'
- ),
- true
-);
+assert.strictEqual(truthCheck(
+ [
+ { name: "Quincy", role: "Founder", isBot: false },
+ { name: "Naomi", role: "", isBot: false },
+ { name: "Camperbot", role: "Bot", isBot: true }
+ ],
+ "isBot"), false);
```
-`truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex")` は `false` を返す必要があります。
+`truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "name")` は `true` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck(
- [
- { user: 'Tinky-Winky', sex: 'male' },
- { user: 'Dipsy' },
- { user: 'Laa-Laa', sex: 'female' },
- { user: 'Po', sex: 'female' }
- ],
- 'sex'
- ),
- false
-);
+assert.strictEqual(truthCheck(
+ [
+ { name: "Quincy", role: "Founder", isBot: false },
+ { name: "Naomi", role: "", isBot: false },
+ { name: "Camperbot", role: "Bot", isBot: true }
+ ],
+ "name"), true);
```
-`truthCheck([{"user": "Tinky-Winky", "sex": "male", "age": 0}, {"user": "Dipsy", "sex": "male", "age": 3}, {"user": "Laa-Laa", "sex": "female", "age": 5}, {"user": "Po", "sex": "female", "age": 4}], "age")` は `false` を返す必要があります。
+`truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "role")` は `false` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck(
- [
- { user: 'Tinky-Winky', sex: 'male', age: 2 },
- { user: 'Dipsy', sex: 'male', age: 0 },
- { user: 'Laa-Laa', sex: 'female', age: 5 },
- { user: 'Po', sex: 'female', age: 4 }
- ],
- 'age'
- ),
- false
-);
+assert.strictEqual(truthCheck(
+ [
+ { name: "Quincy", role: "Founder", isBot: false },
+ { name: "Naomi", role: "", isBot: false },
+ { name: "Camperbot", role: "Bot", isBot: true }
+ ],
+ "role"), false);
```
-`truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true}, {"name": "FastForward", "onBoat": null}], "onBoat")` は `false` を返す必要があります。
+`truthCheck([{name: "Pikachu", number: 25, caught: 3}, {name: "Togepi", number: 175, caught: 1}], "number")` は `true` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck(
- [
- { name: 'Pete', onBoat: true },
- { name: 'Repeat', onBoat: true },
- { name: 'FastForward', onBoat: null }
- ],
- 'onBoat'
- ),
- false
-);
+assert.strictEqual(truthCheck(
+ [
+ { name: "Pikachu", number: 25, caught: 3 },
+ { name: "Togepi", number: 175, caught: 1 },
+ ],
+ "number"), true);
```
-`truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true, "alias": "Repete"}, {"name": "FastForward", "onBoat": true}], "onBoat")` は `true` を返す必要があります。
+`truthCheck([{name: "Pikachu", number: 25, caught: 3}, {name: "Togepi", number: 175, caught: 1}, {name: "MissingNo", number: NaN, caught: 0}], "caught")` は `false` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck(
- [
- { name: 'Pete', onBoat: true },
- { name: 'Repeat', onBoat: true, alias: 'Repete' },
- { name: 'FastForward', onBoat: true }
- ],
- 'onBoat'
- ),
- true
-);
+assert.strictEqual(truthCheck(
+ [
+ { name: "Pikachu", number: 25, caught: 3 },
+ { name: "Togepi", number: 175, caught: 1 },
+ { name: "MissingNo", number: NaN, caught: 0 },
+ ],
+ "caught"), false);
```
-`truthCheck([{"single": "yes"}], "single")` は `true` を返す必要があります。
+`truthCheck([{name: "Pikachu", number: 25, caught: 3}, {name: "Togepi", number: 175, caught: 1}, {name: "MissingNo", number: NaN, caught: 0}], "number")` は `false` を返す必要があります。
```js
-assert.strictEqual(truthCheck([{ single: 'yes' }], 'single'), true);
+assert.strictEqual(truthCheck(
+ [
+ { name: "Pikachu", number: 25, caught: 3 },
+ { name: "Togepi", number: 175, caught: 1 },
+ { name: "MissingNo", number: NaN, caught: 0 },
+ ],
+ "number"), false);
```
-`truthCheck([{"single": ""}, {"single": "double"}], "single")` は `false` を返す必要があります。
+`truthCheck([{name: "Quincy", username: "QuincyLarson"}, {name: "Naomi", username: "nhcarrigan"}, {name: "Camperbot"}], "username")` は `false` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck([{ single: '' }, { single: 'double' }], 'single'),
- false
-);
+assert.strictEqual(truthCheck(
+ [
+ { name: "Quincy", username: "QuincyLarson" },
+ { name: "Naomi", username: "nhcarrigan" },
+ { name: "Camperbot" }
+ ],
+ "username"), false);
```
-`truthCheck([{"single": "double"}, {"single": undefined}], "single")` は `false` を返す必要があります。
+`truthCheck([{name: "freeCodeCamp", users: [{name: "Quincy"}, {name: "Naomi"}]}, {name: "Code Radio", users: [{name: "Camperbot"}]}, {name: "", users: []}], "users")` は `true` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck([{ single: 'double' }, { single: undefined }], 'single'),
- false
-);
+assert.strictEqual(truthCheck(
+ [
+ { name: "freeCodeCamp", users: [{ name: "Quincy" }, { name: "Naomi" }] },
+ { name: "Code Radio", users: [{ name: "Camperbot" }] },
+ { name: "", users: [] },
+ ],
+ "users"), true);
```
-`truthCheck([{"single": "double"}, {"single": NaN}], "single")` は `false` を返す必要があります。
+`truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp"}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "data")` は `true` を返す必要があります。
```js
-assert.strictEqual(
- truthCheck([{ single: 'double' }, { single: NaN }], 'single'),
- false
-);
+assert.strictEqual(truthCheck(
+ [
+ { id: 1, data: { url: "https://www.freecodecamp.org", name: "freeCodeCamp" } },
+ { id: 2, data: { url: "https://coderadio.freecodecamp.org/", name: "CodeRadio" } },
+ { id: null, data: {} },
+ ],
+ "data"), true);
+```
+
+`truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp"}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "id")` は `false` を返す必要があります。
+
+```js
+assert.strictEqual(truthCheck(
+ [
+ { id: 1, data: { url: "https://www.freecodecamp.org", name: "freeCodeCamp" } },
+ { id: 2, data: { url: "https://coderadio.freecodecamp.org/", name: "CodeRadio" } },
+ { id: null, data: {} },
+ ],
+ "id"), false);
```
# --seed--
@@ -143,7 +146,7 @@ function truthCheck(collection, pre) {
return pre;
}
-truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex");
+truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "isBot");
```
# --solutions--
diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
index b6fa8f4fc05..44f1cf2288e 100644
--- a/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
+++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
@@ -27,7 +27,7 @@ Preferencialmente, o atributo `alt` não deve conter caracteres especiais, a men
Vamos adicionar um atributo `alt` ao nosso exemplo `img` acima:
```html
-
+
```
# --instructions--
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
index a6d9590dc19..390a8ed9694 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
@@ -32,7 +32,7 @@ Adicione duas instruções `console.log()` para verificar o `typeof` de cada uma
O código deve usar `typeof` em duas instruções `console.log()` para verificar o tipo das variáveis.
```js
-assert(code.match(/console\.log\(typeof[\( ].*\)?\)/g).length == 2);
+assert(code.match(/console\.log\s*\(typeof[\( ].*\)?\)/g).length == 2);
```
O código deve usar `typeof` para verificar o tipo da variável `seven`.
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
new file mode 100644
index 00000000000..0240c3e6ab9
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -0,0 +1,215 @@
+---
+id: 6145f829ac6a920ebf5797d7
+title: Passo 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Dois elementos HTML semânticos finais para este projeto são os elementos `footer` e `address`. O elemento `footer` é um contêiner para uma coleção de conteúdos relacionada à página, enquanto o elemento `address` é um contêiner para informações de contato do autor da página.
+
+Após o elemento `main`, adicione um elemento `footer` e aninhe um elemento `address` dentro dele.
+
+# --hints--
+
+Você deve adicionar um elemento `footer` depois do elemento `main`.
+
+```js
+assert.exists(document.querySelector('main + footer'));
+```
+
+Você deve aninhar um elemento `address` dentro do elemento `footer`.
+
+```js
+assert.exists(document.querySelector('footer > address'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ 
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+ HTML/CSS Quiz
+ +
+
```
# --instructions--