diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md new file mode 100644 index 0000000000..c214fac2b9 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md @@ -0,0 +1,183 @@ +--- +id: 5f46e270702a8456a664f0df +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Per rimuovere parte dello spazio verticale tra l'elemento `h1` e il testo `Est. 2020`, modifica il margine inferiore dell'elemento `h1` impostandolo a `15px`. + +# --hints-- + +Dovresti impostare la proprietà `margin-bottom` su `15px`. + +```js +const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px'); +assert(hasMarginBottom); +``` + +Il tuo elemento `h1` dovrebbe avere un `margin-bottom` di `15px`. + +```js +const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom'); +assert(h1MarginBottom === '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinnamon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +--fcc-editable-region-- +h1 { + font-size: 40px; + margin-top: 0; +} +--fcc-editable-region-- + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md new file mode 100644 index 0000000000..01666c6b2e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md @@ -0,0 +1,304 @@ +--- +id: 6169b284950e171d8d0bb16a +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Infine, crea un nuovo selettore `75%` tra i tuoi selettori `50%` e `100%`. Dai a questo nuovo selettore una proprietà `background-color` impostata su `yellow.` + +Con questo, la tua animazione è molto più fluida e la ruota panoramica è completa. + +# --hints-- + +Dovresti creare un nuovo selettore `75%` nella tua regola `@keyframes cabins`. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; +assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%'); +``` + +Il tuo selettore `75%` dovrebbe essere compreso tra i selettori `50%` e `100%`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%'); +``` + +Il tuo selettore `75%` dovrebbe avere una proprietà `background-color` impostata a `yellow`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); + } + 25% { + background-color: yellow; + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` + +## --solutions-- + +```html + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 25% { + background-color: yellow; + } + 50% { + background-color: purple; + } + 75% { + background-color: yellow; + } + 100% { + transform: rotate(-360deg); + } +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md new file mode 100644 index 0000000000..7e0e671d2e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md @@ -0,0 +1,195 @@ +--- +id: 6143bb50e8e48c6f5ef9d8d5 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +All'interno dell'elemento `aside`, crea due elementi `img`, un elemento `blockquote` e un terzo elemento `img`. Dai all'elemento `blockquote` una `class` impostata su `image-quote`. + +# --hints-- + +Dovresti creare tre elementi `img` all'interno del tuo elemento `aside`. + +```js +assert(document.querySelectorAll('aside img')?.length === 3); +``` + +Dovresti creare un elemento `blockquote` all'interno dell'elemento `aside`. + +```js +assert.exists(document.querySelector('aside blockquote')); +``` + +Il tuo elemento `blockquote` dovrebbe avere la `class` impostata su `image-quote`. + +```js +assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote')); +``` + +I tuoi tag html dovrebbero essere nell'ordine corretto. + +```js +const children = document.querySelector('aside')?.children; +assert(children?.[0]?.localName === 'img'); +assert(children?.[1]?.localName === 'img'); +assert(children?.[2]?.localName === 'blockquote'); +assert(children?.[3]?.localName === 'img'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Magazine + + + + + +
+
+
+ freecodecamp logo +

OUR NEW CURRICULUM

+

+ Our efforts to restructure our curriculum with a more project-based + focus +

+
+
+

+ By + freeCodeCamp +

+

March 7, 2019

+
+ +
+
+

+ Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges. +

+

+ After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor! +

+

+ It wasn't as dramatic as Doc's revelation in Back to the Future. It + just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.) +

+
+
+

+ The entire curriculum should be a series of projects +

+
+
+

+ No more walls of explanatory text. No more walls of tests. Just one + test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition. +

+

+ The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode". +

+

+ Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience. +

+
+
+
+

A Brief History

+

Of the Curriculum

+
    +
  • +

    V1 - 2014

    +

    + We launched freeCodeCamp with a simple list of 15 resources, + including Harvard's CS50 and Stanford's Database Class. +

    +
    • +
  • +

    V2 - 2015

    +

    We added interactive algorithm challenges.

    +
    • +
  • +

    V3 - 2015

    +

    + We added our own HTML+CSS challenges (before we'd been relying + on General Assembly's Dash course for these). +

    +
    • +
  • +

    V4 - 2016

    +

    + We expanded the curriculum to 3 certifications, including Front + End, Back End, and Data Visualization. They each had 10 required + projects, but only the Front End section had its own challenges. + For the other certs, we were still using external resources like + Node School. +

    +
    • +
  • +

    V5 - 2017

    +

    We added the back end and data visualization challenges.

    +
    • +
  • +

    V6 - 2018

    +

    + We launched 6 new certifications to replace our old ones. This + was the biggest curriculum improvement to date. +

    +
    • +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md new file mode 100644 index 0000000000..a4844c123a --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md @@ -0,0 +1,89 @@ +--- +id: 61969c487ced6f12db8fef94 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Seleziona l'elemento `.left-mountain` e imposta la sua `width` e `height` a `300px`. Quindi, imposta il `background` su un gradiente lineare che parta da `rgb(203, 241, 228)` e finisca a `rgb(80, 183, 255)`. + +# --hints-- + +Dovresti utilizzare il selettore `.left-mountain`. + +```js +assert.match(code, /\.left-mountain\s*\{/); +``` + +Dovresti dare a `.left-mountain` una `width` di `300px`. `--fcc-actual--` doveva essere `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px'); +``` + +Dovresti dare a `.left-mountain` un'`height` di `300px`. `--fcc-actual--` doveva essere `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px'); +``` + +Dovresti dare a `.left-mountain` un `background` di `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`. + +```js +assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.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; +} + +--fcc-editable-region-- + +--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/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md new file mode 100644 index 0000000000..f6da74c205 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md @@ -0,0 +1,166 @@ +--- +id: 619be946958c6009844f1dee +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Avvia il volto del pinguino, aggiungendo due elementi `div` all'interno di `.penguin-head`, e dando a entrambi una `class` di `face`. + +# --hints-- + +Dovresti aggiungere `--fcc-expected--` `div` elementi a `.penguin-head`, ma è stato trovato `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2); +``` + +Dovresti dare al primo `div` una `class` di `face`, ma è stato trovato `--fcc-actual--`. + +```js +assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face'); +``` + +Dovresti dare al secondo `div` una `class` di `face`, ma è stato trovato `--fcc-actual--`. + +```js +assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```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%; +} + +.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/619d0d18ca99870f884a7bff.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md new file mode 100644 index 0000000000..6d8d887ff3 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md @@ -0,0 +1,225 @@ +--- +id: 619d0d18ca99870f884a7bff +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +All'interno di ogni elemento `.eye`, aggiungi un `div` con una `class` di `eye-lid`. + +# --hints-- + +Dovresti aggiungere un elemento `div` all'interno di `.eye.left`, ma è stato trovato `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1); +``` + +Dovresti aggiungere un elemento `div` all'interno di `.eye.right`, ma è stato trovato `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1); +``` + +Dovresti dare al primo `div` una `class` di `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.left > div.eye-lid')); +``` + +Dovresti dare al secondo nuovo `div` una `class` di `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.right > div.eye-lid')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+ +
+
+ +
+
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```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%; +} + +.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/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md new file mode 100644 index 0000000000..8c1b9180ca --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md @@ -0,0 +1,323 @@ +--- +id: 619d2fd3ff4f772882e3d998 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Cambia l'ordine di impilamento degli elementi `.arm` in modo che appaiano dietro all'elemento `.penguin-body`. + +# --hints-- + +Dovresti dare a `.arm` uno `z-index` di `--fcc-expected--`, ma è stato trovato `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1'); +``` + +# --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; +} + +.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%; +} + +--fcc-editable-region-- +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + +} +--fcc-editable-region-- + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +.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/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md new file mode 100644 index 0000000000..5d9cecea29 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md @@ -0,0 +1,208 @@ +--- +id: 5d822fd413a79914d39e98fd +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Nei prossimi passi, si stanno per utilizzare alcuni trucchi con bordi CSS per girare la sezione `.bb2a` in un triangolo nella parte superiore dell'edificio. Per prima cosa, rimuovi il `background-color` da `.bb2` poiché non ne hai più bisogno. + +# --hints-- + +Dovresti rimuovere il `background-color` da `.bb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md new file mode 100644 index 0000000000..c7085ba4d2 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md @@ -0,0 +1,401 @@ +--- +id: 5d822fd413a79914d39e9936 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +Va bene, gli edifici sono finiti. Torna al selettore `*` e rimuovi il `border` che hai applicato a tutto all'inizio e gli edifici si uniranno. + +# --hints-- + +Dovresti rimuovere il `border` dal selettore `*`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} +--fcc-editable-region-- +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md new file mode 100644 index 0000000000..2b54f75857 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md @@ -0,0 +1,423 @@ +--- +id: 5d822fd413a79914d39e993b +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Copia e incolla l'intera classe `sky` insieme a tutte le sue proprietà e valori nella media query. Stai per creare un altro schema di colori per la skyline che la cambia da giorno a notte. + +Nota: Hai bisogno di scorrere oltre la regione modificabile per copiare la classe. + +# --hints-- + +Non dovresti cancellare la dichiarazione `.sky` esistente. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); +``` + +Dovresti copiare la dichiarazione `.sky` esistente nella query multimediale. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- +@media (max-width: 1000px) { + +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md new file mode 100644 index 0000000000..cbf663905c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md @@ -0,0 +1,81 @@ +--- +id: 60f8604682407e0d017bbf7f +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Per i termini e le condizioni, aggiungi un `input` con un `type` di `checkbox` al terzo elemento `label`. Inoltre, dato che non vogliamo che gli utenti si registrino senza aver letto i termini e le condizioni, rendilo `required`. + +# --hints-- + +Dovresti aggiungere un `input` al terzo elemento `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')); +``` + +Dovresti aggiungere un attributo `type` con valore `checkbox` all'elemento `input`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox'); +``` + +Dovresti aggiungere un attributo `required` all'elemento `input`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md new file mode 100644 index 0000000000..b82b8ea19a --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -0,0 +1,220 @@ +--- +id: 60b69a66b6ddb80858c515aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Ora imposta la `position` ad `absolute`, il `top` a `20%` e il `left` a `20%`. + +# --hints-- + +Il tuo selettore `#blue-left` dovrebbe avere una proprietà `position` impostata a `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); +``` + +Il tuo selettore `#blue-left` dovrebbe avere una proprietà `top` impostata al `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); +``` + +Il selettore `#blue-left` dovrebbe avere una proprietà `left` impostata a `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/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md new file mode 100644 index 0000000000..c95b4bc60d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515bc +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Dai a `eyes-div` uno `z-index` di `3`. + +# --hints-- + +Il selettore `#eyes-div` dovrebbe avere una proprietà `z-index` impostata a `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.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; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md new file mode 100644 index 0000000000..1c4ce43676 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md @@ -0,0 +1,142 @@ +--- +id: 61fd78621573aa5e8b512f5e +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Nel tuo terzo elemento `tr`, aggiungi un elemento `th` con il testo `Savings Funds set aside for emergencies.`. Manda a capo il testo, ad eccezione dei `Savings`, all'interno di un elemento `span` con la `class` impostata a `description`. + +In seguito, aggiungi tre elementi `td` con il seguente testo (in ordine): `$500`, `$650`, `$728`. Dai al terzo elemento `td` una `class` impostata a `current`. + +# --hints-- + +Il tuo terzo `tr` dovrebbe avere un elemento `th`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')); +``` + +Il tuo elemento `th` dovrebbe avere il testo `Savings Funds set aside for emergencies.`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.'); +``` + +Dovresti mandare a capo il testo `Funds set aside for emergencies.` in un elemento `span`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.'); +``` + +Il tuo elemento `span` dovrebbe avere l'attributo `class` impostato a `description`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description')); +``` + +Dovresti avere tre elementi di `td`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3); +``` + +Il tuo primo elemento `td` dovrebbe avere il testo `$500`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500'); +``` + +Il secondo elemento `td` dovrebbe avere il testo `$650`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650'); +``` + +Il tuo terzo elemento `td` dovrebbe avvere il testo `$728`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728'); +``` + +Il tuo terzo elemento `td` dovrebbe avere la `class` impostata su `current`. + +```js +assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.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
Checking Our primary transactional account.$54$56$53
+ +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md new file mode 100644 index 0000000000..54d265dc5c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md @@ -0,0 +1,271 @@ +--- +id: 620191707bc65579ddd3ce15 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Usando la stessa sintassi dei selettori, seleziona gli elementi `th` all'interno delle righe della tabella in cui la `class` è `total`. Allinea i testi a sinistra e dà loro un padding di `0.5rem 0 0.25rem 0.5rem`. + +# --hints-- + +Dovresti avere un selettore `tr[class="total"] th`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')); +``` + +Il selettore `tr[class="total"] th` dovrebbe avere una proprietà `text-align` impostata a `sinistra`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left'); +``` + +Il selettore `tr[class="total"] th` dovrebbe avere una proprietà `padding` impostata a `0.5rem 0 0.25rem 0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 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; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md new file mode 100644 index 0000000000..1fcaa9de5e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md @@ -0,0 +1,74 @@ +--- +id: 612e8279827a28352ce83a72 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Ora copia il set di sette elementi `.key` e incolla altri due set nel div `.keys`. + +# --hints-- + +Dovresti avere 21 elementi `.key`. + +```js +const keys = document.querySelectorAll('.key'); +assert(keys?.length === 21); +``` + +Dovresti avere 15 elementi `.black--key`. + +```js +const blackKeys = document.querySelectorAll('.black--key'); +assert(blackKeys?.length === 15); +``` + +Tutti gli elementi `.key` dovrebbero essere all'interno dell'elemento `.keys`. + +```js +const keys = document.querySelector('.keys'); +assert(keys?.querySelectorAll('.key')?.length === 21); +``` + +Tutti gli elementi `.black--key` dovrebbero essere all'interno dell'elemento `.keys`. + +```js +const keys = document.querySelector('.keys'); +assert(keys?.querySelectorAll('.black--key')?.length === 15); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md new file mode 100644 index 0000000000..a567b8fb78 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md @@ -0,0 +1,139 @@ +--- +id: 612ebf9a210f2b6d77001e68 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Ora aggiungi un selettore `.logo` alla `@media` query e imposta la proprietà `width` a `150px`. + +# --hints-- + +La `@media` query dovrebbe avere un selettore `.logo`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const logo = rules?.find(rule => rule.selectorText === '.logo'); +assert(logo); +``` + +Il tuo nuovo selettore `.logo` dovrebbe avere una `width` di `150px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const logo = rules?.find(rule => rule.selectorText === '.logo'); +assert(logo?.style.width === '150px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- +@media (max-width: 768px) { + #piano { + width: 335px; + } + + .keys { + width: 318px; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md new file mode 100644 index 0000000000..0d4250dbe8 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997a +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Scrivi una nuova regola che seleziona `.one` e imposta la sua `width` a 425 pixel. + +# --hints-- + +Dovresti avere un selettore `.one`. + +```js +const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); +assert(hasOne); +``` + +Dovresti impostare la proprietà `width` su `425px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); +assert(hasWidth); +``` + +Il tuo elemento `.one` dovrebbe avere un valore `width` di `425px`. + +```js +const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); +assert(oneWidth === '425px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md new file mode 100644 index 0000000000..158eaf2c5e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md @@ -0,0 +1,94 @@ +--- +id: 60a3e3396c7b40068ad69987 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Non sei obbigato a usare i pixel quando dimensioni un elemento. + +Crea una nuova regola, `.three`e imposta la sua `width` a `91%`. + +# --hints-- + +Dovresti utilizzare il selettore `.three`. + +```js +const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); +assert(hasThree); +``` + +Dovresti impostare la proprietà `width` a `91%`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); +assert(hasWidth); +``` + +L'elemento `#box-1` dovrebbe avere un valore `flex-basis` di `10em`. + +```js +const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); +assert(threeWidth === '91%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko Painting + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md new file mode 100644 index 0000000000..48935832f7 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md @@ -0,0 +1,78 @@ +--- +id: 615f3e4af8008c5d494d3afe +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Crea un selettore `p` e rimuovi tutti i margini. + +# --hints-- + +Dovresti creare un selettore `p`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('p')); +``` + +Il tuo selettore `p` dovrebbe avere una `margin` impostato a `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+

Nutrition Facts

+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +h1 { + font-weight: 800; + text-align: center; + margin: -4px 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md index f82e52d945..60dcc582f3 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md @@ -27,19 +27,19 @@ dashedName: adjust-the-hue-of-a-color # --hints-- -`hsl()` 関数を使って、`green` の色を宣言してください。 +`hsl()` 関数を使って、緑色を宣言してください。 ```js assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -`hsl()` 関数を使って、`cyan` の色を宣言してください。 +`hsl()` 関数を使って、シアンを宣言してください。 ```js assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi)); ``` -`hsl()` 関数を使って、`blue` の色を宣言してください。 +`hsl()` 関数を使って、青色を宣言してください。 ```js assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi)); diff --git a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md index b2dd81882f..3794c674fe 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md @@ -11,7 +11,9 @@ dashedName: set-the-font-size-for-multiple-heading-elements `font-size` プロパティは、指定された要素内のテキストの大きさを指定するために使われます。 このルールは色々な要素に使うことができ、ページ上のテキストの視覚的な一貫性を作成するために使われます。 このチャレンジでは、見出しのサイズのバランスをとるために `h1` から `h6` タグすべての値を設定してみましょう。 -# --instructions--

style タグの中で、以下の font-size を設定してください。

+# --instructions-- + +

style タグの中で、以下の font-size を設定してください。