diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md index 95c95d92bfb..3cd099f30b9 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md @@ -44,12 +44,12 @@ assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhi
-
- --fcc-editable-region-- +
+ --fcc-editable-region-- - --fcc-editable-region-- -
- + --fcc-editable-region-- +
+ ``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md index 21b34857596..aded8e67234 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -56,13 +56,13 @@ assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id
-
-
- --fcc-editable-region-- +
+
+ --fcc-editable-region-- - --fcc-editable-region-- -
-
+ --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md index 65494f8c3df..1b6919fa993 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md @@ -46,18 +46,18 @@ assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('righ
-
-
-
-
- --fcc-editable-region-- +
+
+
+
+ --fcc-editable-region-- - --fcc-editable-region-- -
-
-
-
+ --fcc-editable-region--
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md index c49c2f55f7b..0d41d080adf 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md @@ -38,21 +38,21 @@ assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md index 0137bafc047..46616408106 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgrou
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md index 72be86e0595..7522551b017 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md index 8eeca4b97ad..31431f3f0bd 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md index 0e2275017f4..b355c9b2c38 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md index 1f29a896c13..156637bfb82 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md index 3c40a59cb91..e9ad59faddd 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md index 9b779323e0c..b0bee6e3b6d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md index c7d26dcee84..f3c40bd9613 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md index e4d7aeb99e2..cb3bcce83f1 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md index 58135acaf1c..a67b90371a5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md index 038068c0ffd..fa364a4ed54 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md index 67edb466b43..0c6e8ab5ea6 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md index cc85bf94a10..4727fa07b2d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md index 1d7bc556548..a4998791a92 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md @@ -35,23 +35,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBotto
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md index 07eccb6b54e..63b15ed063a 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md index 1d08b8e0ebd..c51d45f041e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -50,23 +50,23 @@ assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md index ab9156d02c8..fa55136e0d4 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md index 13d52b46a31..f674ea718cb 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md index c471f76b2f4..a20432284cc 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -38,26 +38,26 @@ assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md index e8876c29a46..696845a0330 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md @@ -50,28 +50,28 @@ assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('i
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md index 03d53467aa6..df2e863612d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -48,32 +48,32 @@ assert(second?.classList?.contains('right'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md index c20fbf07f06..f83997330ad 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md @@ -48,35 +48,35 @@ for (const icon of icons) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md index 837e2b435de..150e833cf1f 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md index 08ff8469110..a87f69786cc 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md index 7ddc7e24fb4..125d6a3a05e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md index 12a349456c0..4b6dd9a2a05 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md index 8f5f851d9f3..1776d4356b2 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md index 0837faf74f1..78cd44f45dc 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md index f635cba65f6..fc60714de85 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md index 7a17805bd74..c7a44cf6c1a 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md index 26377cfb02c..ac381ac33b1 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md index 8bbcacb7660..98b71a17f08 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md index 88f473d3bad..bc2ed3f862e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md index f65f6e047f1..fea32d33fd5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -38,38 +38,38 @@ assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md index 40e6ff51cd0..f769b6c5100 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md index 57fb0de4db8..62733f01504 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md index 4d8c2d406aa..7ba6b4008f8 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md index 50d2ff0b895..438bc731e19 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md index 0b6b1de679f..dd65b158471 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -38,41 +38,41 @@ assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md index 23c011ebcd3..12e60fcf4ac 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md @@ -56,43 +56,43 @@ assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md index f90db1183b7..0795c6fe1b0 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -46,48 +46,48 @@ assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md index 0a1d5e30ced..62ffeabbb9c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md @@ -41,51 +41,51 @@ for (const div of divDivDiv) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md index 7ab94a13197..013f0040d11 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -70,82 +70,82 @@ assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md index b004366386b..6cf2e623334 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md @@ -47,88 +47,88 @@ assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- -
-
- -
- --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ +
+
+ +
+ --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md index 034a99d6cb5..099953b5457 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.background
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md index f2e940019ca..1a35d5f78c0 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md index 20f3d1e08af..318aad54df1 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md index d1335b1f2b3..6fc11db326c 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadiu
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md index 5fbbdcd5c36..45d15b26f8b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md index 43e6f44f93a..69a1ece4dbb 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md index 1ffff464fa0..a91fcab863f 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md index ac92f939203..d1f1634c766 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md index 18205e72e31..5dcae326850 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md index 535f81e8b08..a7ac9ed4940 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md index 0c948935492..665734674f5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'a
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md index 445cce53b3d..97d7d75952a 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md index 04efed8a479..2a3b7dc9254 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md index faae20da33e..36bf397d4f5 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md index d23fb900276..4116d3a8847 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md index a70f2abe96f..66a709493bb 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md index 1f9a410b4b7..4c1b555cbae 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md index 5ef1d14936e..837580da5cf 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md index 5b5087ca94d..e633052c867 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md index 0392898a334..5f047b99242 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md @@ -40,86 +40,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md index 460fb81ab3d..f51e238fffa 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inlin
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md index a353f2a8d0f..337389275eb 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md index dd7c97741c7..51800b0a91d 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md index 9e52d5fe733..a0168c4b81b 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md index 2520d4d4bd6..df4139b839e 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md index 3940238cd7f..be29d94a500 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md index 099a6a3a567..fb463092edd 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md index 1ac3f667fcd..3f70c1409ef 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md index 943309f166f..6d16458c918 100644 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md index 1b72f050a8d..9d6c4575b3b 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md @@ -44,12 +44,12 @@ assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhi
-
- --fcc-editable-region-- +
+ --fcc-editable-region-- - --fcc-editable-region-- -
- + --fcc-editable-region-- +
+ ``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md index ffbe8348198..91b824c1ffa 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -56,13 +56,13 @@ assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id
-
-
- --fcc-editable-region-- +
+
+ --fcc-editable-region-- - --fcc-editable-region-- -
-
+ --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md index 64919f02254..36d6fc39bd0 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md @@ -46,18 +46,18 @@ assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('righ
-
-
-
-
- --fcc-editable-region-- +
+
+
+
+ --fcc-editable-region-- - --fcc-editable-region-- -
-
-
-
+ --fcc-editable-region--
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md index d9eb92a2c34..c7e07e81747 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md @@ -38,21 +38,21 @@ assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md index b5922c0a966..794a3b98b5c 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgrou
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md index 332cc65b596..396be109929 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md index eac60571f5f..2f3e9447a63 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md index 03243b36b12..11624a4e676 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md index c0e9ea66026..80066560b60 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md index 6a3decb94f0..98280c7c227 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md index ec68e0649d2..9c3fa486a96 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md index f50bd9eb0d1..23e70e4b7b3 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md index 231ce1ecc1f..a90060f8887 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md index 4da4a648856..0b1d01402a1 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md index d0be8d3e57a..35471954d10 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md index db2a940267c..a29ba50f74c 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md index 5138d0bc703..8984cbfabd5 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md index ecb6c4e62c1..845712ac553 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md @@ -35,23 +35,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBotto
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md index e8b71a76837..0bf85de9a3f 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md index 31b98df3899..844b72c5ff3 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -50,23 +50,23 @@ assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md index 3d5e63cdfd4..86be16a3873 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md index 2d64bcef128..ca497c2b75d 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md index 43a41b5547d..bac66745bc2 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -38,26 +38,26 @@ assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md index dd30ff969fc..2489bddc591 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md @@ -50,28 +50,28 @@ assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('i
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md index f20b6410eff..b896ea97262 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -48,32 +48,32 @@ assert(second?.classList?.contains('right'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md index f94a85a05f5..426c3e90757 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md @@ -48,35 +48,35 @@ for (const icon of icons) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md index 4d5ea370429..00c9bb179f3 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md index a3b47e2d6ff..dd65a01661e 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md index 0b7e9f1aaf2..00e533ff87b 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md index 1464027f545..7756dbfef7c 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md index 342056a444a..43c9c15d214 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md index bed91896bea..428066dbe06 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md index 7d6d54d1fb6..82509a69524 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md index 76440debb52..38b000562cb 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md index 9f79ecc351e..028e7dbccd8 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md index 683e3855a5c..63ac11e0f40 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md index ab6902829e2..e40064e6ad7 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md index b73923093d1..723036cf301 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -38,38 +38,38 @@ assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md index cbe13b60b80..3c5c37f1088 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md index b891eb9707a..124ed23e70d 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md index 6b0febb8c87..6081a8e5a39 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md index ff8c8c0a789..cdce57c9034 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md index 2863d77aedc..39f9cb7e940 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -38,41 +38,41 @@ assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md index e1f7e04006c..b6821334484 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md @@ -56,43 +56,43 @@ assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md index 6c6537973d3..61c2bf706f1 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -46,48 +46,48 @@ assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md index 4016dafda5c..9dda382a165 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md @@ -41,51 +41,51 @@ for (const div of divDivDiv) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md index a21c6ea4384..098c758fd5a 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -70,82 +70,82 @@ assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md index 0b1059b5814..d4856f71018 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md @@ -47,88 +47,88 @@ assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- -
-
- -
- --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ +
+
+ +
+ --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md index 38e66f9c293..e73d257a7b4 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.background
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md index f013db490fa..942ac6b2787 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md index dd753e0b65c..9fbc71e569b 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md index 3f5a6b6bbb8..3c9def6c570 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadiu
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md index dcd63856521..fd9b07a1664 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md index 9ce0fa79d8c..ac74da7a7e2 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md index 597221b7a3d..457e21d29ee 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md index 712f115b62f..b28f50a7ec8 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md index 8b51ec31105..d23d23cac82 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md index 755dfe283ee..a36d15c911c 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md index f7849efeb23..72aa78c00c7 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'a
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md index 8c62cba2bbe..2a0ad0bad24 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md index a6341dabfb3..7cb5990b7ab 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md index a4ae83d96f6..5e9a4a417a3 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md index 5cd1299dba8..ff110fcf15a 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md index 04c70d45551..21c096fc876 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md index 47ed6b561ef..ecf6ea63396 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md index 0b8774aafbe..97952f7fa68 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md index 8050e669060..00ffcc57564 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md index cfcd42d0209..6f1453e98ac 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md @@ -40,86 +40,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md index 3f6f7f3d096..9847f98706d 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inlin
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md index a5f38f39f82..08516b805c0 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md index e5a713221e6..8b89d95b805 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md index 4545bcb09cd..5cbe52f8397 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md index 600a4d0c139..a3264057a02 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md index ed7dd90842e..8892f63f704 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md index 3bd2d6ee92f..3e849f178c2 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md index ee9d8f44a72..3cf2b2b54a0 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md index 274fec5ce64..5dd474ebd8e 100644 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md index dcc6e6e37bc..cefe2ad14e2 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md @@ -21,7 +21,7 @@ Recuerda que todas las funciones `cubic-bezier` comienzan con `p0` en (0, 0) y t # --instructions-- -Para ver el efecto de esta curva Bezier en acción, cambia la `animation-timing-function` del elemento con id de `red` a una función `cubic-bezier` con valores x1, y1, x2, y2 establecidos respectivamente en 0, 0, 0.58, 1. Esto hará que ambos elementos progresen a través de la animación de manera similar. +Para ver el efecto de esta curva de Bézier en acción, cambia el `animation-timing-function` del elemento con el id `red` a una función `cubic-bezier` con x1, y1, x2, y2 establecidos respectivamente como los valores `0, 0, 0.58, 1`. Esto hará que ambos elementos progresen a través de la animación de manera similar. # --hints-- diff --git a/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md index a27486c968a..526b524ce9e 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md @@ -11,9 +11,9 @@ dashedName: use-hex-code-for-specific-colors ¿Sabías que hay otras maneras de representar colores en CSS? Una de estas formas se llama código hexadecimal, o código hex (hex code) para abreviar. -Generalmente usamos decimales, o números de base 10, los cuales utilizan los símbolos del 0 al 9 para representar cada dígito. Los números hexadecimales (o hex) son números de base 16. Esto significa que utilizan dieciseis símbolos distintos. Al igual que en los números decimales, en hexadecimal los símbolos 0-9 representan los valores de cero a nueve. Luego A,B,C,D,E,F representan los valores de diez a quince. Todos estos símbolos juntos, de 0 a F, pueden representar un dígito en hexadecimal, lo que da un total de 16 valores posibles. Puedes encontrar más información sobre [los números hexadecimales aquí](https://www.freecodecamp.org/news/hexadecimal-number-system/). +Generalmente usamos decimales, o números de base 10, los cuales utilizan los símbolos del 0 al 9 para representar cada dígito. Los números hexadecimales (o hex) son números de base 16. Esto significa que utilizan dieciseis símbolos distintos. Al igual que en los números decimales, en hexadecimal los símbolos 0-9 representan los valores de cero a nueve. Luego A,B,C,D,E,F representan los valores de diez a quince. Todos estos símbolos juntos, de 0 a F, pueden representar un dígito en hexadecimal, lo que da un total de 16 valores posibles. Puedes encontrar más información acerca de los números hexadecimales aquí. -En CSS, podemos representar colores utilizando 6 dígitos hexadecimales, dos para los componentes de rojo (R), verde (G) y azul (B). Por ejemplo, `#000000` corresponde al color negro, y también es el valor más bajo posible. Puedes encontrar más información sobre [sistema de colores RGB aquí](https://www.freecodecamp.org/news/rgb-color-html-and-css-guide/#whatisthergbcolormodel). +En CSS, podemos representar colores utilizando 6 dígitos hexadecimales, dos para los componentes de rojo (R), verde (G) y azul (B). Por ejemplo, `#000000` corresponde al color negro, y también es el valor más bajo posible. Puedes encontrar más información acerca del sistema de colores RGB aquí. ```css body { diff --git a/curriculum/challenges/espanol/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/espanol/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md index 90bbf0e9bf5..d1661c684f9 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md @@ -11,11 +11,11 @@ dashedName: align-elements-using-the-justify-content-property Algunas veces los elementos flexibles dentro de un contenedor flexible no llenan todo el espacio del contenedor. Es común querer indicarle al CSS cómo alinear y espaciar los elementos flexibles de una determinada manera. Afortunadamente, la propiedad `justify-content` tiene varias opciones para hacer esto. Pero primero, hay que entender alguna terminología importante antes de revisar dichas opciones. -[Para más información acerca de las propiedades de flex-box](https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/) +Para más información acerca de las propiedades de flex-box, lee aquí -Recuerda que establecer un contenedor flexible como fila coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible establecido como columna coloca los elementos flexibles apilados verticalmente de arriba a abajo. Para cada uno, la dirección en la que están dispuestos los elementos flexibles se llama el **eje principal**. Para una fila, esta es una línea horizontal que recorta cada elemento. Y para una columna, el eje principal es una línea vertical a través de los elementos. +Recuerda que al establecer un contenedor flexible como fila, coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible establecido como columna ubica los elementos flexibles en una línea vertical de arriba a abajo. Para cada uno, la dirección en la que están alineados los elementos flexibles se llama **main axis**. Para una fila, esta es una línea horizontal que corta a través de cada elemento. Y para una columna, el main axis es una línea vertical que atraviesa los elementos. -Hay varias opciones para espaciar los elementos flexibles a lo largo de la línea que representa el eje principal. Uno de los más utilizados es `justify-content: center;`, el cual alinea hacia el centro todos los elementos flexibles dentro del contenedor flexible. Otras opciones incluyen: +Hay varias opciones sobre como espaciar los elementos flexibles a lo largo de la línea que representa al main axis. Uno de los más utilizados es `justify-content: center;`, el cual alinea hacia el centro todos los elementos flexibles dentro del contenedor flexible. Otras opciones incluyen:
  • flex-start: alinea los elementos con el inicio del contenedor flex. Para una fila, esto empuja los elementos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. Esta es la alineación predeterminada si no se especifica ningún tipo de justify-content.
  • flex-end: alinea los elementos con el final del contenedor flex. Para una fila, esto empuja los elementos a la derecha del contenedor. Para una columna, esto empuja los elementos a la parte inferior del contenedor.
  • space-between: alinea los elementos en el centro del eje principal, con un espacio extra entre los elementos. Los primeros y últimos elementos son empujados hasta el borde del contenedor flexible. Por ejemplo, en una fila el primer elemento está en el lado izquierdo del contenedor, el último elemento está en el lado derecho del contenedor, luego el espacio restante se distribuye uniformemente entre los demás elementos.
  • space-around: similar a space-between pero los primeros y últimos elementos no están fijados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos con la mitad de un espacio en ambos extremos del contenedor flexible.
  • space-evenly: Distribuye el espacio de manera uniforme entre los flex items con un espacio completo en cualquier extremo del flex container.
diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index 45026a132c3..f8aa0825687 100644 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -34,14 +34,14 @@ Soddisfa le storie utente e passa tutti i test qua sotto per completare il proge # --hints-- -Dovresti avere un elemento `header` con un `id` del valore `header`. +Dovresti avere un elemento `header` con un `id` del valore di `header`. ```js const el = document.getElementById('header') assert(!!el && el.tagName === 'HEADER') ``` -Dovresti avere un elemento `img` con un attributo `id` del valore `header-img`. +Dovresti avere un elemento `img` con un attributo `id` del valore di `header-img`. ```js const el = document.getElementById('header-img') @@ -69,7 +69,7 @@ const el = document.getElementById('header-img') assert(!!el && /^http/.test(el.src)) ``` -Dovresti avere un elemento `nav` con un `id` del valore `nav-bar`. +Dovresti avere un elemento `nav` con un `id` del valore di `nav-bar`. ```js const el = document.getElementById('nav-bar') @@ -111,7 +111,7 @@ els.forEach(el => { assert(els.length > 0) ``` -Dovresti avere un elemento `video` o `iframe` con un `id` del valore `video`. +Dovresti avere un elemento `video` o `iframe` con un `id` del valore di `video`. ```js const el = document.getElementById('video') @@ -133,14 +133,14 @@ if (sourceElement) { assert(el.hasAttribute('src')); ``` -Dovresti avere un elemento `form` con un attributo `id` del valore `form`. +Dovresti avere un elemento `form` con un attributo `id` del valore di `form`. ```js const el = document.getElementById('form') assert(!!el && el.tagName === 'FORM') ``` -Dovresti avere un elemento `input` con un `id` del valore `email`. +Dovresti avere un elemento `input` con un `id` del valore di `email`. ```js const el = document.getElementById('email') @@ -168,7 +168,7 @@ const el = document.getElementById('email') assert(!!el && el.type === 'email') ``` -Dovresti avere un elemento `input` con un `id` del valore `submit`. +Dovresti avere un elemento `input` con un `id` del valore di `submit`. ```js const el = document.getElementById('submit') diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md index a6ce8b2e330..772b402bde7 100644 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md @@ -28,7 +28,7 @@ Soddisfa le user story e passa tutti i test qua sotto per complerare questo prog # --hints-- -Dovrebbe esserci un elemento `main` con un `id` del valore `main`. +Dovrebbe esserci un elemento `main` con un `id` del valore di `main`. ```js const el = document.getElementById('main') @@ -46,7 +46,7 @@ const el5 = document.querySelector('#main #tribute-link') assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) ``` -Dovresti avere un elemento con un attributo `id` del valore `title`. +Dovresti avere un elemento con un attributo `id` del valore di `title`. ```js const el = document.getElementById('title') @@ -61,14 +61,14 @@ assert(!!el && el.innerText.length > 0) ``` -Dovrebbe esserci o un elemento `figure` o un elemento `div` con un attributo `id` del valore `img-div`. +Dovrebbe esserci o un elemento `figure` o un elemento `div` con un attributo `id` del valore di `img-div`. ```js const el = document.getElementById('img-div') assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) ``` -Dovrebbe esserci un elemento `img` con un `id` del valore `image`. +Dovrebbe esserci un elemento `img` con un `id` del valore di `image`. ```js const el = document.getElementById('image') @@ -103,7 +103,7 @@ const el = document.getElementById('img-caption') assert(!!el && el.innerText.length > 0) ``` -Dovrebbe esserci un elemento con un attributo `id` del valore `tribute-info`. +Dovrebbe esserci un elemento con un attributo `id` del valore di `tribute-info`. ```js const el = document.getElementById('tribute-info') @@ -117,7 +117,7 @@ const el = document.getElementById('tribute-info') assert(!!el && el.innerText.length > 0) ``` -Dovrebbe esserci un elemento `a` con un `id` del valore `tribute-link`. +Dovrebbe esserci un elemento `a` con un `id` del valore di `tribute-link`. ```js const el = document.getElementById('tribute-link') diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md index 0a55b7ccb55..a5458ae077e 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md @@ -27,29 +27,11 @@ console.log(myBreed); La stringa `Doberman` sarà visualizzata nella console. -Un altro modo per utilizzare questo concetto è quando il nome della proprietà viene ottenuto dinamicamente durante l'esecuzione del programma, come segue: - -```js -const someObj = { - propName: "John" -}; - -function propPrefix(str) { - const s = "prop"; - return s + str; -} - -const someProp = propPrefix("Name"); -console.log(someObj[someProp]); -``` - -`someProp` avrà il valore della stringa `propName` e la stringa `John` sarà visualizzata nella console. - Nota che *non* usiamo virgolette attorno al nome della variabile quando la usiamo per accedere alla proprietà perché stiamo usando il *valore* della variabile, non il *nome*. # --instructions-- -Dai alla variabile `playerNumber` il valore di `16`. Quindi, utilizza la variabile per cercare il nome del giocatore e assegnarla a `player`. +Dai alla variabile `playerNumber` il valore di `16`. Quindi, utilizza la variabile per cercare il nome del giocatore e assegnarlo a `player`. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md index 4f41ff0391a..2af02bbd0e4 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md @@ -34,14 +34,14 @@ Soddisfa le user story e supera tutti i test qui sotto per completare questo pro # --hints-- -Dovresti avere un elemento `header` con un `id` del valore `header`. +Dovresti avere un elemento `header` con un `id` del valore di `header`. ```js const el = document.getElementById('header') assert(!!el && el.tagName === 'HEADER') ``` -Dovresti avere un elemento `img` con un attributo `id` del valore `header-img`. +Dovresti avere un elemento `img` con un attributo `id` del valore di `header-img`. ```js const el = document.getElementById('header-img') @@ -69,7 +69,7 @@ const el = document.getElementById('header-img') assert(!!el && /^http/.test(el.src)) ``` -Dovresti avere un elemento `nav` con un `id` del valore `nav-bar`. +Dovresti avere un elemento `nav` con un `id` del valore di `nav-bar`. ```js const el = document.getElementById('nav-bar') @@ -111,7 +111,7 @@ els.forEach(el => { assert(els.length > 0) ``` -Dovresti avere un elemento `video` o `iframe` con un `id` del valore `video`. +Dovresti avere un elemento `video` o `iframe` con un `id` del valore di `video`. ```js const el = document.getElementById('video') @@ -133,14 +133,14 @@ if (sourceElement) { assert(el.hasAttribute('src')); ``` -Dovresti avere un elemento `form` con un attributo `id` del valore `form`. +Dovresti avere un elemento `form` con un attributo `id` del valore di `form`. ```js const el = document.getElementById('form') assert(!!el && el.tagName === 'FORM') ``` -Dovresti avere un elemento `input` con un `id` del valore `email`. +Dovresti avere un elemento `input` con un `id` del valore di `email`. ```js const el = document.getElementById('email') @@ -168,7 +168,7 @@ const el = document.getElementById('email') assert(!!el && el.type === 'email') ``` -Dovresti avere un elemento `input` con un `id` del valore `submit`. +Dovresti avere un elemento `input` con un `id` del valore di `submit`. ```js const el = document.getElementById('submit') diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md index 0fbb41cdad6..fed0080170e 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md @@ -18,16 +18,16 @@ dashedName: build-a-survey-form 1. All'interno dell'elemento form, devi inserire obbligatoriamente (**required**) il nome in un campo di `input` che ha un `id` con il valore `name` e un `type` con il valore `text` 1. All'interno dell'elemento form, devi inserire obbligatoriamente (**required**) l'email in un campo di `input` che ha un `id` con il valore `email` 1. Se inserisci una email che non è formattata correttamente, vedrai un errore di validazione HTML5 -1. All'interno del modulo, puoi inserire un numero in un campo di `input` con un `id` del valore `number` +1. All'interno del modulo, puoi inserire un numero in un campo di `input` con un `id` del valore di `number` 1. Se inserisci valori non numerici nell'input del numero, vedrai un errore di validazione HTML5 1. Se immetti un numero al di fuori del range del campo del numero, che hai definito con gli attributi `min` e `max`, vedrai un errore di validazione HTML5 1. Per le caselle di input per il nome, l'email e il numero, puoi vedere gli elementi `label` corrispondenti nel modulo che descrivono lo scopo di ogni campo con i seguenti attributi id: `id="name-label"`, `id="email-label"` e `id="number-label"` 1. Per i campi di input di nome, e-mail e numero, puoi vedere il testo del placeholder che fornisce una descrizione o delle istruzioni per ogni campo -1. Dentro l'elemento form, dovresti avere un elemento `select` a tendina con un `id` del valore `dropdown` e almeno due opzioni tra cui scegliere +1. Dentro l'elemento form, dovresti avere un elemento `select` a tendina con un `id` del valore di `dropdown` e almeno due opzioni tra cui scegliere 1. Dentro l'elemento form, puoi selezionare una opzione da un gruppo di almeno due pulsanti di opzione che sono raggruppati con l'attributo `name` 1. All'interno dell'elemento form, puoi selezionare diversi campi da una serie di caselle di spunta, ciascuno dei quali deve avere un attributo `value` 1. All'interno dell'elemento form, deve essere un elemento `textarea` per commenti aggiuntivi -1. All'interno dell'elemento form, deve essere presente un pulsante con un `id` del valore `submit` per inviare tutti gli input +1. All'interno dell'elemento form, deve essere presente un pulsante con un `id` del valore di `submit` per inviare tutti gli input Soddisfa le user story e passa tutti i test per completare questo progetto. Usa il tuo stile personale. Buon divertimento! diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md index 1e06bcd1aac..4f78457163e 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md @@ -13,8 +13,8 @@ dashedName: build-a-tribute-page **User story:** 1. La tua Tribute Page dovrebbe avere un elemento `main` con un corrispondente `id` di `main`, che contiene tutti gli altri elementi -1. Dovresti vedere un elemento con un attributo `id` del valore `title`, che contiene una stringa (cioè del testo) che descrive il soggetto della pagina tributo (per esempio "Dr. Normal Borlaug") -1. Dovresti vedere o un elemento `figure` o un elemento `div` con un attributo `id` del valore `img-div` +1. Dovresti vedere un elemento con un attributo `id` del valore di `title`, che contiene una stringa (cioè del testo) che descrive il soggetto della pagina tributo (per esempio "Dr. Normal Borlaug") +1. Dovresti vedere o un elemento `figure` o un elemento `div` con un attributo `id` del valore di `img-div` 1. Dentro l'elemento `#img-div`, dovresti vedere un elemento `img` con un corrispondente `id="image"` 1. Dentro l'elemento `#img-div`, dovresti vedere un elemento con un corrispondente attributo `id="img-caption"` che contiene del testo che descrive l'immagine mostrata in `#img-div` 1. Dovresti vedere un elemento con un corrispondente attributo `id="tribute-info"` contenente del testo che descrive il soggetto della pagina tributo @@ -28,7 +28,7 @@ Soddisfa le user story e passa tutti i test qui sotto per completare questo prog # --hints-- -Dovrebbe esserci un elemento `main` con un `id` del valore `main`. +Dovrebbe esserci un elemento `main` con un `id` del valore di `main`. ```js const el = document.getElementById('main') @@ -46,7 +46,7 @@ const el5 = document.querySelector('#main #tribute-link') assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) ``` -Dovresti avere un elemento con un attributo `id` del valore `title`. +Dovresti avere un elemento con un attributo `id` del valore di `title`. ```js const el = document.getElementById('title') @@ -61,14 +61,14 @@ assert(!!el && el.innerText.length > 0) ``` -Dovrebbe esserci o un elemento `figure` o un elemento `div` con un attributo `id` del valore `img-div`. +Dovrebbe esserci o un elemento `figure` o un elemento `div` con un attributo `id` del valore di `img-div`. ```js const el = document.getElementById('img-div') assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) ``` -Dovrebbe esserci un elemento `img` con un `id` del valore `image`. +Dovrebbe esserci un elemento `img` con un `id` del valore di `image`. ```js const el = document.getElementById('image') @@ -103,7 +103,7 @@ const el = document.getElementById('img-caption') assert(!!el && el.innerText.length > 0) ``` -Dovrevve esserci un elemento con un attributo `id` del valore `tribute-info`. +Dovrevve esserci un elemento con un attributo `id` del valore di `tribute-info`. ```js const el = document.getElementById('tribute-info') @@ -117,7 +117,7 @@ const el = document.getElementById('tribute-info') assert(!!el && el.innerText.length > 0) ``` -Dovrebbe esserci un elemento `a` con un `id` del valore `tribute-link`. +Dovrebbe esserci un elemento `a` con un `id` del valore di `tribute-link`. ```js const el = document.getElementById('tribute-link') diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md index 041ab093445..878aec0f06b 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md @@ -25,13 +25,13 @@ Dovresti assegnare al secondo `fieldset` un attributo `name` adeguato. _Suggerim assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name); ``` -Dovresti assegnare al primo elemento `ul` un attributo `class` del valore `answers-list`. +Dovresti assegnare al primo elemento `ul` un attributo `class` del valore di `answers-list`. ```js assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list'); ``` -Dovresti assegnare al secondo elemento `ul` un attributo `class` del valore `answers-list`. +Dovresti assegnare al secondo elemento `ul` un attributo `class` del valore di `answers-list`. ```js assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md index 98f63d4c8fa..15057065471 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md @@ -61,25 +61,25 @@ Dovresti annidare un elemento `input` all'interno del quarto elemento `label`. assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input')); ``` -Dovresti dare al primo `input` un `type` del valore `radio`. +Dovresti dare al primo `input` un `type` del valore di `radio`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio'); ``` -Dovresti dare al secondo `input` un `type` del valore `radio`. +Dovresti dare al secondo `input` un `type` del valore di `radio`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio'); ``` -Dovresti dare al terzo `input` un `type` del valore `radio`. +Dovresti dare al terzo `input` un `type` del valore di `radio`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio'); ``` -Dovresti dare al quarto `input` un `type` del valore `radio`. +Dovresti dare al quarto `input` un `type` del valore di `radio`. ```js assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md index e2c2cbe7aa2..02a5ded944d 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md @@ -9,7 +9,7 @@ dashedName: step-34 La sezione finale di questo quiz conterrà un menu a discesa e una casella di testo. -Inizia annidando un `div` con un attributo `class` del valore `formrow` e annida quattro elementi `div` all'interno di esso, alternando i loro attributi `class` con `question-block` e `answer`. +Inizia annidando un `div` con un attributo `class` del valore di `formrow` e annida quattro elementi `div` all'interno di esso, alternando i loro attributi `class` con `question-block` e `answer`. # --hints-- @@ -19,7 +19,7 @@ Dovresti aggiungere un elemento `div` all'interno dell'ultimo elemento `section` assert.exists(document.querySelector('section:nth-of-type(3) > div')); ``` -Dovresti dare al primo `div` un attributo `class` del valore `formrow`. +Dovresti dare al primo `div` un attributo `class` del valore di `formrow`. ```js assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow'); @@ -37,25 +37,25 @@ Dovresti annidare quattro elementi `div` all'interno di `div.formrow`. assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4); ``` -Dovresti dare al primo `div` annidato un attributo `class` del valore `question-block`. +Dovresti dare al primo `div` annidato un attributo `class` del valore di `question-block`. ```js assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block'); ``` -Dovresti dare al secondo `div` annidato un attributo `class` del valore `answer`. +Dovresti dare al secondo `div` annidato un attributo `class` del valore di `answer`. ```js assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer'); ``` -Dovresti dare al terzo `div` annidato un attributo `class` del valore `question-block`. +Dovresti dare al terzo `div` annidato un attributo `class` del valore di `question-block`. ```js assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block'); ``` -Dovresti dare al quarto `div` annidato un attributo `class` del valore `answer`. +Dovresti dare al quarto `div` annidato un attributo `class` del valore di `answer`. ```js assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md index 2609d1bd180..f0da00f4921 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md @@ -9,7 +9,7 @@ dashedName: step-36 All'interno del primo elemento `div.answer`, annida un elemento `select` obbligatorio con tre elementi `option`. -Dai al primo elemento `option` un attributo `value` del valore `""` e il testo `Select an option`. Dai al secondo elemento `option` un `value` del valore `yes` e il testo `Yes`. Dai al terzo elemento `option` un `value` del valore `no` e il testo `No`. +Dai al primo elemento `option` un attributo `value` del valore di `""` e il testo `Select an option`. Dai al secondo elemento `option` un `value` del valore di `yes` e il testo `Yes`. Dai al terzo elemento `option` un `value` del valore di `no` e il testo `No`. # --hints-- @@ -25,7 +25,7 @@ Dovresti annidare tre elementi `option` all'interno dell'elemento `select`. assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3); ``` -Dovresti dare al primo elemento `option` un `value` del valore `""`. +Dovresti dare al primo elemento `option` un `value` del valore di `""`. ```js assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, ''); @@ -37,7 +37,7 @@ Dovresti dare al primo elemento `option` il testo `Select an option`. assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option'); ``` -Dovresti dare al secondo elemento `option` un `value` del valore `yes`. +Dovresti dare al secondo elemento `option` un `value` del valore di `yes`. ```js assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes'); @@ -49,7 +49,7 @@ Dovresti dare al secondo elemento `option` il testo `Yes`. assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes'); ``` -Dovresti dare al terzo elemento `option` un `value` del valore `no`. +Dovresti dare al terzo elemento `option` un `value` del valore di `no`. ```js assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md index 0dc62e13635..ae6b34b7b01 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md @@ -29,7 +29,7 @@ Dovresti inserire il pulsante di invio dopo l'ultimo elemento `section`. assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input')); ``` -Dovresti dare al pulsante di invio un `type` del valore `submit`. +Dovresti dare al pulsante di invio un `type` del valore di `submit`. ```js assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md index dbae50d29fd..e0291a0c566 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md @@ -25,7 +25,7 @@ const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); assert.exists(gs('nav li') || gs('nav > ul > li')); ``` -Dovresti dare agli elementi `li` una proprietà `color` del valore `#dfdfe2`. +Dovresti dare agli elementi `li` una proprietà `color` del valore di `#dfdfe2`. ```js const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); @@ -33,7 +33,7 @@ const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color; assert.equal(color, 'rgb(223, 223, 226)'); ``` -Dovresti dare agli elementi `li` una proprietà `margin` del valore `0 0.2rem`. +Dovresti dare agli elementi `li` una proprietà `margin` del valore di `0 0.2rem`. ```js const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md index 9b06fb03699..858c15770e9 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -Al di sotto dell'elemento `.header`, crea un nuovo elemento `div` con un attributo `id` del valore `gallery`. +Al di sotto dell'elemento `.header`, crea un nuovo elemento `div` con un attributo `id` del valore di `gallery`. In quest'elemento `#gallery`, crea dieci elementi `img`. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md index 7484e8c28eb..57aaa0d6546 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md @@ -19,21 +19,21 @@ assert.equal(bb1Style?.width, '10%'); assert.equal(bb1Style?.height, '70%'); ``` -Dovresti dare all'elemento `.bb1` una proprietà `display` del valore `flex`. +Dovresti dare all'elemento `.bb1` una proprietà `display` del valore di `flex`. ```js const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); assert.equal(bb1Style?.display, 'flex'); ``` -Dovresti dare all'elemento `.bb1` una proprietà `flex-direction` del valore `column`. +Dovresti dare all'elemento `.bb1` una proprietà `flex-direction` del valore di `column`. ```js const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); assert.equal(bb1Style?.flexDirection, 'column'); ``` -Dovresti dare all'elemento `.bb1` una proprietà `align-items` del valore `center`. +Dovresti dare all'elemento `.bb1` una proprietà `align-items` del valore di `center`. ```js const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md index 51aecb5dada..2681684b6c4 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md @@ -9,7 +9,7 @@ dashedName: step-56 La maggior parte dei browser applica le proprie proprietà e valori CSS predefiniti per diversi elementi. Se guardi attentamente, potresti essere notare che l'`input` del file è più piccolo del testo degli altri elementi `input`. L'impostazione predefinita di un `padding` è `1px 2px` per gli elementi `input` in cui puoi scrivere. -Usando un altro selettore di attributi, agisci sullo stile degli `input` con un attributo `type` del valore `file` per ottenere lo stesso padding degli altri elementi `input`. +Usando un altro selettore di attributi, agisci sullo stile degli `input` con un attributo `type` del valore di `file` per ottenere lo stesso padding degli altri elementi `input`. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md index 1aee5edc92a..9cfa2820c05 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -Sotto l'elemento `back-wall`, crea un `div` con un attributo `class` del valore `characters`. Qui creerai le figure del tuo dipinto. +Sotto l'elemento `back-wall`, crea un `div` con un attributo `class` del valore di `characters`. Qui creerai le figure del tuo dipinto. # --hints-- diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md index 35d35b57a60..0ebe043c101 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md @@ -44,12 +44,12 @@ assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhi
-
- --fcc-editable-region-- +
+ --fcc-editable-region-- - --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/60b69a66b6ddb80858c51583.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md index 237d042ae96..28e1b373c27 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -56,13 +56,13 @@ assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id
-
-
- --fcc-editable-region-- +
+
+ --fcc-editable-region-- - --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/60b69a66b6ddb80858c51584.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md index a69a3373b6e..438338bf4d3 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md @@ -46,18 +46,18 @@ assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('righ
-
-
-
-
- --fcc-editable-region-- +
+
+
+
+ --fcc-editable-region-- - --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/60b69a66b6ddb80858c51585.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md index 4545bd22192..b7bf91c9412 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md @@ -38,21 +38,21 @@ assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c51586.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md index bbcb0308b50..f8007087722 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Usando un selettore `id`, crea una regola per l'elemento `offwhite-character`. Dagli una proprietà `width` di `300px`, una proprietà `height` di `550px` e un `background-color` del valore `GhostWhite`. +Usando un selettore `id`, crea una regola per l'elemento `offwhite-character`. Dagli una proprietà `width` di `300px`, una proprietà `height` di `550px` e un `background-color` del valore di `GhostWhite`. # --hints-- @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgrou
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md index 0e857281d37..7f4dfb0c9fd 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md index 5e29dfaffa7..a4837d2bdeb 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -7,7 +7,7 @@ dashedName: step-18 # --description-- -Agisci sullo stile dell'elemento `white-hat` con un selettore `id`. Assegnagli delle proprietà `width` e `height` con il valore `0` e una proprietà `border-style` del valore `solid`. +Agisci sullo stile dell'elemento `white-hat` con un selettore `id`. Assegnagli delle proprietà `width` e `height` con il valore `0` e una proprietà `border-style` del valore di `solid`. # --hints-- @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md index 2d1188b3f2a..60d6a5ea22c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md index 952420fc857..5f06b3c0482 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md index 701d988af03..fc4b1688a45 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -7,7 +7,7 @@ dashedName: step-21 # --description-- -Dai al cappello una proprietà `position` del valore `absolute`, una proprietà `top` con il valore `-140px` e una proprietà `left` di `0`. +Dai al cappello una proprietà `position` del valore di `absolute`, una proprietà `top` con il valore `-140px` e una proprietà `left` di `0`. # --hints-- @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md index a9fe3f7a887..d42d080c06f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md index 7125a342265..de64ce902ee 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -7,7 +7,7 @@ dashedName: step-23 # --description-- -Dai alla maschera una proprietà `position` con il valore `absolute` e delle proprietà `top` e `left` del valore `0`. +Dai alla maschera una proprietà `position` con il valore `absolute` e delle proprietà `top` e `left` del valore di `0`. # --hints-- @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md index adf861450d6..40709096ca1 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md index c4b007434f3..8517aec5ada 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md index 38c7ac76874..b6049616dc8 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -7,7 +7,7 @@ dashedName: step-26 # --description-- -Adesso spostalo con una proprietà `position` del valore `absolute`, una proprietà `top` di `50px` e una proprietà `left` di `125px`. +Adesso spostalo con una proprietà `position` del valore di `absolute`, una proprietà `top` di `50px` e una proprietà `left` di `125px`. # --hints-- @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md index 9b3b511f93f..957e8cf20d3 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md index 3744bd25b32..3b7e6be136c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md index 801423f0e6f..7c5c672f906 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md @@ -35,23 +35,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBotto
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md index 386bc8d8c25..ec5dfc5656c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md index 8476e3b0867..f2e9d45906a 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -50,23 +50,23 @@ assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md index 04d2c48a4e5..e625abb5bab 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md index 9e57fd1b5ae..6d63a36bc27 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md index a0f3b419042..7a53485632f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -38,26 +38,26 @@ assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c51599.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md index c9e971cbabb..aa7e55801e4 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md @@ -50,28 +50,28 @@ assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('i
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md index cc26dc62379..3b3d9b19995 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -48,32 +48,32 @@ assert(second?.classList?.contains('right'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md index 5aeec6e54a4..eec0f6e2a70 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md @@ -48,35 +48,35 @@ for (const icon of icons) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md index d2a58a9ad15..6c390c58ccc 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md index 4598058c1fa..db4b3447618 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md index 55cadb44b37..950a552f25c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md index bd6afa40fa5..d40fed2d4a4 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md index 3af61f20d08..7b490df562f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md index fd8b0327ec2..30fdd42ec30 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md index fbae739b6c4..3387cb79a3f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md index 1b0c3ff7040..d17e0dc8643 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md index 49b87ba3a04..be7a596276e 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md index ae87620da05..7eff2a76821 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md index d38b4f25a8f..46af4b05f54 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md index 8a9ecc7b07b..a0f4a746396 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -38,38 +38,38 @@ assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md index 4c45e6a8991..4bb815dce2b 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` 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 index 2c881cf0d4f..845a74686fd 100644 --- 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 @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md index f822f1bd4a6..2da640f6d7d 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md index b0dba91351e..b392f8c45b1 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md index fc3950ababf..fb22c9b0918 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -38,41 +38,41 @@ assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --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/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md index ed102a885c3..f9ae9790b3a 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md @@ -56,43 +56,43 @@ assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --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/60b69a66b6ddb80858c515af.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md index 5d65dc08127..639ea58296f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -46,48 +46,48 @@ assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md index 1a10ba23d26..e29d6a759ea 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md @@ -41,51 +41,51 @@ for (const div of divDivDiv) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md index 545986b30cd..ba9a96b3726 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -70,82 +70,82 @@ assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md index 80745fabd58..16b62e8f82c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md @@ -47,88 +47,88 @@ assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- -
-
- -
- --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --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/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md index 244043a6f05..c79fa1ed9c3 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.background
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md index 455494e025d..2f36e7d3862 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md index 04bce0b5a28..c222ae94d70 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md index 8566cde3394..6f7102ac3ca 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadiu
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md index b980872a661..9d164ffc107 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md index b0f0f1592ca..fbc5b7ba273 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md index da091f77271..5fa1c556c59 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md index d65b14a8b36..8f3783aed11 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` 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 index 2fedcf7ebd3..b0cb6f753b9 100644 --- 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 @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md index 939df92bf96..6644c8a9ed7 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md index 8f41964738c..a80647e6f89 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'a
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md index 9f01fc397d5..5bd41421d94 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md index 08a8c45c6fb..113eb4c99cd 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md index ccc6788a930..ad09d7a70ce 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md index 4abd44e9047..0ef75e9198d 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md index 717cb7ea7ba..0fcc36e3864 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md index f414495b17b..c61028028bf 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md index 133d2fa79ea..6f12dcfd677 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md index 74384851ff0..5ab79e4301c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md index 3c37c90fa5f..1d5c084d256 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md @@ -40,86 +40,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md index 4562e8b8be9..5432579773d 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inlin
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md index 3d1b8eb205a..e9e5618e8bd 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md index 2be677c9fd6..73b6eb0fcf5 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md index d97a7b9b680..cb72583b2d2 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md index 4f7b36f2f66..53d1968732f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md index a7a386e6b36..cdaa7ea5061 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md index 4e9c6b9e491..b74d54ac5ef 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md index d996b1648b1..872912b5b61 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md index ffc16bce106..ae8713a4af3 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md index c11940cb474..fec853bd2ef 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md @@ -7,7 +7,7 @@ dashedName: step-7 # --description-- -Sotto l'elemento `div` esistente, aggiungi un nuovo elemento `div` con un attributo `class` del valore `table-wrap`. Questo sarà il contenitore per le tue tabelle. +Sotto l'elemento `div` esistente, aggiungi un nuovo elemento `div` con un attributo `class` del valore di `table-wrap`. Questo sarà il contenitore per le tue tabelle. Al suo interno, aggiungi tre elementi `table`. Userai il CSS per rendere questi elementi una singola tabella, ma utilizzare tabelle separate aiuterà i lettori di schermo a capire il flusso del documento. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md index 2bc2faa589a..5955f80ee56 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md @@ -7,7 +7,7 @@ dashedName: step-11 # --description-- -All'interno di ciascuno dei nuovi elementi `th`, annida un elemento `span` con l'attributo `class` del valore `sr-only year`. Assegna loro il seguente testo (in ordine): `2019`, `2020`e `2021`. +All'interno di ciascuno dei nuovi elementi `th`, annida un elemento `span` con l'attributo `class` del valore di `sr-only year`. Assegna loro il seguente testo (in ordine): `2019`, `2020`e `2021`. Dai al terzo elemento `th` l'attributo `class` con il valore `current`. diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md index c823ab551ea..1c5aa4ea776 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md @@ -34,63 +34,63 @@ dashedName: build-a-product-landing-page # --hints-- -`id` が `header` である `header` 要素が 1 つ必要です +`id` が `header` である `header` 要素が 1 つ必要です。 ```js const el = document.getElementById('header') assert(!!el && el.tagName === 'HEADER') ``` -`id` が `header-img` である `img` 要素が 1 つ必要です +`id` が `header-img` である `img` 要素が 1 つ必要です。 ```js const el = document.getElementById('header-img') assert(!!el && el.tagName === 'IMG') ``` -`#header-img` は `#header` の子孫要素である必要があります +`#header-img` は `#header` の子孫要素である必要があります。 ```js const els = document.querySelectorAll('#header #header-img') assert(els.length > 0) ``` -`#header-img` には `src` 属性が必要です +`#header-img` には `src` 属性が必要です。 ```js const el = document.getElementById('header-img') assert(!!el && !!el.src) ``` -`#header-img` の `src` の値は (`http` から始まる) 有効な URL である必要があります +`#header-img` の `src` の値は (`http` から始まる) 有効な URL である必要があります。 ```js const el = document.getElementById('header-img') assert(!!el && /^http/.test(el.src)) ``` -`id` が `nav-bar` である `nav` 要素が 1 つ必要です +`id` が `nav-bar` である `nav` 要素が 1 つ必要です。 ```js const el = document.getElementById('nav-bar') assert(!!el && el.tagName === 'NAV') ``` -`#nav-bar` は `#header` の子孫要素である必要があります +`#nav-bar` は `#header` の子孫要素である必要があります。 ```js const els = document.querySelectorAll('#header #nav-bar') assert(els.length > 0) ``` -`#nav-bar` の中に最低 3 つの `.nav-link` 要素が必要です +`#nav-bar` の中に最低 3 つの `.nav-link` 要素が必要です。 ```js const els = document.querySelectorAll('#nav-bar .nav-link') assert(els.length >= 3) ``` -各 `.nav-link` 要素には `href` 属性が必要です +各 `.nav-link` 要素には `href` 属性が必要です。 ```js const els = document.querySelectorAll('.nav-link') @@ -100,7 +100,7 @@ els.forEach(el => { assert(els.length > 0) ``` -各 `.nav-link` 要素は、ランディングページ内の対応する要素にリンクされている必要があります (対応する要素の id (例えば `#footer`) が値に設定された `href` を持つ必要があります。) +各 `.nav-link` 要素は、ランディングページ内の対応する要素にリンクされている必要があります (対応する要素の id (例えば `#footer`) が値に設定された `href` を持つ必要があります) 。 ```js const els = document.querySelectorAll('.nav-link') @@ -111,14 +111,14 @@ els.forEach(el => { assert(els.length > 0) ``` -`id` が `video` である、`video` または `iframe` 要素が 1 つ必要です +`id` が `video` である、`video` または `iframe` 要素が 1 つ必要です。 ```js const el = document.getElementById('video') assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) ``` -`#video` には `src` 属性が必要です +`#video` には `src` 属性が必要です。 ```js let el = document.getElementById('video') @@ -133,77 +133,77 @@ if (sourceElement) { assert(el.hasAttribute('src')); ``` -`id` が `form` である `form` 要素が 1 つ必要です +`id` が `form` である `form` 要素が 1 つ必要です。 ```js const el = document.getElementById('form') assert(!!el && el.tagName === 'FORM') ``` -`id` の値が `email` に設定されている `input` 要素が 1 つ必要です +`id` の値が `email` に設定されている `input` 要素が 1 つ必要です。 ```js const el = document.getElementById('email') assert(!!el && el.tagName === 'INPUT') ``` -`#email` は `#form` の子孫要素である必要があります +`#email` は `#form` の子孫要素である必要があります。 ```js const els = document.querySelectorAll('#form #email') assert(els.length > 0) ``` -`#email` は、プレイスホルダーテキストが設定された `placeholder` 属性を持つ必要があります +`#email` は、プレイスホルダーテキストが設定された `placeholder` 属性を持つ必要があります。 ```js const el = document.getElementById('email') assert(!!el && !!el.placeholder && el.placeholder.length > 0) ``` -`#email` は、`type` を `email` に設定することによって、HTML5 のバリデーションが使用されている必要があります +`#email` は、`type` を `email` に設定することによって、HTML5 のバリデーションが使用されている必要があります。 ```js const el = document.getElementById('email') assert(!!el && el.type === 'email') ``` -`id` が `submit` である `input` 要素が 1 つ必要です +`id` が `submit` である `input` 要素が 1 つ必要です。 ```js const el = document.getElementById('submit') assert(!!el && el.tagName === 'INPUT') ``` -`#submit` は `#form` の子孫要素である必要があります +`#submit` は `#form` の子孫要素である必要があります。 ```js const els = document.querySelectorAll('#form #submit') assert(els.length > 0) ``` -`#submit` は `type` が `submit` に設定されている必要があります +`#submit` は `type` が `submit` に設定されている必要があります。 ```js const el = document.getElementById('submit') assert(!!el && el.type === 'submit') ``` -`#form` の `action` 属性には `https://www.freecodecamp.com/email-submit` を設定する必要があります +`#form` の `action` 属性には `https://www.freecodecamp.com/email-submit` を設定する必要があります。 ```js const el = document.getElementById('form') assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') ``` -`#email` の `name` 属性は `email` である必要があります +`#email` の `name` 属性は `email` である必要があります。 ```js const el = document.getElementById('email') assert(!!el && el.name === 'email') ``` -`#nav-bar` は常にビューポートの上部にある必要があります +`#nav-bar` は常にビューポートの上部にある必要があります。 ```js (async () => { @@ -243,7 +243,7 @@ assert(!!el && el.name === 'email') })(); ``` -プロダクトランディングページに、少なくとも 1 つのメディアクエリが使われている必要があります +プロダクトランディングページには、少なくとも 1 つのメディアクエリが使われている必要があります。 ```js const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) @@ -251,7 +251,7 @@ const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); ``` -プロダクトランディングページに、少なくとも 1 つの CSS フレックスボックスが使われている必要があります +プロダクトランディングページには、少なくとも 1 つの CSS フレックスボックスが使われている必要があります。 ```js const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() @@ -281,7 +281,7 @@ assert(usesFlex) - + Product Landing Page diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md index 859923bd29a..cbef61b930f 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md @@ -35,84 +35,84 @@ dashedName: build-a-survey-form # --hints-- -`id` の値が `title` に設定されている `h1` 要素が 1 つ必要です +`id` の値が `title` に設定されている `h1` 要素が 1 つ必要です。 ```js const el = document.getElementById('title') assert(!!el && el.tagName === 'H1') ``` -`#title` は空ではないようにしてください +`#title` が空でないようにしてください。 ```js const el = document.getElementById('title') assert(!!el && el.innerText.length > 0) ``` -`id` が `description` である `p` 要素が 1 つ必要です +`id` が `description` である `p` 要素が 1 つ必要です。 ```js const el = document.getElementById('description') assert(!!el && el.tagName === 'P') ``` -`#description` が空でないようにしてください +`#description` が空でないようにしてください。 ```js const el = document.getElementById('description') assert(!!el && el.innerText.length > 0) ``` -`id` の値が `survey-form` に設定されている `form` 要素が 1 つ必要です +`id` の値が `survey-form` に設定されている `form` 要素が 1 つ必要です。 ```js const el = document.getElementById('survey-form') assert(!!el && el.tagName === 'FORM') ``` -`id` の値が `name` に設定されている `input` 要素が 1 つ必要です +`id` の値が `name` に設定されている `input` 要素が 1 つ必要です。 ```js const el = document.getElementById('name') assert(!!el && el.tagName === 'INPUT') ``` -`#name` の `type` の値は `text` に設定されている必要があります +`#name` の `type` の値は `text` に設定されている必要があります。 ```js const el = document.getElementById('name') assert(!!el && el.type === 'text') ``` -`#name` の入力が必須である必要があります +`#name` の入力が必須である必要があります。 ```js const el = document.getElementById('name') assert(!!el && el.required) ``` -`#name` は `#survey-form` の子孫要素である必要があります +`#name` は `#survey-form` の子孫要素である必要があります。 ```js const el = document.querySelector('#survey-form #name') assert(!!el) ``` -`id` の値が `email` に設定されている `input` 要素が 1 つ必要です +`id` の値が `email` に設定されている `input` 要素が 1 つ必要です。 ```js const el = document.getElementById('email') assert(!!el && el.tagName === 'INPUT') ``` -`#email` の `type` の値は `email` に設定されている必要があります +`#email` の `type` の値は `email` に設定されている必要があります。 ```js const el = document.getElementById('email') assert(!!el && el.type === 'email') ``` -`#email` の入力が必須である必要があります +`#email` の入力が必須である必要があります。 ```js const el = document.getElementById('email') @@ -126,161 +126,161 @@ const el = document.querySelector('#survey-form #email') assert(!!el) ``` -`id` の値が `number` に設定されている `input` 要素が 1 つ必要です +`id` の値が `number` に設定されている `input` 要素が 1 つ必要です。 ```js const el = document.getElementById('number') assert(!!el && el.tagName === 'INPUT') ``` -`#number` は `#survey-form` の子孫要素である必要があります +`#number` は `#survey-form` の子孫要素である必要があります。 ```js const el = document.querySelector('#survey-form #number') assert(!!el) ``` -`#number` の `type` の値は `number` に設定されている必要があります +`#number` の `type` の値は `number` に設定されている必要があります。 ```js const el = document.getElementById('number') assert(!!el && el.type === 'number') ``` -`#number` は数値が設定された `min` 属性をもつ必要があります +`#number` は数値が設定された `min` 属性をもつ必要があります。 ```js const el = document.getElementById('number') assert(!!el && el.min && isFinite(el.min)) ``` -`#number` は数値が設定された `max` 属性をもつ必要があります +`#number` は数値が設定された `max` 属性をもつ必要があります。 ```js const el = document.getElementById('number') assert(!!el && el.max && isFinite(el.max)) ``` -`id` の値が `name-label` に設定されている `label` 要素が 1 つ必要です +`id` の値が `name-label` に設定されている `label` 要素が 1 つ必要です。 ```js const el = document.getElementById('name-label') assert(!!el && el.tagName === 'LABEL') ``` -`id` の値が `email-label` に設定されている `label` 要素が 1 つ必要です +`id` の値が `email-label` に設定されている `label` 要素が 1 つ必要です。 ```js const el = document.getElementById('email-label') assert(!!el && el.tagName === 'LABEL') ``` -`id` の値が `number-label` に設定されている `label` 要素が 1 つ必要です +`id` の値が `number-label` に設定されている `label` 要素が 1 つ必要です。 ```js const el = document.getElementById('number-label') assert(!!el && el.tagName === 'LABEL') ``` -`#name-label` が空でないようにしてください +`#name-label` には入力欄について説明するテキストを含める必要があります。 ```js const el = document.getElementById('name-label') assert(!!el && el.innerText.length > 0) ``` -`#email-label` が空でないようにしてください +`#email-label` には入力欄について説明するテキストを含める必要があります。 ```js const el = document.getElementById('email-label') assert(!!el && el.innerText.length > 0) ``` -`#number-label` が空でないようにしてください +`#number-label` には入力欄について説明するテキストを含める必要があります。 ```js const el = document.getElementById('number-label') assert(!!el && el.innerText.length > 0) ``` -`#name-label` は `#survey-form` の子孫要素である必要があります +`#name-label` は `#survey-form` の子孫要素である必要があります。 ```js const el = document.querySelector('#survey-form #name-label') assert(!!el) ``` -`#email-label` は `#survey-form` の子孫要素である必要があります +`#email-label` は `#survey-form` の子孫要素である必要があります。 ```js const el = document.querySelector('#survey-form #email-label') assert(!!el) ``` -`#number-label` は `#survey-form` の子孫要素である必要があります +`#number-label` は `#survey-form` の子孫要素である必要があります。 ```js const el = document.querySelector('#survey-form #number-label') assert(!!el) ``` -`#name` は `placeholder` 属性とその値をもつ必要があります +`#name` は `placeholder` 属性とその値をもつ必要があります。 ```js const el = document.getElementById('name') assert(!!el && !!el.placeholder && el.placeholder.length > 0) ``` -`#email` は `placeholder` 属性とその値をもつ必要があります +`#email` は `placeholder` 属性とその値をもつ必要があります。 ```js const el = document.getElementById('email') assert(!!el && !!el.placeholder && el.placeholder.length > 0) ``` -`#number` は `placeholder` 属性とその値をもつ必要があります +`#number` は `placeholder` 属性とその値をもつ必要があります。 ```js const el = document.getElementById('number') assert(!!el && !!el.placeholder && el.placeholder.length > 0) ``` -`id` の値が `dropdown` に設定されている `select` 欄が 1 つ必要です +`id` の値が `dropdown` に設定されている `select` 欄が 1 つ必要です。 ```js const el = document.getElementById('dropdown') assert(!!el && el.tagName === 'SELECT') ``` -`#dropdown` は少なくとも 2 つの選択可能な (無効化されていない) `option` 要素をもつ必要があります +`#dropdown` は少なくとも 2 つの選択可能な (無効化されていない) `option` 要素をもつ必要があります。 ```js const els = document.querySelectorAll('#dropdown option:not([disabled])') assert(els.length >= 2) ``` -`#dropdown` は `#survey-form` の子孫要素である必要があります +`#dropdown` は `#survey-form` の子孫要素である必要があります。 ```js const el = document.querySelector('#survey-form #dropdown') assert(!!el) ``` -`type` の値が `radio` (ラジオボタン) に設定されている `input` 要素が少なくとも 2 つ必要です +`type` の値が `radio` (ラジオボタン) に設定されている `input` 要素が少なくとも 2 つ必要です。 ```js const els = document.querySelectorAll('input[type="radio"]') assert(els.length >= 2) ``` -少なくとも 2 つのラジオボタンが `#survey-form` の子孫要素として必要です +少なくとも 2 つのラジオボタンが `#survey-form` の子孫要素として必要です。 ```js const els = document.querySelectorAll('#survey-form input[type="radio"]') assert(els.length >= 2) ``` -すべてのラジオボタンには `value` 属性とその値が必要です +すべてのラジオボタンには `value` 属性とその値が必要です。 ```js const els1 = document.querySelectorAll('input[type="radio"]') @@ -288,7 +288,7 @@ const els2 = document.querySelectorAll('input[type="radio"][value=""], input[typ assert(els1.length > 0 && els2.length === 0) ``` -すべてのラジオボタンには `name` 属性とその値が必要です +すべてのラジオボタンには `name` 属性とその値が必要です。 ```js const els1 = document.querySelectorAll('input[type="radio"]') @@ -296,7 +296,7 @@ const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type assert(els1.length > 0 && els2.length === 0) ``` -ラジオボタンの各グループには少なくとも 2 つのラジオボタンが必要です +ラジオボタンの各グループには少なくとも 2 つのラジオボタンが必要です。 ```js const radioButtons = document.querySelectorAll('input[type="radio"]'); @@ -318,14 +318,14 @@ groupKeys.forEach(key => { assert(groupKeys.length > 0) ``` -`type` の値が `checkbox` (チェックボックス) に設定されている `input` 要素が `#survey-form` の子孫要素として少なくとも 2 つ必要です +`type` の値が `checkbox` (チェックボックス) に設定されている `input` 要素が `#survey-form` の子孫要素として少なくとも 2 つ必要です。 ```js const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); assert(els.length >= 2) ``` -`#survey-form` 内のすべてのチェックボックスには `value` 属性とその値が必要です +`#survey-form` 内のすべてのチェックボックスには `value` 属性とその値が必要です。 ```js const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') @@ -333,28 +333,28 @@ const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][valu assert(els1.length > 0 && els2.length === 0) ``` -少なくとも 1 つの `textarea` 要素が `#survey-form` の子孫要素として必要です +少なくとも 1 つの `textarea` 要素が `#survey-form` の子孫要素として必要です。 ```js const el = document.querySelector('#survey-form textarea') assert(!!el) ``` -`id` の値が `submit` に設定されている、`input` または `button` 要素が 1 つ必要です +`id` の値が `submit` に設定されている、`input` または `button` 要素が 1 つ必要です。 ```js const el = document.getElementById('submit') assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) ``` -`#submit` は `type` が `submit` に設定されている必要があります +`#submit` は `type` が `submit` に設定されている必要があります。 ```js const el = document.getElementById('submit') assert(!!el && el.type === 'submit') ``` -`#submit` は `#survey-form` の子孫要素である必要があります +`#submit` は `#survey-form` の子孫要素である必要があります。 ```js const el = document.querySelector('#survey-form #submit') @@ -380,7 +380,7 @@ assert(!!el) - + Survey Form diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md index a473a2bc6f4..0f5b514122c 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md @@ -24,7 +24,7 @@ dashedName: build-a-technical-documentation-page 1. さらに、ナビゲーションバーには `nav-link` のクラスを持つリンク (`a`) 要素が含まれている必要があります。 これはクラス `main-section` の各要素に対応して 1 つずつ存在する必要があります 1. `#navbar` 内の `header` 要素は、ナビゲーションバーのどのリンク (`a`) 要素よりも前に置かれなければなりません 1. `nav-link` クラスの各要素には、各 `section` 内の `header` テキストに対応するテキストが含まれていなければなりません (例えば、もし "Hello world" セクション / ヘッダーがあるならば、ナビゲーションバーには "Hello world" というテキストを含む要素が必要です) -1. ナビゲーションバーの要素をクリックしたとき、ページは `main-doc` 要素の対応するセクションに移動しなければなりません (例えば、"Hello world" のテキストを含む `nav-link` 要素をクリックしたならば、その id を持ち、対応するヘッダーを含む `section` 要素に移動しなければなりません) +1. ナビゲーションバーの要素をクリックしたとき、ページは `#main-doc` 要素の、対応するセクションに移動しなければなりません (例えば、"Hello world" のテキストを含む `.nav-link` 要素をクリックしたならば、その id を持ち、対応するヘッダーを含む `section` 要素に移動しなければなりません) 1. 通常サイズのデバイス上 (ラップトップ、デスクトップ) では、`id="navbar"` を持つ要素は画面の左側に表示され、常にユーザーから見える状態にしなければなりません 1. 技術ドキュメントに、少なくとも 1 つのメディアクエリが使われている必要があります @@ -34,21 +34,21 @@ dashedName: build-a-technical-documentation-page # --hints-- -`id` の値が `main-doc` に設定されている `main` 要素が 1 つ必要です +`id` の値が `main-doc` に設定されている `main` 要素が 1 つ必要です。 ```js const el = document.getElementById('main-doc') assert(!!el) ``` -クラスが `main-section` である `section` 要素が少なくとも 5 つ必要です +クラスが `main-section` である `section` 要素が少なくとも 5 つ必要です。 ```js const els = document.querySelectorAll('#main-doc section') assert(els.length >= 5) ``` -`.main-section` の要素はすべて `section` 要素である必要があります +`.main-section` の要素はすべて `section` 要素である必要があります。 ```js const els = document.querySelectorAll('.main-section') @@ -58,14 +58,14 @@ els.forEach(el => { assert(els.length > 0) ``` -`#main-doc` の子孫要素として、少なくとも 5 つの `.main-section` 要素が必要です +`#main-doc` の子孫要素として、少なくとも 5 つの `.main-section` 要素が必要です。 ```js const els = document.querySelectorAll('#main-doc .main-section') assert(els.length >= 5) ``` -各 `.main-section` の最初の子要素は `header` 要素である必要があります +各 `.main-section` の最初の子要素は `header` 要素である必要があります。 ```js const els = document.querySelectorAll('.main-section') @@ -75,7 +75,7 @@ els.forEach(el => { assert(els.length > 0) ``` -どの `header` 要素も空でないようにしてください +どの `header` 要素も空でないようにしてください。 ```js const els = document.querySelectorAll('header') @@ -85,7 +85,7 @@ els.forEach(el => { assert(els.length > 0) ``` -すべての `.main-section` 要素が `id` を持つようにしてください +すべての `.main-section` 要素が `id` を持つようにしてください。 ```js const els = document.querySelectorAll('.main-section') @@ -106,21 +106,21 @@ els.forEach(el => { assert(els.length > 0) ``` -`.main-section` の要素内に、(合計で) 少なくとも 10 個の `p` 要素が必要です +`.main-section` の要素内に、(合計で) 少なくとも 10 個の `p` 要素が必要です。 ```js const els = document.querySelectorAll('.main-section p') assert(els.length >= 10) ``` -`.main-section` の子孫要素として、(合計で) 少なくとも 5 個の `code` 要素が必要です +`.main-section` の子孫要素として、(合計で) 少なくとも 5 個の `code` 要素が必要です。 ```js const els = document.querySelectorAll('.main-section code') assert(els.length >= 5) ``` -`.main-section` の子孫要素として、(合計で) 少なくとも 5 個の `li` 要素が必要です +`.main-section` の子孫要素として、(合計で) 少なくとも 5 個の `li` 要素が必要です。 ```js const els = document.querySelectorAll('.main-section li') @@ -134,21 +134,21 @@ const el = document.getElementById('navbar') assert(!!el && el.tagName === 'NAV') ``` -`#navbar` 内に `header` 要素が 1 つだけあるようにしてください +`#navbar` 内に `header` 要素が 1 つだけあるようにしてください。 ```js const els = document.querySelectorAll('#navbar header') assert(els.length === 1) ``` -クラスが `nav-link` である `a` 要素が少なくとも 1 つ必要です +クラスが `nav-link` である `a` 要素が少なくとも 1 つ必要です。 ```js const els = document.querySelectorAll('a.nav-link') assert(els.length >= 1) ``` -`.nav-link` の要素はすべてアンカー (`a`) 要素である必要があります +`.nav-link` の要素はすべてアンカー (`a`) 要素である必要があります。 ```js const els = document.querySelectorAll('.nav-link') @@ -158,7 +158,7 @@ els.forEach(el => { assert(els.length > 0) ``` -`.nav-link` の要素はすべて `#navbar` の中にある必要があります +`.nav-link` の要素はすべて `#navbar` の中にある必要があります。 ```js const els1 = document.querySelectorAll('.nav-link') @@ -166,7 +166,7 @@ const els2 = document.querySelectorAll('#navbar .nav-link') assert(els2.length > 0 && els1.length === els2.length) ``` -`.nav-link` の要素と `.main-section` の要素の数が同じである必要があります +`.nav-link` の要素と `.main-section` の要素の数が同じである必要があります。 ```js const els1 = document.querySelectorAll('.main-section') @@ -174,7 +174,7 @@ const els2 = document.querySelectorAll('.nav-link') assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) ``` -`#navbar` 内の `header` 要素は、同じく `#navbar` 内にあるどのリンク (`a`) 要素よりも前に置かれなければなりません +`#navbar` 内の `header` 要素は、同じく `#navbar` 内にあるどのリンク (`a`) 要素よりも前に置かれなければなりません。 ```js const navLinks = document.querySelectorAll('#navbar a.nav-link'); @@ -190,7 +190,7 @@ navLinks.forEach((navLink) => { assert(!!header) ``` -各 `.nav-link` には、関連する `section` の `header` テキストと対応するテキストが必要です (例えば、もし "Hello world" セクション / ヘッダーがあるならば、`#navbar` には "Hello world" というテキストを含む `.nav-link` が必要です) +各 `.nav-link` には、関連する `section` の `header` テキストに対応するテキストが必要です (例えば、もし "Hello world" セクション / ヘッダーがあるならば、`#navbar` には "Hello world" というテキストを含む `.nav-link` が必要です)。 ```js const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => @@ -203,7 +203,7 @@ const remainder = headerText.filter(str => linkText.indexOf(str) === -1) assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) ``` -各 `.nav-link` には、対応する `.main-section` へとリンクする `href` 属性が必要です (例えば、"Hello world" のテキストを含む `.nav-link` 要素をクリックしたならば、その id を持つ `section` 要素に移動しなければなりません) +各 `.nav-link` には、対応する `.main-section` へとリンクする `href` 属性が必要です (例えば、"Hello world" のテキストを含む `.nav-link` 要素をクリックしたならば、その id を持つ `section` 要素に移動しなければなりません)。 ```js const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) @@ -212,7 +212,7 @@ const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) ``` -`#navbar` は常にウィンドウの左端にある必要があります +`#navbar` は常にウィンドウの左端にある必要があります。 ```js const el = document.getElementById('navbar') @@ -221,7 +221,7 @@ const left2 = el?.offsetLeft assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) ``` -技術ドキュメントのプロジェクトに、少なくとも 1 つのメディアクエリが使われている必要があります +技術ドキュメントのプロジェクトに、少なくとも 1 つのメディアクエリが使われている必要があります。 ```js const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) @@ -248,7 +248,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); - + Technical Documentation Page diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md index 96c57203b9d..6d11d399fbd 100644 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md @@ -12,13 +12,13 @@ dashedName: build-a-tribute-page **ユーザーストーリー:** -1. トリビュートページには `id="main"` を持つ要素が 1 つあり、その中に他のすべての要素が含まれます +1. トリビュートページには `id` が `main` に設定された `main` 要素が 1 つあり、その中に他のすべての要素が含まれます 1. `id` の値が `title` に設定されている要素が 1 つあり、それにはトリビュートページで取り上げる対象者 (例: "Dr. Norman Borlaug") を説明する文字列 (すなわちテキスト) が記載されています 1. `id` の値が `img-div` に設定されている `figure` または `div` 要素のどちらか 1 つが必要です -1. `img-div` の要素内には、`id="image"` を持つ `img` 要素があります -1. `img-div` の要素内には、`id="img-caption"` を持つ要素があり、`img-div` 内に表示されている画像を説明するテキストコンテンツを含みます +1. `#img-div` の要素内には、`id="image"` を持つ `img` 要素があります +1. `#img-div` の要素内には、`id="img-caption"` を持つ要素があり、`#img-div` 内に表示されている画像を説明するテキストコンテンツを含みます 1. `id="tribute-info"` を持つ要素が 1 つあり、これにはトリビュートページの対象者を説明するテキストコンテンツが含まれます -1. `id="tribute-link"` を持つ a 要素が 1 つあり、これはトリビュートページの対象者に関する追加情報を含む外部サイトへのリンクです。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません +1. `id="tribute-link"` を持つ `a` 要素が 1 つあり、これはトリビュートページの対象者に関する追加情報を含む外部サイトへのリンクです。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません 1. `#image` に `max-width` と `height` プロパティを使用して、元のサイズを超えることなく、親要素の幅に応じてサイズが変更されるようにします 1. `img` 要素は親要素内の中央に配置する必要があります @@ -28,14 +28,14 @@ dashedName: build-a-tribute-page # --hints-- -`id` の値が `main` に設定されている `main` 要素が 1 つ必要です +`id` の値が `main` に設定されている `main` 要素が 1 つ必要です。 ```js const el = document.getElementById('main') assert(!!el && el.tagName === 'MAIN') ``` -`#img-div`、`#image`、`#img-caption`、`#tribute-info`、および `#tribute-link` は、すべて `#main` の子孫要素である必要があります +`#img-div`、`#image`、`#img-caption`、`#tribute-info`、および `#tribute-link` は、すべて `#main` の子孫要素である必要があります。 ```js const el1 = document.querySelector('#main #img-div') @@ -46,14 +46,14 @@ const el5 = document.querySelector('#main #tribute-link') assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) ``` -`id` が `title` の要素が 1 つ必要です +`id` が `title` の要素が 1 つ必要です。 ```js const el = document.getElementById('title') assert(!!el) ``` -`#title` が空でないようにしてください +`#title` が空でないようにしてください。 ```js const el = document.getElementById('title') @@ -61,84 +61,84 @@ assert(!!el && el.innerText.length > 0) ``` -`id` の値が `img-div` に設定されている、`figure` または `div` 要素が 1 つ必要です +`id` の値が `img-div` に設定されている、`figure` または `div` 要素が 1 つ必要です。 ```js const el = document.getElementById('img-div') assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) ``` -`id` の値が `image` に設定されている `img` 要素が 1 つ必要です +`id` の値が `image` に設定されている `img` 要素が 1 つ必要です。 ```js const el = document.getElementById('image') assert(!!el && el.tagName === 'IMG') ``` -`#image` は `#img-div` の子孫要素である必要があります +`#image` は `#img-div` の子孫要素である必要があります。 ```js const el = document.querySelector('#img-div #image') assert(!!el) ``` -`id` の値が `img-caption` に設定されている、`figcaption` または `div` 要素が 1 つ必要です +`id` の値が `img-caption` に設定されている、`figcaption` または `div` 要素が 1 つ必要です。 ```js const el = document.getElementById('img-caption') assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) ``` -`#img-caption` は `#img-div` の子孫要素である必要があります +`#img-caption` は `#img-div` の子孫要素である必要があります。 ```js const el = document.querySelector('#img-div #img-caption') assert(!!el) ``` -`#img-caption` が空でないようにしてください +`#img-caption` が空でないようにしてください。 ```js const el = document.getElementById('img-caption') assert(!!el && el.innerText.length > 0) ``` -`id` が `tribute-info` の要素が 1 つ必要です +`id` が `tribute-info` の要素が 1 つ必要です。 ```js const el = document.getElementById('tribute-info') assert(!!el) ``` -`#tribute-info` が空でないようにしてください +`#tribute-info` が空でないようにしてください。 ```js const el = document.getElementById('tribute-info') assert(!!el && el.innerText.length > 0) ``` -`id` の値が `tribute-link` に設定されている `a` 要素が 1 つ必要です +`id` の値が `tribute-link` に設定されている `a` 要素が 1 つ必要です。 ```js const el = document.getElementById('tribute-link') assert(!!el && el.tagName === 'A') ``` -`#tribute-link` は `href` 属性とその値をもつ必要があります +`#tribute-link` は `href` 属性とその値をもつ必要があります。 ```js const el = document.getElementById('tribute-link') assert(!!el && !!el.href && el.href.length > 0) ``` -`#tribute-link` は、値が `_blank` に設定されている `target` 属性をもつ必要があります +`#tribute-link` は、値が `_blank` に設定されている `target` 属性をもつ必要があります。 ```js const el = document.getElementById('tribute-link') assert(!!el && el.target === '_blank') ``` -`img` 要素の `display` の値は `block` に設定されている必要があります +`img` 要素の `display` の値は `block` に設定されている必要があります。 ```js const img = document.getElementById('image'); @@ -147,7 +147,7 @@ const style = imgStyle?.getPropertyValue('display') assert(style === 'block') ``` -`#image` の `max-width` の値は `100%` に設定されている必要があります +`#image` の `max-width` の値は `100%` に設定されている必要があります。 ```js const img = document.getElementById('image'); @@ -156,7 +156,7 @@ const style = imgStyle?.getPropertyValue('max-width') assert(style === '100%') ``` -`#image` の `height` の値は `auto` に設定されている必要があります +`#image` の `height` の値は `auto` に設定されている必要があります。 ```js // taken from the testable-projects repo @@ -170,7 +170,7 @@ img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); assert(heightValue === 'auto') ``` -`#image` は親要素内の中央に配置する必要があります +`#image` は親要素内の中央に配置する必要があります。 ```js // taken from the testable-projects repo @@ -207,14 +207,14 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) - + Tribute Page diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md index 72373ee6af2..960e0c0c31b 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md @@ -14,40 +14,40 @@ dashedName: convert-celsius-to-fahrenheit # --hints-- -`convertToF(0)` は数値を返す必要があります。 +`convertCtoF(0)` は数値を返す必要があります。 ```js -assert(typeof convertToF(0) === 'number'); +assert(typeof convertCtoF(0) === 'number'); ``` -`convertToF(-30)` は `-22` の値を返す必要があります。 +`convertCtoF(-30)` は `-22` の値を返す必要があります。 ```js -assert(convertToF(-30) === -22); +assert(convertCtoF(-30) === -22); ``` -`convertToF(-10)` は `14` の値を返す必要があります。 +`convertCtoF(-10)` は `14` の値を返す必要があります。 ```js -assert(convertToF(-10) === 14); +assert(convertCtoF(-10) === 14); ``` -`convertToF(0)` は `32` の値を返す必要があります。 +`convertCtoF(0)` は `32` の値を返す必要があります。 ```js -assert(convertToF(0) === 32); +assert(convertCtoF(0) === 32); ``` -`convertToF(20)` は `68` の値を返す必要があります。 +`convertCtoF(20)` は `68` の値を返す必要があります。 ```js -assert(convertToF(20) === 68); +assert(convertCtoF(20) === 68); ``` -`convertToF(30)` は `86` の値を返す必要があります。 +`convertCtoF(30)` は `86` の値を返す必要があります。 ```js -assert(convertToF(30) === 86); +assert(convertCtoF(30) === 86); ``` # --seed-- @@ -55,22 +55,21 @@ assert(convertToF(30) === 86); ## --seed-contents-- ```js -function convertToF(celsius) { +function convertCtoF(celsius) { let fahrenheit; return fahrenheit; } -convertToF(30); +convertCtoF(30); ``` # --solutions-- ```js -function convertToF(celsius) { +function convertCtoF(celsius) { let fahrenheit = celsius * 9/5 + 32; - return fahrenheit; } -convertToF(30); +convertCtoF(30); ``` diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md index 38dbd532bd9..f3fe53808ad 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md @@ -16,7 +16,7 @@ for (let user in users) { } ``` -これは `Alan`、`Jeff`、`Sarah`、`Ryan` を出力し、それぞれの値を独自の行に表示します。 +これは `Alan`、`Jeff`、`Sarah` の値を、それぞれ別の行に出力します。 このステートメントでは変数 `user` を定義しました。ご覧のように、for...in ステートメントでオブジェクトがループ処理されるとき、この変数は繰り返し処理ごとにオブジェクトの各キーにリセットされ、それぞれのユーザー名がコンソールに出力されます。 diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md index 389f6998c0a..7478df3fb00 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md @@ -27,24 +27,6 @@ console.log(myBreed); コンソールには文字列 `Doberman` が表示されます。 -この用法の別の例として、プログラムの実行中にプロパティの名前を動的に取得することができます。次に例を示します。 - -```js -const someObj = { - propName: "John" -}; - -function propPrefix(str) { - const s = "prop"; - return s + str; -} - -const someProp = propPrefix("Name"); -console.log(someObj[someProp]); -``` - -`someProp` の値は文字列 `propName` となり、文字列 `John` がコンソールに表示されます。 - 変数を使用してプロパティにアクセスする場合、変数名を引用符で*囲まない*ことに注意してください。使用するのは変数の*値*であって、*名前*ではありません。 # --instructions-- @@ -83,7 +65,7 @@ assert(/testObj\s*?\[.*?\]/.test(code)); assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi)); ``` -ブラケット記法で、変数`playerNumber` を使用する必要があります。 +ブラケット記法で、変数 `playerNumber` を使用する必要があります。 ```js assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code)); diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md index 56d0710f239..da94ff9e293 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md @@ -32,7 +32,13 @@ const ourStr = "I come first. " + "I come second."; # --hints-- -`myStr` の値が文字列 `This is the start.` `This is the end.` になる必要があります。 +`myStr` は、2 つの文字列の間に空白文字を含む必要があります。 + +```js +assert(/start\. This/.test(myStr)); +``` + +`myStr` は、文字列の値 `This is the start. This is the end.` を持つ必要があります。 ```js assert(myStr === 'This is the start. This is the end.'); diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md index 16ef6b3b0c6..cb447743050 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md @@ -28,6 +28,12 @@ ourStr += "I come second."; # --hints-- +`myStr` は、2 つの文字列の間に空白文字を含む必要があります。 + +```js +assert(/sentence\. This/.test(myStr)); +``` + `myStr` の値が文字列値 `This is the first sentence. This is the second sentence.` になる必要があります。 ```js diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md index 35436450b14..8d23b2774ba 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md @@ -31,34 +31,13 @@ dashedName: counting-cards assert(// (function () { count = 0; - cc(2); - cc(2); let out = cc(10); - const hasSpace = /-?\d+ Bet/.test('' + out); + const hasSpace = /-?\d+ (Bet|Hold)/.test('' + out); return hasSpace; })() ); ``` -カードの並びが 3、2、A、10、K の場合は文字列 `-1 Hold` を返す必要があります。 - -```js -assert( - (function () { - count = 0; - cc(3); - cc(2); - cc('A'); - cc(10); - var out = cc('K'); - if (out === '-1 Hold') { - return true; - } - return false; - })() -); -``` - カードの並びが 2、3、4、5、6 の場合は文字列 `5 Bet` を返す必要があります。 ```js diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md index e66ec3e2e70..4a71d69bd82 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md @@ -25,14 +25,14 @@ const alpha = { 26:"A" }; -alpha[2]; -alpha[24]; +const thirdLetter = alpha[2]; +const lastLetter = alpha[24]; const value = 2; -alpha[value]; +const valueLookup = alpha[value]; ``` -`alpha[2]` は文字列 `Y`、`alpha[24]` は文字列 `C`、`alpha[value]` は文字列 `Y` となります。 +`thirdLetter` は文字列 `Y`、`lastLetter` は文字列 `C`、`valueLookup` は文字列 `Y` となります。 # --instructions-- diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md index 585bfcc0019..530134327f3 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md @@ -97,6 +97,15 @@ assert.deepEqual( ); ``` +`whatIsInAName([{"a": 1, "b": 2, "c": 3, "d": 9999}], {"a": 1, "b": 9999, "c": 3})` は `[]` を返す必要があります。 + +```js +assert.deepEqual( + whatIsInAName([{ a: 1, b: 2, c: 3, d: 9999 }], { a: 1, b: 9999, c: 3 }), + [] +); +``` + # --seed-- ## --seed-contents-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md index 5f257035087..f7521a6cf47 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md @@ -9,7 +9,7 @@ dashedName: step-8 外部 CSS ファイルが設定されたので、ページのスタイリングを始めることができます。 -ヒントとして、段落要素を対象にして右揃えにする方法は次の通りです: +ヒントとして、段落要素を選択して右揃えにする方法は次の通りです: ```css p { @@ -17,7 +17,7 @@ p { } ``` -`h1` 要素を対象とする新しい CSS ルールを作成し、その `text-align` プロパティを `center` に設定してください。 +`h1` 要素を選択する新しい CSS ルールを作成し、その `text-align` プロパティを `center` に設定してください。 # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md index ae85bfc2fd6..0775c8a3871 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md @@ -9,7 +9,7 @@ dashedName: step-11 ではページに色を追加しましょう。 要素に色をつける方法の 1 つに、`black` や `cyan`、`yellow` のような色キーワードを使う方法があることを思い出してください。 -ヒントとして、クラス `freecodecamp` を対象とする方法は次の通りです: +ヒントとして、クラス `freecodecamp` を選択する方法は次の通りです: ```css .freecodecamp { @@ -17,11 +17,11 @@ dashedName: step-11 } ``` -クラス `marker` を対象とする新しい CSS ルールを作成し、`background-color` プロパティを `red` に設定してください。 +クラス `marker` を選択する新しい CSS ルールを作成し、`background-color` プロパティを `red` に設定してください。 # --hints-- -クラス `marker` を対象とするクラスセレクターを作成する必要があります。 +クラス `marker` を選択するクラスセレクターを作成する必要があります。 ```js assert(new __helpers.CSSHelp(document).getStyle('.marker')); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md index ba9894ee4bf..e2fb59b7080 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md @@ -7,11 +7,11 @@ dashedName: step-18 # --description-- -次に、クラス `one` を対象とする新しい CSS ルールを作成し、その `background-color` プロパティを `red` に設定してください。 +次に、クラス `one` を選択する新しい CSS ルールを作成し、その `background-color` プロパティを `red` に設定してください。 # --hints-- -クラス `one` を対象とするクラスセレクターを使用する必要があります。 +クラス `one` を選択するクラスセレクターを使用する必要があります。 ```js assert(new __helpers.CSSHelp(document).getStyle('.one')); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md index 91189ce4cc5..645f0e04fc4 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md @@ -7,13 +7,13 @@ dashedName: step-20 # --description-- -クラス `two` を対象とする CSS ルールを作成し、その `background-color` プロパティを `green` に設定してください。 +クラス `two` を選択する CSS ルールを作成し、その `background-color` プロパティを `green` に設定してください。 -また、それとは別にクラス `three` を対象とする CSS ルールを作成し、その `background-color` プロパティを `blue` に設定してください。 +また、それとは別にクラス `three` を選択する CSS ルールを作成し、その `background-color` プロパティを `blue` に設定してください。 # --hints-- -クラスセレクターを使用してクラス `two` を指定してください。 +クラスセレクターを使用してクラス `two` を選択してください。 ```js assert(new __helpers.CSSHelp(document).getStyle('.two')); @@ -25,7 +25,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.two')); assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); ``` -クラスセレクタ―を使用してクラス `three` を指定してください。 +クラスセレクタ―を使用してクラス `three` を選択してください。 ```js assert(new __helpers.CSSHelp(document).getStyle('.three')); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md index 97bbd0c3181..1bd21cf6c67 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md @@ -11,11 +11,11 @@ dashedName: step-21 これを簡単に確認する方法が CSS の `rgb` 関数です。 -クラス `container` を対象とする新しい CSS ルールを作成し、その `background-color` を `rgb(0, 0, 0)` で黒に設定してください。 +クラス `container` を選択する新しい CSS ルールを作成し、その `background-color` を `rgb(0, 0, 0)` で黒に設定してください。 # --hints-- -クラスセレクタ―を使用してクラス `container` を指定してください。 +クラスセレクタ―を使用してクラス `container` を選択してください。 ```js assert(new __helpers.CSSHelp(document).getStyle('.container')); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md index 7d32f87ddee..1c9e07dece7 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md @@ -17,7 +17,7 @@ dashedName: step-42 assert(!new __helpers.CSSHelp(document).getStyle('.one')); ``` -クラスセレクターを使用して、クラス `red` を指定してください。 +クラスセレクターを使用して、クラス `red` を選択してください。 ```js assert(new __helpers.CSSHelp(document).getStyle('.red')); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md index b9f0b786cf4..e1e513db830 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md @@ -17,7 +17,7 @@ CSS クラスセレクター `.two` を変更して、新しい `green` クラ assert(!new __helpers.CSSHelp(document).getStyle('.two')); ``` -クラスセレクタ―を使用してクラス `green` を指定してください。 +クラスセレクタ―を使用してクラス `green` を選択してください。 ```js assert(new __helpers.CSSHelp(document).getStyle('.green')); @@ -35,7 +35,7 @@ assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === ' assert(!new __helpers.CSSHelp(document).getStyle('.three')); ``` -クラスセレクタ―を使用してクラス `blue` を指定してください。 +クラスセレクタ―を使用してクラス `blue` を選択してください。 ```js assert(new __helpers.CSSHelp(document).getStyle('.blue')); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md new file mode 100644 index 00000000000..00b42518a89 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md @@ -0,0 +1,85 @@ +--- +id: 61a49d15bdbb5e57cc6fd280 +title: ステップ 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +色経由点 (color-stops) を利用すると、グラデーション軸に沿って色がどう配置されるかを微調整できます。 色経由点は、`linear-gradient` 関数内で色指定に続けて `px` などの長さの単位、またはパーセンテージで指定します。 + +例えば下記の赤から黒のグラデーションでは、赤から黒への変化はグラデーション軸に沿って 90% の位置で発生し、スペースのほとんどを赤が占めることになります。 + +```css +linear-gradient(90deg, red 90%, black); +``` + +`linear-gradient` 関数内で、`75%` の色経由点を 1 つ目の 赤色の引数の後に追加してください。 他の色の引数には色経由点を追加しないでください。 + +# --hints-- + +`.red` CSS ルールの `background` プロパティを `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))` に設定する必要があります。 + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md new file mode 100644 index 00000000000..df5911e5381 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md @@ -0,0 +1,79 @@ +--- +id: 61a4a53c4459446dc134a1c6 +title: ステップ 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +`linear-gradient` 関数と色経由点の基本動作がわかってきたと思いますので、これを使ってマーカーをよりリアルに見えるようにしましょう。 + +`linear-gradient` 関数内で、`gradientDirection` を `180deg` に設定してください。 + +# --hints-- + +`.red` CSS ルールの `background` プロパティを `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md new file mode 100644 index 00000000000..7c020b7f813 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md @@ -0,0 +1,77 @@ +--- +id: 61a4a6e908bc34725b4c25ac +title: ステップ 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +次に、赤の色経由点を `0%` に、緑の色経由点を `50%` に、青の色経由点を `100%` に設定してください。 + +# --hints-- + +`.red` CSS ルールの `background` プロパティを `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md new file mode 100644 index 00000000000..9f10f771db7 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md @@ -0,0 +1,79 @@ +--- +id: 61a4a7877da33a73a1c1723e +title: ステップ 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +色経由点を設定したので、今度は `linear-gradient` 関数内の各色の引数に異なる濃さの赤色を設定しましょう。 上から光が当たっているように見せるため、マーカーの上端と下端は濃い色、真ん中は薄い色にします。 + +現在純粋な赤に設定されている 1 つ目の色の引数について、`rgb` 関数を変更して赤の値を `122`、緑の値を `74`、青の値を `14` に設定してください。 + +# --hints-- + +`.red` CSS ルールの `background` プロパティを `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md new file mode 100644 index 00000000000..6efed662f5b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md @@ -0,0 +1,79 @@ +--- +id: 61a4ac092eb21e7dbfe61c33 +title: ステップ 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +次に、`linear-gradient` 関数内の 2 つ目の色、現在は純粋な緑に設定されている引数を変更します。 + +`rgb` 関数を変更し、赤の値を `245`、緑の値を `62`、青の値を `113` に設定してください。 + +# --hints-- + +`.red` CSS ルールの `background` プロパティを `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md new file mode 100644 index 00000000000..664047e5328 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md @@ -0,0 +1,79 @@ +--- +id: 61a4acbb5587197f68544d00 +title: ステップ 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +最後に、`linear-gradient` 関数内の 3 つ目の色、現在は純粋な青に設定されている引数を変更します。 + +`rgb` 関数を変更し、赤の値を `162`、緑の値を `27`、青の値を `27` に設定してください。 + +# --hints-- + +`.red` CSS ルールの `background` プロパティを `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md new file mode 100644 index 00000000000..ff0bbc55960 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -0,0 +1,79 @@ +--- +id: 61a4ada3aabeec822b2975d9 +title: ステップ 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +赤いマーカーはだいぶリアルに見えるようになりました。 次は緑のマーカーに同じことをしますが、今度は `linear-gradient` 関数と 16 進数カラーを使います。 + +`.green` CSS ルール内の `background-color` プロパティを `background` に変更してください。 + +# --hints-- + +`.green` CSS ルールには `background` プロパティと値 `#007F00` が必要です。 + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background-color: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md new file mode 100644 index 00000000000..0de59abb5b0 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md @@ -0,0 +1,79 @@ +--- +id: 61a4ae5f29eb5584187201c3 +title: ステップ 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +このマーカーについては、グラデーションに 16 進数のカラーコードを使いましょう。 + +`linear-gradient` 関数を使用して、`gradientDirection` を `180deg` に設定してください。 そして最初の色の引数には 16 進数カラーコードを使用して、値は赤が `55`、緑が `68`、青が `0D` に設定してください。 + +# --hints-- + +`.green` CSS ルールの `background` プロパティの値を `linear-gradient(180deg, #55680D)` に設定する必要があります。 + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md new file mode 100644 index 00000000000..f97615ae431 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md @@ -0,0 +1,79 @@ +--- +id: 61a5be9833e7dc178de2af10 +title: ステップ 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +良くなってきましたが、もう少し立体的に見せるため緑のマーカーの下端を濃い色にしましょう。 + +同じ `linear-gradient` 関数内に、3 つ目の色の引数として 16 進数カラーコードを追加し、赤の値を `11`、緑を `6C`、青を `31` にしてください。 + +# --hints-- + +`.green` CSS ルールの `background` プロパティを `linear-gradient(180deg, #55680D, #71F53E, #116C31)` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D, #71F53E); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md new file mode 100644 index 00000000000..5b2be3b4590 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md @@ -0,0 +1,81 @@ +--- +id: 61a5bfe091060f1d6a629dd0 +title: ステップ 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +色経由点の設定がなくても、緑のマーカーの色が赤のマーカーと同じ点で変化していることに気づいたかもしれません。 最初の色が開始点 (0%)、2 つ目の色が真ん中 (50%)、最後の色が終了点 (100%) にあります。 + +`linear-gradient` 関数はこれらの値を自動的に計算し、デフォルトではグラデーション軸に沿って均等に色を配置します。 + +`.red` CSS ルール内の `linear-gradient` 関数から 3 つの色経由点を削除して、コードを整理しましょう。 + +# --hints-- + +`.red` CSS ルールの `background` プロパティを `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md new file mode 100644 index 00000000000..333d0fe9ba6 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md @@ -0,0 +1,91 @@ +--- +id: 61a5c906ab73313316e342f0 +title: ステップ 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +`linear-gradient` 関数に `gradientDirection` 引数が与えられなかった場合、デフォルトでは色が上から下、つまり 180 度の線に沿って配置されます。 + +両方の `linear-gradient` 関数から `gradientDirection` 引数を削除して、コードを整理しましょう。 + +# --hints-- + +`.red` および `.green` の CSS ルール内の `linear-gradient` 関数から、`gradientDirection` 引数を削除する必要があります。 + +```js +assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); +``` + +`.red` CSS ルールの `background` プロパティを `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +`.green` CSS ルールの `background` プロパティを `linear-gradient(#55680D, #71F53E, #116C31)` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md new file mode 100644 index 00000000000..5e5e5102539 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -0,0 +1,79 @@ +--- +id: 61a5ca57f50ded36d33eef96 +title: ステップ 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +では次は青のマーカーに、今度は色の引数に `hsl` 関数を使ってグラデーションを適用しましょう。 + +`.blue` CSS ルール内の `background-color` プロパティを `background` に変更してください。 + +# --hints-- + +`.blue` CSS ルールには `background` プロパティと値 `hsl(240, 100%, 50%)` が必要です。 + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background-color: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md new file mode 100644 index 00000000000..efdd44f09c7 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md @@ -0,0 +1,77 @@ +--- +id: 61a5d594b887335228ee6533 +title: ステップ 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +`linear-gradient` 関数を使用して、最初の色の引数として `hsl` 関数を渡し、色相の値を `186`、彩度を `76%`、明度を `16%` にしてください。 + +# --hints-- + +`.blue` CSS ルールの `background` プロパティの値を `linear-gradient(hsl(186, 76%, 16%))` に設定する必要があります。 + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md new file mode 100644 index 00000000000..700e7f7ab6b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md @@ -0,0 +1,77 @@ +--- +id: 61a5d6701ee08953ca375243 +title: ステップ 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +2 つ目の色の引数について、`hsl` 関数を渡し、色相の値を `223`、彩度を `90%`、明度を `60%` に設定してください。 + +# --hints-- + +`.blue` CSS ルールの `background` プロパティを `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md new file mode 100644 index 00000000000..4e99e85655e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md @@ -0,0 +1,77 @@ +--- +id: 61a5d79c858bef560e26c685 +title: ステップ 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +3 つ目の色の引数について、`hsl` 関数を渡し、色相の値を `240`、彩度を `56%`、明度を `42%` に設定してください。 + +# --hints-- + +`.blue` CSS ルールの `background` プロパティを `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md new file mode 100644 index 00000000000..7f9c7086928 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md @@ -0,0 +1,87 @@ +--- +id: 61a5d7ef1cfcf45764df07a2 +title: ステップ 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +これでマーカーに正しい色が付けられたので、次はマーカーのスリーブ (ペン軸部分のカバー) を作成しましょう。 赤いマーカーから始めます。 + +赤いマーカーの `div` の内側に、新しい `div` を作成してクラスを `sleeve` に設定してください。 + +# --hints-- + +赤いマーカーの `div` 要素の中に新しい `div` 要素が必要です。 + +```js +const redMarkerChildren = [...document.querySelector('.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); +``` + +新しい `div` 要素には `sleeve` クラスが必要です。 + +```js +const redMarkerChild = [...document.querySelector('.red')?.children][0]; +assert(redMarkerChild?.classList?.contains('sleeve')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md new file mode 100644 index 00000000000..3904592864e --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md @@ -0,0 +1,92 @@ +--- +id: 61adc60b69cd4b87739d2174 +title: ステップ 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +クラス `sleeve` を選択する新しい CSS ルールを作成してください。 `width` プロパティを `110px` に、`height` プロパティを `25px` に設定してください。　 + +# --hints-- + +クラスセレクタ―を使用してクラス `sleeve` を選択してください。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); +``` + +`.sleeve` CSS ルールの `width` プロパティを `110px` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px'); +``` + +`.sleeve` CSS ルールの `height` プロパティを `25px` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md new file mode 100644 index 00000000000..d41fe6ff178 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md @@ -0,0 +1,98 @@ +--- +id: 61adc91467b5d59328b9f781 +title: ステップ 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +1 つ前のプロジェクトで、境界線 (border) と `border-color` プロパティについて少し学習しました。 + +すべての HTML 要素は境界線を持ちますが、通常、デフォルト値は `none` に設定されています。 CSS では、要素の境界線のあらゆる外観を制御できます。1 度にすべての側面の境界線を設定することも、1 つずつ設定することもできます。 境界線が見えるようにするには、幅とスタイルを設定する必要があります。 + +`.sleeve` CSS ルール内に、`border-left-width` プロパティと値 `10px` を追加してください。 + +# --hints-- + +`.sleeve` CSS ルールには `border-left-width` プロパティが必要で、その値は `10px` である必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md new file mode 100644 index 00000000000..207f411ba7b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md @@ -0,0 +1,97 @@ +--- +id: 61add79e739a5faee9d96080 +title: ステップ 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +境界線には選択可能なスタイルがいくつかあります。 境界線を実線 (solid) にすることも、好みに応じて短い線の点線 (dashed) や丸い点の点線 (dotted) にすることもできます。 おそらく実線の境界線が最も一般的でしょう。 + +`.sleeve` CSS ルール内に、`border-left-style` プロパティと値 `solid` を追加してください。 + +# --hints-- + +`.sleeve` CSS ルールには `border-left-style` プロパティが必要で、その値は `solid` である必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md new file mode 100644 index 00000000000..93f836c432b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md @@ -0,0 +1,100 @@ +--- +id: 61add929e41980b1edbdba7e +title: ステップ 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +これで境界線が見えるようになりました。 色が設定されていない場合、デフォルトでは黒が使用されます。 + +しかしコードを読みやすくするためには、明示的に境界線の色を設定した方が良いでしょう。 + +`.sleeve` CSS ルール内に、`border-left-color` プロパティと値 `black` を追加してください。 + +# --hints-- + +`.sleeve` CSS ルールには `border-left-color` プロパティが必要で、その値は `black` である必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md new file mode 100644 index 00000000000..965624f9666 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md @@ -0,0 +1,123 @@ +--- +id: 61addaf7e83988b59a7d18ff +title: ステップ 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +`border-left` 一括指定プロパティを使うと、左側の境界線の幅、スタイル、色を同時に設定することができます。 + +構文は次のとおりです。 + +```css +border-left: width style color; +``` + +`.sleeve` CSS ルール内で、`border-left-width`、`border-left-style`、`border-left-color` プロパティを、`border-left` 一括指定プロパティに置き換えてください。 左側の境界線の幅、スタイル、色の値は同じにしてください。 + +# --hints-- + +`.sleeve` CSS ルールが `border-left-width` プロパティとその値を持たないようにしてください。 + +```js +assert(!/border-left-width/g.test(code)); +``` + +`.sleeve` CSS ルールが `border-left-style` プロパティとその値を持たないようにしてください。 + +```js +assert(!/border-left-style/g.test(code)); +``` + +`.sleeve` CSS ルールが `border-left-color` プロパティとその値を持たないようにしてください。 + +```js +assert(!/border-left-color/g.test(code)); +``` + +`.sleeve` CSS ルールの `border-left` 一括指定プロパティの値を `10px solid black` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; + border-left-color: black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md new file mode 100644 index 00000000000..d5af5b115d3 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md @@ -0,0 +1,97 @@ +--- +id: 61ade49b2dad60c076cbd32d +title: ステップ 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +マーカーらしくなってきました。 でも境界線のスタイルを二重線にすると、もっとリアルにできそうです。 + +`border-left` 一括指定プロパティについて、境界線のスタイルの値を `solid` から `double` に変更してください。 + +# --hints-- + +`.sleeve` CSS ルールの `border-left` 一括指定プロパティの値を `10px double black` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px solid black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md new file mode 100644 index 00000000000..80659ccdf41 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md @@ -0,0 +1,85 @@ +--- +id: 61b092eb9e7fc020b43b1bb2 +title: ステップ 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +マーカーをよりリアルに見せるため、スリーブを透き通った白色にしましょう。 + +まず、スリーブの要素の `background-color` を `white` に設定してください。 + +# --hints-- + +`.sleeve` CSS ルールの `background-color` プロパティを `white` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md new file mode 100644 index 00000000000..245546bda7b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md @@ -0,0 +1,88 @@ +--- +id: 61b093179e7fc020b43b1bb3 +title: ステップ 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +不透明度 (Opacity) は、ある物がどのくらい不透明かを表します。 例えば頑丈な壁は不透明で、光を通しません。 一方飲み物用のグラスは透明で、グラス越しに向こう側が見えます。 + +CSS の `opacity` プロパティを使って、要素の不透明さ、あるいは透明さを制御できます。 値が `0`、または 0% の時、要素は完全に透明になり、`1.0`、または 100% の時、要素は (デフォルトの状態と同じように) 完全に不透明になります。 + +`.sleeve` CSS ルール内で、`opacity` プロパティを `0.5` に設定してください。 + +# --hints-- + +`.sleeve` CSS ルールの `opacity` プロパティを `0.5` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md new file mode 100644 index 00000000000..358079b5cee --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md @@ -0,0 +1,89 @@ +--- +id: 61b093219e7fc020b43b1bb4 +title: ステップ 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +要素の不透明度を指定するもう一つの方法は、アルファチャンネルを使用することです。 `opacity` プロパティと同様に、アルファチャンネルはある色の透明さ、または不透明さを制御します。 + +既に色名と `opacity` プロパティを使ってスリーブの不透明度を設定しましたが、他の CSS カラープロパティを使うと、アルファチャンネルを追加することができます。 + +`.sleeve` ルール内の `opacity` プロパティと値を削除してください。 + +# --hints-- + +`.sleeve` CSS ルールが `opacity` プロパティとその値を持たないようにしてください。 + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; + opacity: 0.5; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md new file mode 100644 index 00000000000..bb7981a58fe --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md @@ -0,0 +1,92 @@ +--- +id: 61b093329e7fc020b43b1bb5 +title: ステップ 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +色の設定に `rgb` 関数を使うことにはもう慣れたことでしょう。 `rgb` カラーにアルファチャンネルを追加するには、代わりに `rgba` 関数を使います。 + +`rgba` 関数は `rgb` 関数と同じように動作しますが、アルファチャンネルの値として、`0` から `1.0` の数値をもう 1 つ引数に取ります。 + +```css +rgba(redValue, greenValue, blueValue, alphaValue); +``` + +`.sleeve` ルール内で `rgba` 関数を使用して、`background-color` プロパティを不透明度 50％ の純粋な白に設定してください。 + +# --hints-- + +`.sleeve` CSS ルールの `background-color` プロパティを `rgba(255, 255, 255, 0.5)` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md new file mode 100644 index 00000000000..f8219ee3985 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md @@ -0,0 +1,103 @@ +--- +id: 61b093429e7fc020b43b1bb6 +title: ステップ 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +スリーブの見た目は良くなってきましたが、マーカーの右側に寄せるともっと良さそうです。 1 つのやり方として、スリーブの前に別の要素を追加して右側に押しやることができます。 + +スリーブの `div` 要素の前に、クラス `cap` を持つ新しい `div` を追加してください。 + +# --hints-- + +赤いマーカーの `div` の中に新しい `div` 要素が必要です。 + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); +``` + +新しい `div` 要素には `cap` クラスが必要です。 + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); +``` + +キャップの `div` をスリーブの `div` の前に置く必要があります。 + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +const cap = document.querySelector('div.cap'); +const sleeve = document.querySelector('div.sleeve'); +assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md new file mode 100644 index 00000000000..26bd3682b7c --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md @@ -0,0 +1,99 @@ +--- +id: 61b0934c9e7fc020b43b1bb7 +title: ステップ 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +クラス `cap` を選択する新しい CSS ルールを作成してください。 新しいルール内で、`width` プロパティを `60px` に、`height` を `25px` に設定してください。 + +# --hints-- + +クラスセレクターを使用して、クラス `cap` を選択してください。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')); +``` + +`.cap` CSS ルールの `width` プロパティを `60px` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); +``` + +`.cap` CSS ルールの `height` プロパティを `25px` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md new file mode 100644 index 00000000000..c5c416643bb --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md @@ -0,0 +1,104 @@ +--- +id: 61b0936d9e7fc020b43b1bb8 +title: ステップ 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +スリーブが消えたように見えますが、心配しないでください。ちゃんとそこにあります。 何が起こったかというと、新しいキャップ用の `div` がマーカーの幅全体を占有して、スリーブを次の行に押し下げているのです。 + +これは、`div` 要素のデフォルトの `display` プロパティが `block` であるために起こります。 そして 2 つの `block` 要素が隣り合って配置されると、現実のブロックのように上に積み重なります。 例えば、マーカーの要素も互いの上に積み重なっていますね。 + +2 つの `div` 要素を同じ行に配置するには、その要素の `display` プロパティを `inline-block` に設定します。 + +`cap` クラスと `sleeve` クラスの両方を選択する新しいルールを作成し、`display` を `inline-block` に設定してください。 + +# --hints-- + +クラスセレクタ―を使用して、クラス `cap` とクラス `sleeve` の両方を選択してください。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); +``` + +作成した CSS ルールの `display` プロパティを `inline-block` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md new file mode 100644 index 00000000000..78e9c6f81dc --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md @@ -0,0 +1,77 @@ +--- +id: 61b095c79e7fc020b43b1bbb +title: ステップ 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +2 つ目の色の引数について、16 進数カラーコードを使用して赤の値を `71`、緑を `F5`、青を `3E` に設定してください。 + +# --hints-- + +`.green` CSS ルールの `background` プロパティを `linear-gradient(180deg, #55680D, #71F53E)` に設定する必要があります。 + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md new file mode 100644 index 00000000000..a81a11c6f45 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md @@ -0,0 +1,97 @@ +--- +id: 61b09f739aa6572d2064f9b8 +title: ステップ 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +透明なスリーブに対して、境界線の黒色がきつく見えます。 アルファチャンネルを使用すると、黒い境界線の不透明度を下げることができます。 + +`border-left` 一括指定プロパティについて、`rgba` 関数を使用して、色の値を不透明度 75% の純粋な黒に設定してください。 + +# --hints-- + +`.sleeve` CSS ルールの `border-left` 一括指定プロパティの値を `10px double rgba(0, 0, 0, 0.75)` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md new file mode 100644 index 00000000000..6b5d9d39fac --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md @@ -0,0 +1,123 @@ +--- +id: 61b0a1b2af494934b7ec1a72 +title: ステップ 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +素晴らしい。 赤いマーカーはこれで良さそうですね。 ではあとは他のマーカーにもキャップとスリーブを追加しましょう。 + +緑と青のマーカーにキャップとスリーブを追加してください。 赤いマーカーから `div` 要素をコピーして、他 2 つのマーカーの中に貼り付けるだけで構いません。 + +# --hints-- + +緑のマーカーの `div` には `div` 要素が 2 つ含まれている必要があります。 + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); +``` + +緑マーカーのキャップの `div` 要素はスリーブの `div` 要素の前に置く必要があります。 + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +const greenMarkerCap = document.querySelector('.green .cap'); +const greenMarkerSleeve = document.querySelector('.green .sleeve'); +assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); +``` + +青のマーカーの `div` には `div` 要素が 2 つ含まれている必要があります。 + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); +``` + +青マーカーのキャップの `div` 要素はスリーブの `div` 要素の前に置く必要があります。 + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +const blueMarkerCap = document.querySelector('.blue .cap'); +const blueMarkerSleeve = document.querySelector('.blue .sleeve'); +assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md new file mode 100644 index 00000000000..7bc68d64251 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md @@ -0,0 +1,109 @@ +--- +id: 61b0a44a6b865738ba49b9fb +title: ステップ 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +最後に各マーカーに少し影を付けて、更にリアルに見えるようにします。 + +`box-shadow` プロパティを使うと、要素の周りに 1 つまたは複数の影を適用できます。 基本的な構文は次のとおりです。 + +```css +box-shadow: offsetX offsetY color; +``` + +赤いマーカーにシンプルな影を付けることから始めましょう。 + +`.red` CSS ルール内に `box-shadow` プロパティを追加して、値は `offsetX` を `5px`、`offsetY` を `5px`、`color` を `red` にしてください。 + +# --hints-- + +`.red` CSS ルールの `box-shadow` 一括指定プロパティの値を `5px 5px red` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md new file mode 100644 index 00000000000..6162c77b08a --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md @@ -0,0 +1,104 @@ +--- +id: 61b306305810f1c9040ce5a2 +title: ステップ 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +マーカーの周りに、右に 5 ピクセル、下に 5 ピクセルの位置にシンプルな赤い影が追加されました。 + +では、影を反対側に配置したい場合はどうしたらいいでしょうか？ そのためには、`offsetX` と `offsetY` に負の値を使用します。 + +`box-shadow` プロパティの値を変更して、`offsetX` を `-5px`、`offsetY` を `-5px` に設定してください。 + +# --hints-- + +`.red` CSS ルールの `box-shadow` 一括指定プロパティの値を `-5px -5px red` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 5px 5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md new file mode 100644 index 00000000000..aef3876dc67 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md @@ -0,0 +1,108 @@ +--- +id: 61b30995968123ceb6b76167 +title: ステップ 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +影のふちがくっきりしていることに注目してください。 これは、`box-shadow` プロパティにはオプションの値 `blurRadius` があるためです。 + +```css +box-shadow: offsetX offsetY blurRadius color; +``` + +`blurRadius` の値が含まれない場合、デフォルト値は `0` となり、くっきりしたふちになります。 `blurRadius` の値が大きいほど、ぼかし効果が大きくなります。 + +`.green` CSS ルール内に `box-shadow` プロパティを追加して、値は `offsetX` を `5px`、`offsetY` を `5px`、`blurRadius` を `5px`、`color` を `green` にしてください。 + +# --hints-- + +`.green` CSS ルールの `box-shadow` 一括指定プロパティの値を `5px 5px 5px green` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md new file mode 100644 index 00000000000..72f22bd7fee --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md @@ -0,0 +1,111 @@ +--- +id: 61b30a286c228bd0c493c09a +title: ステップ 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +では影をもっと広げたい場合はどうでしょうか。 そのためにはオプションの `spreadRadius` の値を使います。 + +```css +box-shadow: offsetX offsetY blurRadius spreadRadius color; +``` + +`blurRadius` と同じように、 `spreadRadius` が含まれない場合はデフォルト値の `0` となります。 + +練習のため、青のマーカーの周りぴったりの位置に 5 ピクセルの影を追加しましょう。 + +`.blue` CSS ルール内に `box-shadow` プロパティを追加して、値は `offsetX` を `0`、`offsetY` を `0`、`blurRadius` を `0`、`spreadRadius` を `5px`、`color` を `blue` にしてください。 + +# --hints-- + +`.blue` CSS ルールの `box-shadow` 一括指定プロパティの値を `0 0 0 5px blue` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md new file mode 100644 index 00000000000..abf469f64b4 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md @@ -0,0 +1,104 @@ +--- +id: 61b31287fb580ae75a486047 +title: ステップ 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +`box-shadow` プロパティに慣れてきたので、赤いマーカーから影を完成させていきましょう。 + +`.red` CSS ルール内の `box-shadow` プロパティの値を変更して、`offsetX` を `0`、`offsetY` を `0`、`blurRadius` を `20px`、`spreadRadius` を `0`、`color` を `red` にしてください。 + +# --hints-- + +`.red` CSS ルールの `box-shadow` 一括指定プロパティの値を `0 0 20px 0 red` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md new file mode 100644 index 00000000000..8cc06e76222 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md @@ -0,0 +1,104 @@ +--- +id: 61b315e76a63b3ecbbb11b75 +title: ステップ 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +次に、赤いマーカーの `box-shadow` プロパティの `color` の値を変更します。 + +色の名前を `rgba` 関数に置き換えてください。 使用する値は赤が `83`、緑が `14`、青が `14`、アルファチャンネルが `0.8` にしてください。 + +# --hints-- + +`.red` CSS ルールの `box-shadow` 一括指定プロパティの値を `0 0 20px 0 rgba(83, 14, 14, 0.8)` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md new file mode 100644 index 00000000000..d9041906751 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md @@ -0,0 +1,110 @@ +--- +id: 61b3183655ec10efd8c0bb07 +title: ステップ 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +緑と青のマーカーの影も同じ位置、ぼかし、広がりにします。 唯一の違いは色です。 + +`.green` と `.blue` の CSS ルール内の `box-shadow` プロパティの値を変更して、`offsetX` を `0`、`offsetY` を `0`、`blurRadius` を `20px`、`spreadRadius` を `0` にしてください。 色は今のところ `green` と `blue` のままにしておいてください。 + +# --hints-- + +`.green` CSS ルールの `box-shadow` 一括指定プロパティの値を `0 0 20px 0 green` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); +``` + +`.blue` CSS ルールの `box-shadow` 一括指定プロパティの値を `0 0 20px 0 blue` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md new file mode 100644 index 00000000000..24027537ac3 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md @@ -0,0 +1,102 @@ +--- +id: 61b31a451057fff645ec09be +title: ステップ 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +緑のマーカーの `box-shadow` プロパティについて、色の名前を 16 進数カラーコードに置き換えてください。 使用する値は赤を `3B`、緑を `7E`、青を `20`、アルファチャンネルを `CC` にしてください。 + +# --hints-- + +`.green` CSS ルールの `box-shadow` 一括指定プロパティの値を `0 0 20px 0 #3B7E20CC` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 green; +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md new file mode 100644 index 00000000000..c0a6c6c8d11 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md @@ -0,0 +1,184 @@ +--- +id: 61b31cd7b0c76bfc076b4719 +title: ステップ 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +最後に、青いマーカーの `box-shadow` プロパティについて、色の名前を `hsla` 関数に置き換えてください。 使用する値は、色相を `223`、彩度を `59%`、明度を `31%`、アルファチャンネルを `0.8` にしてください。 + +これで、カラーマーカーのセットの完成です！ よくできました。 + +# --hints-- + +`.blue` CSS ルールの `box-shadow` 一括指定プロパティの値を `0 0 20px 0 hsla(223, 59%, 31%, 0.8)` に設定する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md index 366d9e55d67..7ee08f2cb91 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md @@ -9,7 +9,7 @@ dashedName: step-3 `p` 要素は、ウェブサイト上に文章の段落 (paragraph) を作成するために使われます。 `p` 要素を `h2` 要素の下に作成し、それに次のテキストを設定してください: -`Click here to view more cat photos` +`Click here to view more cat photos.` # --hints-- @@ -25,7 +25,7 @@ assert(document.querySelector('p')); assert(code.match(/<\/p\>/)); ``` -`p` 要素のテキストは `Click here to view more cat photos.` でなければなりません。テキストに誤字脱字があります。 +`p` 要素のテキストは `Click here to view more cat photos.` でなければなりません。 テキストに誤字脱字があります。 ```js const extraSpacesRemoved = document diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md index 80ef872b157..37ee4b413d1 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md @@ -27,24 +27,6 @@ console.log(myBreed); A string `Doberman` seria exibida no console. -Outra forma de você usar esse conceito é quando o nome da propriedade é coletado dinamicamente, durante a execução do programa, da seguinte forma: - -```js -const someObj = { - propName: "John" -}; - -function propPrefix(str) { - const s = "prop"; - return s + str; -} - -const someProp = propPrefix("Name"); -console.log(someObj[someProp]); -``` - -`someProp` teria o valor da string `propName` e a string `John` seria exibida no console. - Observe que *não* usamos aspas em torno do nome da variável ao usá-la para acessar a propriedade, porque estamos usando o *valor* da variável, e não o *nome*. # --instructions-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md index dd21c8b3917..96e13c04fc5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md @@ -44,12 +44,12 @@ assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhi
-
- --fcc-editable-region-- +
+ --fcc-editable-region-- - --fcc-editable-region-- -
- + --fcc-editable-region-- +
+ ``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md index c4f86cdf891..5b93408eaa1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md @@ -56,13 +56,13 @@ assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id
-
-
- --fcc-editable-region-- +
+
+ --fcc-editable-region-- - --fcc-editable-region-- -
-
+ --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md index 6515f036b9b..e1ba65451d9 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md @@ -46,18 +46,18 @@ assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('righ
-
-
-
-
- --fcc-editable-region-- +
+
+
+
+ --fcc-editable-region-- - --fcc-editable-region-- -
-
-
-
+ --fcc-editable-region--
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md index 0aeb91e37c5..e2c6b0d7270 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md @@ -38,21 +38,21 @@ assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md index 93f8b55110d..baab745f1fc 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgrou
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md index 06913231b25..65177141191 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md index daf39f04bc2..7f1217863cb 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md index e7e1e08d7d6..f58a6c3be23 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md index 4db8d4b4bf1..e541ed986f1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md index 49b582c8122..65abcbd6980 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md index 691f0edcf19..c450aec6d02 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md index f2120b16399..344f076a7cb 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md index 24903793663..c3025f30e00 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md index 36ae761043f..5a2ac8c4576 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md index cca74090348..577f2defc26 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md index 93b75fdabb3..b628f0b26bf 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md index 5a3c7260866..f5b6592e23b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md @@ -50,23 +50,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md index c33e2cd1632..4fbeb7d2da2 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md @@ -35,23 +35,23 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBotto
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md index ecd0c3d8d9d..715f6b2aab4 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md index ebf5bee0760..9607d407193 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md @@ -50,23 +50,23 @@ assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md index a184c05fa2b..f9f0d98d71a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md @@ -44,23 +44,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md index 134e0b9d453..1e9987d2af2 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md @@ -32,23 +32,23 @@ assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md index d9d9ce2d492..6da6436d865 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md @@ -38,26 +38,26 @@ assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md index 12257ed487b..fc6624cf01d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md @@ -50,28 +50,28 @@ assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('i
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md index 95821ffd73f..4ae1d92b8dd 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md @@ -48,32 +48,32 @@ assert(second?.classList?.contains('right'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md index 9dcc84f1369..f47855a9964 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md @@ -48,35 +48,35 @@ for (const icon of icons) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md index 033129b1e9d..d2539605125 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md index da9431990be..b38616d4fb5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md index c0479e634e9..f823e4b3a46 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md index 1438517fc5c..d6625428696 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md index 76a28f9a71f..6a95b577404 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md index f3c4900fc53..c443bdd4f7d 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md index c9853dcb97b..876edf430eb 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md index ad4577d4db6..7150e0414d1 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md index d6e4f4de422..68d4508d347 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md @@ -44,36 +44,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md index dec2fc82756..bd7315bc512 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md index cd13b928c63..807e2201202 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md @@ -50,36 +50,36 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md index 700d42bd9e5..15cf9fd1e29 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md @@ -38,38 +38,38 @@ assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md index ddc09cfa945..46a3b7cca52 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md index 3e18b706ce4..cf8474454bf 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md index 68b911c7e19..896ebd0917e 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md index b7d4a7ec3e4..81a821f8b38 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md @@ -44,38 +44,38 @@ assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md index 1a091a4d7d7..c2144ec00bf 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md @@ -38,41 +38,41 @@ assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md index 2a121703b30..7dfd9afbc7a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md @@ -56,43 +56,43 @@ assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md index a1f71d154ad..1a8c427d0aa 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md @@ -46,48 +46,48 @@ assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('r
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md index e6da2ccaba9..979fc6d60df 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md @@ -41,51 +41,51 @@ for (const div of divDivDiv) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md index 203015c21e9..4555c087df9 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md @@ -70,82 +70,82 @@ assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md index 3d897d06897..33c2fe02fcd 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md @@ -47,88 +47,88 @@ assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- -
-
- -
- --fcc-editable-region-- -
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ +
+
+ +
+ --fcc-editable-region-- +
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md index f0080fa1d64..b65909aae13 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.background
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md index da129e8af50..f9d49d501b9 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md index 2213ada472d..cf9689fca41 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundC
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md index af91fc31295..8144637db12 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadiu
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md index 4fd2ca6c512..0431ebeac04 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md index 4b87f51713e..8e86b115363 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex ===
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md index 0624f4c0bf1..fb711834645 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md index 73f21f51994..02f71d0870c 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md index b55d34432c3..a02fb29f7a5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md index 625c1544cc0..17ad13cc491 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md index 74d9aa66e15..15df5362b06 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'a
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md index a517fe088ef..0078d6662ed 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md index 22ea04aecc3..55ef10042bc 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md index 7e1515cc843..368cad2b4d2 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md index c73b123fac6..6ad9b197e63 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md index a8fad38d2a0..f94dde1e303 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3')
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md index b5717b70a07..4c2d35de10b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md @@ -56,86 +56,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md index ab3cd7f3a26..351ccffecd5 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md index 42bd38cee41..b9ccd34f418 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md index 7436166f47d..82fcfc08df9 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md @@ -40,86 +40,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md index d20fc10a646..9ad6644b67a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inlin
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md index 5d0805274ec..d286e61f0a6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md @@ -50,86 +50,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor =
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md index 81e47d3ae36..360c58c9559 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md @@ -38,86 +38,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '4
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md index a1674746e44..a69a199771b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md index 448ec3b6455..f6aad43ff9b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md index 1e59f56e858..1e40df40020 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md index 3caffc72c43..d4fd1b7a04f 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md @@ -44,86 +44,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md index 1e7fd88ae07..70fce0ac439 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md @@ -32,86 +32,86 @@ assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md index 274712cb9d7..93068f9d783 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md @@ -32,36 +32,36 @@ assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md new file mode 100644 index 00000000000..76b0b3990c3 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md @@ -0,0 +1,62 @@ +--- +id: 616d50b93ba424d6282c99cf +title: Крок 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Зверніть увагу, що ваш маркер не має жодного кольору. Насправді фоновий колір було застосовано, але оскільки маркер-елемент `div` порожній, то немає ніякої висоти за замовчуванням. + +В CSS-правилі `.marker` встановіть значення властивості `width` на `200px` та значення властивості `height` на `25px`. + +# --hints-- + +Ваше CSS-правило `.marker` повинне мати властивість `width` зі значенням `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px'); +``` + +Ваше CSS-правило `.marker` повинне мати властивість `height` зі значенням `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + background-color: red; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md new file mode 100644 index 00000000000..22056239b89 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md @@ -0,0 +1,60 @@ +--- +id: 616d525007b8c5d8b3308b1c +title: Крок 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Ваш маркер мав би кращий вигляд, якби був по центру сторінки. Це легко зробити завдяки скороченій властивості `margin`. + +В останньому проєкті ви окремо встановлювали поля елементів з допомогою таких властивостей, як `margin-top` та `margin-left`. Скорочена властивість `margin` дозволяє легко встановлювати декілька полів одночасно. + +Щоб зцентрувати маркер на сторінці, встановіть його властивість `margin` на `auto`. Це встановлює `margin-top`, `margin-right`, `margin-bottom` та `margin-left` на `auto`. + +# --hints-- + +Ваше CSS-правило `.marker` повинне мати властивість `margin` зі значенням `auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md new file mode 100644 index 00000000000..8b572674149 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md @@ -0,0 +1,91 @@ +--- +id: 616d55bd160a95e22453a081 +title: Крок 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Тепер, коли у вас є один кольоровий маркер в центрі, настав час додати інші маркери. + +В `div` `container` додайте ще два елементи `div` та надайте кожному клас зі значенням `marker`. + +# --hints-- + +Ваш перший новий елемент `div` повинен мати початковий теґ. + +```js +assert([...code.matchAll(//gi)][2]); +``` + +Ваш перший новий елемент `div` повинен мати кінцевий теґ. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][2]); +``` + +Ваш другий новий елемент `div` повинен мати початковий теґ. + +```js +assert([...code.matchAll(//gi)][3]); +``` + +Ваш другий новий елемент `div` повинен мати кінцевий теґ. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][3]); +``` + +Ваші нові елементи `div` повинні бути в межах `div` класу `container`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3); +``` + +Обидва нові елементи `div` повинні мати клас зі значенням `marker`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.classList?.contains('marker'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+--fcc-editable-region-- +
+
+
+
+--fcc-editable-region-- + + +``` + +```css +h1 { + text-align: center; +} + +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: auto; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md new file mode 100644 index 00000000000..2f445d0a805 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md @@ -0,0 +1,65 @@ +--- +id: 616d595270d902f0e7086e18 +title: Крок 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Хоча у вас є три окремі маркер-елементи `div`, вони виглядають як один великий прямокутник. Ви повинні додати між ними деякий проміжок, щоб легше було бачити кожен елемент. + +Коли скорочена властивість `margin` має два значення, вона встановлює для `margin-top` та `margin-bottom` перше значення, а для `margin-left` та `margin-right` друге. + +В CSS-правилі `.marker` встановіть властивість `margin` зі значенням `10px auto`. + +# --hints-- + +Ваше CSS-правило `.marker` повинне мати властивість `margin` зі значенням `10px auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.marker { + width: 200px; + height: 25px; + background-color: red; + margin: auto; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md new file mode 100644 index 00000000000..454114b9cc6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md @@ -0,0 +1,84 @@ +--- +id: 617b65579ce424bf5f02ca73 +title: Крок 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Раніше ви дізналися, що колірна модель RGB є адитивною. Це означає, що кольори починаються з чорного та змінюються, коли вводяться різні рівні червоного, зеленого та синього. + +Це легко побачити з допомогою CSS-функції `rgb`. + +Створіть нове CSS-правило, націлене на клас `container` та встановіть його `background-color` на чорний з `rgb(0, 0, 0)`. + +# --hints-- + +Ви повинні використати селектор класу, щоб націлити клас `container`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')); +``` + +Ваше CSS-правило `.container` повинне мати властивість `background-color` зі значенням `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: red; +} + +.two { + background-color: green; +} + +.three { + background-color: blue; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md new file mode 100644 index 00000000000..3a47c88d2b8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md @@ -0,0 +1,90 @@ +--- +id: 617b8b38f32bf2080a140675 +title: Крок 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Функція – це фрагмент коду, який може приймати вхідні дані та виконувати певну дію. CSS-функція `rgb` приймає значення, або аргументи, для червоного, зеленого та синього кольорів та створює колір: + +```css +rgb(red, green, blue); +``` + +Кожне червоне, зелене та синє значення – це число від `0` до `255`. `0` означає, що є 0% цього кольору, та це чорний колір. `255` означає, що є 100% цього кольору. + +В CSS-правилі `.one` замініть ключове слово `red` на функцію `rgb`. Для функції `rgb` встановіть значення для червоного на `255`, для зеленого — `0` та для синього — `0`. + +# --hints-- + +Ваше CSS-правило `.one` не повинне використовувати ключове слово `red` для встановлення властивості `background-color`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red'); +``` + +Ваше CSS-правило `.one` повинне мати властивість `background-color` зі значенням `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: red; +} +--fcc-editable-region-- + +.two { + background-color: green; +} + +.three { + background-color: blue; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md new file mode 100644 index 00000000000..4f6cc1de716 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md @@ -0,0 +1,78 @@ +--- +id: 617b92b9de349513466f6156 +title: Крок 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Червоний та синій маркери виглядають так само, а зелений набагато світліший, ніж був раніше. Це тому що ключове слово `green` насправді є темнішим відтінком та знаходиться приблизно посередині між чорним і максимальним значенням для зеленого. + +В CSS-правилі `.two` встановіть зелене значення в функції `rgb` на `127`, щоб зменшити його інтенсивність. + +# --hints-- + +Ваше CSS-правило `.two` повинне мати властивість `background-color` зі значенням `rgb(0, 127, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md new file mode 100644 index 00000000000..31586470e50 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md @@ -0,0 +1,84 @@ +--- +id: 617b954d9f4f6217a749380e +title: Крок 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Тепер додайте трохи більше вертикального простору між вашими маркерами та краєм елемента `container`, в якому вони знаходяться. + +В CSS-правилі `.container` використайте скорочену властивість `padding`, щоб додати `10px` верхнього і нижнього відступу та `0` лівого і правого відступу. Це працює подібно до скороченої властивості `margin`, яку ви використовували раніше. + +# --hints-- + +Ви не повинні видаляти властивість `background-color` та її значення з CSS-правила `.container`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Ваше CSS-правило `.container` повинне мати властивість `padding` зі значенням `10px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.container { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 127, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md new file mode 100644 index 00000000000..a73940a82d9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md @@ -0,0 +1,79 @@ +--- +id: 617b97abd9f3f61d1590b815 +title: Крок 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Основні кольори в адитивній колірній моделі RGB — це кольори, які в поєднанні створюють чистий білий колір. Але щоб це сталося, кожен колір повинен бути найвищої інтенсивності. + +Перш ніж комбінувати кольори, знову встановіть зелений маркер на чистий зелений. Для функції `rgb` в CSS-правилі `.two` встановіть зелений на максимальне значення `255`. + +# --hints-- + +Ваше CSS-правило `.two` повинне мати властивість `background-color` зі значенням `rgb(0, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(0, 0, 0); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 127, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md new file mode 100644 index 00000000000..f52f104d33e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md @@ -0,0 +1,79 @@ +--- +id: 617b9ad735109e217284e095 +title: Крок 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Тепер, коли у вас є основні кольори RGB, настав час їх поєднати. + +Для функції `rgb` в правилі `.container` встановіть максимальне значення для червоного, зеленого та синього на `255`. + +# --hints-- + +Ваше CSS-правило `.container` повинне мати властивість `background-color` зі значенням `rgb(255, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +--fcc-editable-region-- +.container { + background-color: rgb(0, 0, 0); + padding: 10px 0; +} +--fcc-editable-region-- + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 255, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md new file mode 100644 index 00000000000..50d9a0e4266 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md @@ -0,0 +1,79 @@ +--- +id: 617bb5624a75e86463b7e638 +title: Крок 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Вторинні кольори – це кольори, які ви отримаєте, якщо поєднаєте основні кольори. Ви могли помітити деякі вторинні кольори в останньому кроці, коли змінювали значення червоного, зеленого та синього. + +Щоб створити перший вторинний колір, жовтий, оновіть функцію `rgb` в CSS-правилі `.one`, щоб поєднати чистий червоний та чистий зелений. + +# --hints-- + +Ваше CSS-правило `.one` повинне мати властивість `background-color` зі значенням `rgb(255, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.two { + background-color: rgb(0, 255, 0); +} + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md new file mode 100644 index 00000000000..445c0208738 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md @@ -0,0 +1,77 @@ +--- +id: 617bb77353188166af43f3ac +title: Крок 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Щоб створити наступний вторинний колір, блакитний, оновіть функцію `rgb` в CSS-правилі `.two`, щоб поєднати чистий зелений та чистий синій. + +# --hints-- + +Ваше CSS-правило `.two` повинне мати властивість `background-color` зі значенням `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 255, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md new file mode 100644 index 00000000000..870e7b32330 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md @@ -0,0 +1,77 @@ +--- +id: 617bb9fdef27bc6aa0470ac2 +title: Крок 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Щоб створити останній вторинний колір, пурпуровий, оновіть функцію `rgb` в CSS-правилі `.three`, щоб поєднати чистий синій та чистий червоний. + +# --hints-- + +Ваше CSS-правило `.three` повинне мати властивість `background-color` зі значенням `rgb(255, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 255, 0); +} + +.two { + background-color: rgb(0, 255, 255); +} + +--fcc-editable-region-- +.three { + background-color: rgb(0, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md new file mode 100644 index 00000000000..72281e32df5 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md @@ -0,0 +1,79 @@ +--- +id: 617bbb6b97a83f6d1f7d6e38 +title: Крок 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Тепер, коли ви знайомі з вторинними кольорами, ви навчитеся створювати третинні кольори. Третинні кольори створюються шляхом поєднання основного кольору з сусіднім вторинним. + +Щоб створити третинний оранжевий колір, оновіть функцію `rgb` в CSS-правилі `.one`, щоб червоний мав максимальне значення, а зелений – `127`. + +# --hints-- + +Ваше CSS-правило `.one` повинне мати властивість `background-color` зі значенням `rgb(255, 127, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 255, 0); +} +--fcc-editable-region-- + +.two { + background-color: rgb(0, 255, 255); +} + +.three { + background-color: rgb(255, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md new file mode 100644 index 00000000000..093065fabed --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md @@ -0,0 +1,79 @@ +--- +id: 617bc3386dc7d07d6469bf20 +title: Крок 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Зверніть увагу: щоб створити оранжевий, вам потрібно змінити значення `rgb`, а саме збільшити інтенсивність червоного та зменшити інтенсивність зеленого. Це тому що оранжевий колір є комбінацією червоного та жовтого, та знаходиться між двома кольорами на колірному колі. + +Щоб створити третинний яскраво-зелений, поєднайте блакитний з зеленим. Оновіть функцію `rgb` в CSS-правилі `.two`, щоб зелений мав максимальне значення, та встановіть для синього значення `127`. + +# --hints-- + +Ваше CSS-правило `.two` повинне мати властивість `background-color` зі значенням `rgb(0, 255, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 127, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.three { + background-color: rgb(255, 0, 255); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md new file mode 100644 index 00000000000..44d5142f3e4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md @@ -0,0 +1,77 @@ +--- +id: 617bc4824e233180553a8069 +title: Крок 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +А щоб створити третинний фіолетовий, поєднайте пурпурний з синім. Оновіть функцію `rgb` в CSS-правилі `.three`, щоб синій мав максимальне значення, та встановіть для червоного значення `127`. + +# --hints-- + +Ваше CSS-правило `.three` повинне мати властивість `background-color` зі значенням `rgb(127, 0, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(255, 127, 0); +} + +.two { + background-color: rgb(0, 255, 127); +} + +--fcc-editable-region-- +.three { + background-color: rgb(255, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md new file mode 100644 index 00000000000..1a6a4ea765c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md @@ -0,0 +1,95 @@ +--- +id: 617bd6ec666b1da2587e4e37 +title: Крок 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Є ще три третинні кольори: шартрез (зелений + жовтий), лазуровий (синій + блакитний) та рожевий (червоний + пурпуровий). + +Щоб створити шартрез, оновіть функцію `rgb` в правилі `.one`, щоб червоний мав значення `127` та встановіть для зеленого максимальне значення. + +Для лазурного, оновіть функцію `rgb` в правилі `.two`, щоб зелений мав значення `127`, а синій – максимальне. + +А для рожевого оновіть функцію `rgb` в правилі `.three`, щоб синій мав значення `127`, а червоний – максимальне. + +# --hints-- + +Ваше CSS-правило `.one` повинне мати властивість `background-color` зі значенням `rgb(127, 255, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)'); +``` + +Ваше CSS-правило `.two` повинне мати властивість `background-color` зі значенням `rgb(0, 127, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)'); +``` + +Ваше CSS-правило `.three` повинне мати властивість `background-color` зі значенням `rgb(255, 0, 127)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(255, 127, 0); +} + +.two { + background-color: rgb(0, 255, 127); +} + +.three { + background-color: rgb(127, 0, 255); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md index 5dd3e34b56c..b6ffb98639f 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md @@ -9,7 +9,7 @@ dashedName: step-35 Ви ознайомилися з всіма основними, вторинними та третинними кольорами на колірному колі, отож вам буде легше зрозуміти інші концепції теорії кольору та їхній вплив на дизайн. -Спочатку налаштуйте значення в функції `rgb` в правилах `.one`, `.two` та `.three` таким чином, що `background-color` кожного елемента встановлено на чисто чорний. Пам’ятайте, що функція `rgb` використовує адитивну колірну модель, де кольори починаються з чорного та змінюються зі збільшенням значень червоного, зеленого та синього. +Спочатку налаштуйте значення в функції `rgb` в правилах `.one`, `.two` та `.three` таким чином, що `background-color` кожного елемента встановлено на чистий чорний. Пам’ятайте, що функція `rgb` використовує адитивну колірну модель, де кольори починаються з чорного та змінюються зі збільшенням значень червоного, зеленого та синього. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md new file mode 100644 index 00000000000..21a52b885f3 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md @@ -0,0 +1,87 @@ +--- +id: 618a0927005553b74bfa05ae +title: Крок 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Колірне коло – це коло в якому подібні кольори або відтінки знаходяться поруч один з одним, а різні віддаляються. Наприклад, чистий червоний знаходиться між відтінками рожевого та оранжевого. + +Два кольори, протилежні один одному на колірному колі, називають доповняльними кольорами. Якщо поєднати два доповняльних кольори, вони створять сірий. Але коли вони розташовані поруч, то створюють сильний візуальний контраст та виглядають яскравішими. + +В функції `rgb` для CSS-правила `.one` встановіть максимальне значення червоного на `255`, щоб отримати чистий червоний. В функції `rgb` для CSS-правила `.two` встановіть максимальне значення для зеленого та синього на `255`, щоб отримати блакитний. + +# --hints-- + +Ваше CSS-правило `.one` повинне мати властивість `background-color` зі значенням `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +Ваше CSS-правило `.two` повинне мати властивість `background-color` зі значенням `rgb(0, 255, 255)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md index ea9f959bdc3..49e5c7b88eb 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md @@ -7,7 +7,7 @@ dashedName: step-37 # --description-- -Зверніть увагу, що червоний та блакитний кольори дуже яскраві поруч один з одним. Цей контраст може відвертати увагу, якщо його надмірно використовувати на вебсайті, та може ускладнити читання тексту, якщо він розміщений на фоні з доповняльних кольорів. +Зверніть увагу, що червоний та блакитний дуже яскраві один біля одного. Цей контраст може відвертати увагу, якщо його надмірно використовувати на вебсайті, та може ускладнити читання тексту, якщо він розміщений на фоні з доповняльних кольорів. Краще вибрати один домінантний колір та використовувати його доповняльний колір як акцент, щоб привернути увагу до певного вмісту на сторінці. diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md new file mode 100644 index 00000000000..9b009e056e8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md @@ -0,0 +1,82 @@ +--- +id: 618a132676346ac9f7fd59dd +title: Крок 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Помітили, як ваші очі природно притягуються до червоного кольору в центрі? Під час розробки сайту ви можете використовувати цей ефект, щоб привернути увагу до важливих заголовків, кнопок або посилань. + +Є ще кілька важливих комбінацій кольорів, крім доповняльних кольорів, але ви дізнаєтесь про них трохи пізніше. + +Наразі використайте функцію `rgb` в правилі `.two`, щоб встановити `background-color` на чорний. + +# --hints-- + +Ваше CSS-правило `.two` повинне мати властивість `background-color` зі значенням `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +--fcc-editable-region-- +.two { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md new file mode 100644 index 00000000000..1552421c645 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md @@ -0,0 +1,79 @@ +--- +id: 618a16873520a8d088ffdf44 +title: Крок 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +А в правилі `h1` видаліть властивість `background-color` та її значення, щоб повернутися до білого кольору за замовчуванням. + +# --hints-- + +Ваше CSS-правило `h1` не повинне мати властивості `background-color`. + +```js +const backgroundColorInstances = code.match(/background-color:.*;/gi); +assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +h1 { + text-align: center; + background-color: rgb(0, 255, 255); +} +--fcc-editable-region-- + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.one { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md index d46f99830fb..97dc2ec14fe 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md @@ -9,7 +9,7 @@ dashedName: step-41 Тепер час додати інші деталі до маркерів, розпочавши з першого. -В першому маркер-елементі `div`, змініть клас `one` на `red`. +В першому маркер-елементі `div` змініть клас `one` на `red`. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md new file mode 100644 index 00000000000..ac7475494d5 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md @@ -0,0 +1,77 @@ +--- +id: 619b7396e57b771f903be90d +title: Крок 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Та оновіть функцію `rgb` в правилі `.red`, щоб значення червоного було максимальним. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background-color` зі значенням `rgb(255, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(0, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md new file mode 100644 index 00000000000..2d340676257 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md @@ -0,0 +1,99 @@ +--- +id: 619b7424f43ec9215e538afe +title: Крок 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Потім змініть клас `two` на `green` в другому маркері `div` та клас `three` на `blue` в третьому маркері `div`. + +# --hints-- + +Ваш другий маркер `div` не повинен мати клас `two`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(!containerSecondChild?.classList?.contains('two')); +``` + +Ваш другий маркер `div` повинен мати класи `marker` та `green`. + +```js +const containerSecondChild = [...document.querySelector('.container')?.children][1]; +assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); +``` + +Ваш третій маркер `div` не повинен мати клас `three`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(!containerThirdChild?.classList?.contains('three')); +``` + +Ваш третій маркер `div` повинен мати класи `marker` та `blue`. + +```js +const containerThirdChild = [...document.querySelector('.container')?.children][2]; +assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md new file mode 100644 index 00000000000..b9d8a458b71 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md @@ -0,0 +1,107 @@ +--- +id: 619b74fa777a2b2473c94f82 +title: Крок 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Оновіть селектор CSS-класу `.two`, щоб він був націлений на новий клас `green`. Та оновіть селектор `.three`, щоб він був націлений на новий клас `blue`. + +# --hints-- + +Вашому коду більше не потрібен селектор класу `.two`. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.two')); +``` + +Ви повинні використати селектор класу, щоб націлити клас `green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')); +``` + +Ваше CSS-правило `.green` повинне мати властивість `background-color` зі значенням `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +Вашому коду більше не потрібен селектор класу `.three`. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.three')); +``` + +Ви повинні використати селектор класу, щоб націлити клас `blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Ваше CSS-правило `.blue` повинне мати властивість `background-color` зі значенням `rgb(0, 0, 0)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} + +.two { + background-color: rgb(0, 0, 0); +} + +.three { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md new file mode 100644 index 00000000000..37c6fc10115 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md @@ -0,0 +1,81 @@ +--- +id: 619b761916dac02643940022 +title: Крок 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Поширений спосіб застосування кольору до елемента в CSS містить шістнадцяткові значення. Хоча шістнадцяткові значення здаються важкими для розуміння, це просто інша форма значень RGB. + +Шістнадцяткове значення кольору починається з символу `#` та містить шість символів 0-9 та A-F. Перша пара символів представляє червоний колір, друга пара – зелений, а третя пара – синій. Наприклад, `#4B5320`. + +В CSS-правилі `.green` встановіть для властивості `background-color` шістнадцятковий код кольору зі значеннями `00` для червоного, `FF` для зеленого та `00` для синього. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати властивість `background-color` зі значенням `#00FF00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md new file mode 100644 index 00000000000..0a1142c52bd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md @@ -0,0 +1,85 @@ +--- +id: 619b7c3c83de403126b69c1e +title: Крок 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Мабуть, ви вже знайомі з десятковими значеннями, або значеннями з основою 10, які йдуть від 0 до 9. Шістнадцяткові значення, або значення з основою 16, йдуть від 0 до 9, потім від A до F: + +``` +0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F +``` + +Для шістнадцяткових кольорів `00` – це 0% цього кольору, а `FF` – це 100%. Отже, `#00FF00` означає 0% червоного, 100% зеленого та 0% синього, тобто те саме, що й `rgb(0, 255, 0)`. + +Зменште інтенсивність зеленого, встановивши зелене значення шістнадцяткового кольору на `7F`. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати властивість `background-color` зі значенням `#007F00`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +--fcc-editable-region-- +.green { + background-color: #00FF00; +} +--fcc-editable-region-- + +.blue { + background-color: rgb(0, 0, 0); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md new file mode 100644 index 00000000000..8b690536f74 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md @@ -0,0 +1,87 @@ +--- +id: 619b7fd56aa2253778bcf5f7 +title: Крок 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Колірна модель HSL, або відтінок, насиченість та освітленість, – ще один спосіб представлення кольорів. + +CSS-функція `hsl` приймає 3 значення: число від 0 до 360 для відтінку, відсоток від 0 до 100 для насиченості та відсоток від 0 до 100 для освітленості. + +Якщо уявити колірне коло, то відтінок червоного – 0 градусів, зеленого – 120 градусів та синього – 240 градусів. + +Насиченість – це інтенсивність кольору від 0%, або сірого, до 100% чистого кольору. + +Освітленість – наскільки яскравим здається колір від 0% (повністю чорний) до 100% (повністю білий), з 50% нейтральності. + +В CSS-правилі `.blue` використайте функцію `hsl`, щоб змінити властивість `background-color` на чистий синій. Встановіть відтінок на `240`, насиченість на `100%` та освітленість на `50%`. + +# --hints-- + +Ваше CSS-правило `.blue` повинне мати властивість `background-color` зі значенням `hsl(240, 100%, 50%)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background-color: rgb(255, 0, 0); +} + +.green { + background-color: #007F00; +} + +--fcc-editable-region-- +.blue { + background-color: rgb(0, 0, 0); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md new file mode 100644 index 00000000000..ae75f8e4795 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md @@ -0,0 +1,83 @@ +--- +id: 61a489b8579e87364b2d2cdb +title: Крок 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Ви вже вивчили декілька способів встановлення плоских кольорів в CSS, але ви також можете використовувати перехід кольорів, або градієнт. + +Градієнт – це перехід одного кольору в інший. CSS-функція `linear-gradient` дозволяє керувати напрямком переходу вздовж лінії та кольорами, які використані. + +Одна річ, яку слід пам’ятати: функція `linear-gradient` фактично створює елемент `image` та зазвичай поєднується з властивістю `background`, яка може приймати зображення як значення. + +В CSS-правилі `.red` змініть властивість `background-color` на `background`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `rgb(255, 0, 0)`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.red').cssText, 'background: rgb(255, 0, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background-color: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md new file mode 100644 index 00000000000..2df946db0be --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md @@ -0,0 +1,87 @@ +--- +id: 61a493ead935c148d2b76312 +title: Крок 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Функція `linear-gradient` є дуже гнучкою – ось основний синтаксис, який ви використовуватимете в цьому туторіалі: + +```css +linear-gradient(gradientDirection, color1, color2, ...); +``` + +`gradientDirection` – це напрямок лінії, використаної для переходу. `color1` та `color2` — це аргументи, тобто кольори, які використовуватимуться в самому переході. Це можуть бути будь-які типи кольорів, включаючи ключові слова, шістнадцяткові, `rgb` або `hsl`. + +Тепер ви застосуєте градієнт від червоного до зеленого уздовж лінії під кутом 90 градусів до першого маркера. + +Спочатку в CSS-правилі `.red` встановіть для властивості `background` значення `linear-gradient()` та передайте значення `90deg` як `gradientDirection`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(90deg)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: rgb(255, 0, 0); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md new file mode 100644 index 00000000000..a34b0d1736e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md @@ -0,0 +1,79 @@ +--- +id: 61a498399534644f59cff05e +title: Крок 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Як бачите, функція `linear-gradient` створила плавний червоно-зелений градієнт. Хоча для роботи функції `linear-gradient` потрібно щонайменше два аргументи кольору, вона може приймати багато аргументів. + +Використайте функцію `rgb`, щоб додати чистий синій як третій аргумент для функції `linear-gradient`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md new file mode 100644 index 00000000000..9a71332e249 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md @@ -0,0 +1,85 @@ +--- +id: 61a49d15bdbb5e57cc6fd280 +title: Крок 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Кольорові зупинки дозволяють точно налаштувати розташування кольорів уздовж лінії градієнта. Це одиниці довжини, як-от `px` (пікселі) або відсотки, які слідують за кольором в функції `linear-gradient`. + +Наприклад, в цьому червоно-чорному градієнті перехід від червоного до чорного відбувається в точці 90% уздовж лінії градієнта, тому червоний колір займає більшу частину доступного простору: + +```css +linear-gradient(90deg, red 90%, black); +``` + +В функції `linear-gradient` додайте кольорову зупинку на `75%` після першого аргумента червоного. Не додавайте кольорові зупинки до інших аргументів. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md new file mode 100644 index 00000000000..308e3ed251a --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md @@ -0,0 +1,79 @@ +--- +id: 61a4a53c4459446dc134a1c6 +title: Крок 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Тепер ви знаєте основи роботи функції `linear-gradient` та кольорових зупинок, і можете їх використати для того, щоб маркери виглядали реалістичніше. + +В функції `linear-gradient` встановіть `gradientDirection` на `180deg`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`. + +```js +assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md index a0192956e29..48e22e9136b 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md @@ -7,7 +7,7 @@ dashedName: step-56 # --description-- -Далі встановіть color-stop для червоного на `0%`, для зеленого на `50%` та для синього на `100%`. +Далі встановіть кольорову зупинку для червоного на `0%`, для зеленого на `50%` та для синього на `100%`. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md new file mode 100644 index 00000000000..edb2a2d1fde --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md @@ -0,0 +1,79 @@ +--- +id: 61a4a7877da33a73a1c1723e +title: Крок 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Тепер, коли кольорові зупинки встановлені, ви застосуєте різні відтінки червоного до кожного аргумента в функції `linear-gradient`. Відтінки зверху та знизу маркера будуть темнішими, а середина буде світлішою, ніби над нею є світло. + +В першому аргументі, який зараз чистий червоний, оновіть функцію `rgb` таким чином, що значення червоного буде `122`, зеленого – `74` та синього – `14`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md new file mode 100644 index 00000000000..a1fd249d75b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md @@ -0,0 +1,79 @@ +--- +id: 61a4ac092eb21e7dbfe61c33 +title: Крок 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Тепер змініть другий аргумент в функції `linear-gradient`, який наразі чистий зелений. + +Оновіть функцію `rgb`, щоб значення червоного було `245`, значення зеленого – `62` та значення синього – `113`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md new file mode 100644 index 00000000000..a94edac573f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md @@ -0,0 +1,79 @@ +--- +id: 61a4acbb5587197f68544d00 +title: Крок 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Зрештою, змініть третій аргумент в функції `linear-gradient`, який наразі чистий синій. + +Оновіть функцію `rgb`, щоб значення червоного було `162`, значення зеленого – `27` та значення синього – `27`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`. + +```js +assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md new file mode 100644 index 00000000000..1411c5c789a --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md @@ -0,0 +1,79 @@ +--- +id: 61a4ada3aabeec822b2975d9 +title: Крок 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Червоний маркер виглядає набагато реалістичніше. Тепер зробіть те саме для зеленого маркера, використовуючи комбінацію функції `linear-gradient` та шістнадцяткових кольорів. + +В CSS-правилі `.green` змініть властивість `background-color` на `background`. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати властивість `background` зі значенням `#007F00`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.green').cssText, 'background: rgb(0, 127, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background-color: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md new file mode 100644 index 00000000000..5c6b3d0798f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md @@ -0,0 +1,79 @@ +--- +id: 61a4ae5f29eb5584187201c3 +title: Крок 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Для цього маркера ви використовуватимете шістнадцятковий код кольору для градієнта. + +Використайте функцію `linear-gradient` та встановіть `gradientDirection` на `180deg`. А для першого аргумента використайте шістнадцятковий код кольору зі значеннями `55` для червоного, `68` для зеленого та `0D` для синього. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати властивість `background` зі значенням `linear-gradient(180deg, #55680D)`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: #007F00; +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md new file mode 100644 index 00000000000..e184aa00fa6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md @@ -0,0 +1,79 @@ +--- +id: 61a5be9833e7dc178de2af10 +title: Крок 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Так краще, але нижній край зеленого маркера повинен бути темнішим, щоб додати трохи більше розмірності. + +В ту саму функцію `linear-gradient` додайте шістнадцятковий код кольору зі значеннями `11` для червоного, `6C` для зеленого та `31` для синього як третього аргументу. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати властивість `background` зі значенням `linear-gradient(180deg, #55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D, #71F53E); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md new file mode 100644 index 00000000000..9d24dfea022 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md @@ -0,0 +1,81 @@ +--- +id: 61a5bfe091060f1d6a629dd0 +title: Крок 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Навіть без кольорових зупинок ви могли помітити, що кольори для зеленого маркера переходять в тих самих точках, що й для червоного. Перший колір знаходиться на початку (0%), другий – в середині (50%), а останній – в кінці (100%) лінії градієнта. + +Функція `linear-gradient` автоматично обчислює ці значення та рівномірно розміщує кольори вздовж лінії градієнта за замовчуванням. + +В CSS-правилі `.red` видаліть три кольорові зупинки з функції `linear-gradient`, щоб трохи очистити код. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md new file mode 100644 index 00000000000..6cd2243f531 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md @@ -0,0 +1,91 @@ +--- +id: 61a5c906ab73313316e342f0 +title: Крок 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Якщо не надано аргумент `gradientDirection` для функції `linear-gradient`, то вона розташовує кольори зверху вниз або вздовж лінії під кутом 180 градусів за замовчуванням. + +Ще трохи очистьте свій код, видаливши аргумент `gradientDirection` з обох функцій `linear-gradient`. + +# --hints-- + +Ви повинні видалити аргументи `gradientDirection` із функцій `linear-gradient` в CSS-правилах `.red` та `.green`. + +```js +assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); +``` + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +Ваше CSS-правило `.green` повинне мати властивість `background` зі значенням `linear-gradient(#55680D, #71F53E, #116C31)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(180deg, #55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md new file mode 100644 index 00000000000..fc9927133dd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md @@ -0,0 +1,79 @@ +--- +id: 61a5ca57f50ded36d33eef96 +title: Крок 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Зараз ви застосуєте градієнт до синього маркера, цього разу використовуючи функцію `hsl` як аргумент. + +В CSS-правилі `.blue` змініть властивість `background-color` на `background`. + +# --hints-- + +Ваше CSS-правило `.blue` повинне мати властивість `background` зі значенням `hsl(240, 100%, 50%)`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.blue').cssText, 'background: rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background-color: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md new file mode 100644 index 00000000000..03e743e5e0d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md @@ -0,0 +1,77 @@ +--- +id: 61a5d594b887335228ee6533 +title: Крок 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Використайте функцію `linear-gradient` та вкажіть функцію `hsl` зі значеннями `186` для відтінку, `76%` для насиченості та `16%` для освітленості як перший аргумент. + +# --hints-- + +Ваше CSS-правило `.blue` повинне мати властивість `background` зі значенням `linear-gradient(hsl(186, 76%, 16%))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: hsl(240, 100%, 50%); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md new file mode 100644 index 00000000000..009d997c194 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md @@ -0,0 +1,77 @@ +--- +id: 61a5d6701ee08953ca375243 +title: Крок 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Як другий аргумент кольору вкажіть функцію `hsl` зі значеннями `223` для відтінку, `90%` для насиченості та `60%` для освітленості. + +# --hints-- + +Ваше CSS-правило `.blue` повинне мати властивість `background` зі значенням `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md new file mode 100644 index 00000000000..66597f0bc1c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md @@ -0,0 +1,77 @@ +--- +id: 61a5d79c858bef560e26c685 +title: Крок 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +І як третій аргумент, вкажіть функцію `hsl` зі значеннями `240` для відтінку, `56%` для насиченості та `42%` для освітленості. + +# --hints-- + +Ваше CSS-правило `.blue` повинне мати властивість `background` зі значенням `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`. + +```js +assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md new file mode 100644 index 00000000000..e4679f09a21 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md @@ -0,0 +1,87 @@ +--- +id: 61a5d7ef1cfcf45764df07a2 +title: Крок 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Тепер, коли маркери мають правильні кольори, настав час створити насадки для маркерів. Почніть з червоного маркера. + +Всередині червоного маркера `div` створіть новий `div` та надайте йому клас `sleeve`. + +# --hints-- + +Ваш новий елемент `div` повинен бути в межах червоного маркер-елемента `div`. + +```js +const redMarkerChildren = [...document.querySelector('.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); +``` + +Ваш новий елемент `div` повинен мати клас `sleeve`. + +```js +const redMarkerChild = [...document.querySelector('.red')?.children][0]; +assert(redMarkerChild?.classList?.contains('sleeve')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md new file mode 100644 index 00000000000..477a9e261af --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md @@ -0,0 +1,98 @@ +--- +id: 61adc91467b5d59328b9f781 +title: Крок 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +В останньому проєкті ви трохи дізналися про краї та властивість `border-color`. + +Всі елементи HTML мають краї, хоча за замовчуванням для них зазвичай встановлено `none`. З допомогою CSS ви можете керувати всіма аспектами краю елемента та встановлювати край з усіх сторін або лише з однієї сторони за раз. Щоб бачити край, вам потрібно встановити його ширину та стиль. + +В CSS-правилі `.sleeve` додайте властивість `border-left-width` зі значенням `10px`. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати властивість `border-left-width` зі значенням `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md new file mode 100644 index 00000000000..ba3ea23947a --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md @@ -0,0 +1,97 @@ +--- +id: 61add79e739a5faee9d96080 +title: Крок 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Краї мають декілька стилів на вибір. Ви можете зробити край суцільною лінією, а також можете використати штрихову або пунктирну лінію. Суцільні лінії краю, мабуть, найпоширеніші. + +В CSS-правилі `.sleeve` додайте властивість `border-left-style` зі значенням `solid`. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати властивість `border-left-style` зі значенням `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md new file mode 100644 index 00000000000..3eac804df8e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md @@ -0,0 +1,100 @@ +--- +id: 61add929e41980b1edbdba7e +title: Крок 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Тепер ви повинні побачити край. Якщо колір не встановлено, за замовчуванням використовується чорний. + +Але щоб зробити ваш код читабельнішим, краще чітко встановити колір краю. + +В CSS-правилі `.sleeve` додайте властивість `border-left-color` зі значенням `black`. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати властивість `border-left-color` зі значенням `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md new file mode 100644 index 00000000000..b2615c7e7d0 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md @@ -0,0 +1,123 @@ +--- +id: 61addaf7e83988b59a7d18ff +title: Крок 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Скорочена властивість `border-left` дозволяє одночасно встановити ширину, стиль та колір лівого краю. + +Ось синтаксис: + +```css +border-left: width style color; +``` + +В правилі CSS `.sleeve` замініть `border-left-width`, `border-left-style` та `border-left-color` на скорочену властивість `border-left`. Значення ширини, стилю та кольору лівого краю повинні бути однаковими. + +# --hints-- + +Ваше CSS-правило `.sleeve` не повинне мати властивості `border-left-width`. + +```js +assert(!/border-left-width/g.test(code)); +``` + +Ваше CSS-правило `.sleeve` не повинне мати властивості `border-left-style`. + +```js +assert(!/border-left-style/g.test(code)); +``` + +Ваше CSS-правило `.sleeve` не повинне мати властивості `border-left-color`. + +```js +assert(!/border-left-color/g.test(code)); +``` + +Ваше CSS-правило `.sleeve` повинне мати скорочену властивість `border-left` зі значенням `10px solid black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left-width: 10px; + border-left-style: solid; + border-left-color: black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md new file mode 100644 index 00000000000..9e5af80c59c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md @@ -0,0 +1,97 @@ +--- +id: 61ade49b2dad60c076cbd32d +title: Крок 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Ваш маркер має чудовий вигляд. Але щоб це виглядало ще реалістичніше, можна змінити стиль краю на подвійний суцільний край. + +Для скороченої властивості `border-left` змініть значення стилю краю з `solid` на `double`. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати скорочену властивість `border-left` зі значенням `10px double black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px solid black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md new file mode 100644 index 00000000000..d5a2c9e2303 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md @@ -0,0 +1,85 @@ +--- +id: 61b092eb9e7fc020b43b1bb2 +title: Крок 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Щоб зробити так, щоб маркер виглядав реалістичніше, надайте насадці прозорий білий колір. + +Спочатку встановіть значення `background-color` елемента на `white`. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати властивість `background-color` зі значенням `white`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md new file mode 100644 index 00000000000..7643e85a2ac --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md @@ -0,0 +1,88 @@ +--- +id: 61b093179e7fc020b43b1bb3 +title: Крок 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Непрозорість описує наскільки прозорий чи непрозорий об'єкт. Наприклад, суцільна стіна непрозора, і крізь неї не може пройти світло. Але питна склянка набагато прозоріша, і крізь неї можна побачити іншу сторону. + +З допомогою CSS-властивості `opacity` ви можете контролювати, наскільки непрозорим чи прозорим є елемент. Зі значенням `0` або 0% елемент буде повністю прозорим, а зі значенням `1.0` або 100% елемент буде повністю непрозорим, як і за замовчуванням. + +В CSS-правилі `.sleeve` встановіть властивість `opacity` зі значенням `0.5`. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати властивість `opacity` зі значенням `0.5`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md new file mode 100644 index 00000000000..4ccc6586b24 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md @@ -0,0 +1,89 @@ +--- +id: 61b093219e7fc020b43b1bb4 +title: Крок 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Інший спосіб встановити непрозорість для елемента – з допомогою альфа-каналу. Подібно до властивості `opacity`, альфа-канал контролює, наскільки прозорим чи непрозорим є колір. + +Ви вже встановили непрозорість насадки з допомогою названого кольору та властивості `opacity`, але ви можете додати альфа-канал до інших CSS-властивостей кольору. + +Всередині правила `.sleeve` видаліть властивість `opacity` та її значення. + +# --hints-- + +Ваше CSS-правило `.sleeve` не повинне мати властивості `opacity`. + +```js +assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; + opacity: 0.5; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md new file mode 100644 index 00000000000..67471535098 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md @@ -0,0 +1,92 @@ +--- +id: 61b093329e7fc020b43b1bb5 +title: Крок 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Ви вже знайомі з функцією `rgb` для встановлення кольорів. Щоб додати альфа-канал до кольору `rgb`, використовуйте функцію `rgba` натомість. + +Функція `rgba` працює так само, як функція `rgb`, але приймає ще одне число від `0` до `1.0` для альфа-каналу: + +```css +rgba(redValue, greenValue, blueValue, alphaValue); +``` + +В правилі `.sleeve` використайте функцію `rgba`, щоб встановити властивість `background-color` на чистий білий з 50% непрозорістю. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати властивість `background-color` зі значенням `rgba(255, 255, 255, 0.5)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: white; +} +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md new file mode 100644 index 00000000000..419487a7dd7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md @@ -0,0 +1,103 @@ +--- +id: 61b093429e7fc020b43b1bb6 +title: Крок 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Ваша насадка має хороший вигляд, але вона виглядала б ще краще, якби була розташована ближче до правого боку маркера. Один зі способів зробити це – додати ще один елемент перед насадкою, щоб штовхнути її вправо. + +Додайте новий `div` класу `cap` перед насадкою-елементом `div`. + +# --hints-- + +Ваш новий елемент `div` повинен бути в межах червоного маркера `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); +``` + +Ваш новий елемент `div` повинен мати клас `cap`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); +``` + +Ваш ковпачок `div` повинен бути перед насадкою `div`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +const cap = document.querySelector('div.cap'); +const sleeve = document.querySelector('div.sleeve'); +assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md new file mode 100644 index 00000000000..c5b8bcee9d9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md @@ -0,0 +1,99 @@ +--- +id: 61b0934c9e7fc020b43b1bb7 +title: Крок 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Створіть нове CSS-правило, націлене на клас `cap`. В новому правилі встановіть властивості `width` на `60px` та `height` на `25px`. + +# --hints-- + +Ви повинні використати селектор класу, щоб націлити клас `cap`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')); +``` + +Ваше CSS-правило `.cap` повинне мати властивість `width` зі значенням `60px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); +``` + +Ваше CSS-правило `.cap` повинне мати властивість `height` зі значенням `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md new file mode 100644 index 00000000000..f75c94d9b36 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md @@ -0,0 +1,104 @@ +--- +id: 61b0936d9e7fc020b43b1bb8 +title: Крок 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Схоже, ваша насадка зникла, але не хвилюйтеся – вона все ще тут. Що сталось: ваш новий ковпачок `div` займає всю ширину маркера та штовхає насадку вниз до наступного рядка. + +Це тому що за замовчуванням властивість `display` для елементів `div` є `block`. Тому якщо два елементи `block` знаходяться один біля одного, вони складаються як блоки. Наприклад, ваші маркери-елементи складені один на одному. + +Щоб розмістити два елементи `div` в одному рядку, встановіть для їхніх властивостей `display` значення `inline-block`. + +Створіть нове правило, щоб націлити обидва класи `cap` та `sleeve`, та встановіть для `display` значення `inline-block`. + +# --hints-- + +Ви повинні використати селектор класу, щоб націлити класи `cap` та `sleeve`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); +``` + +Ваше CSS-правило повинне мати властивість `display` зі значенням `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md new file mode 100644 index 00000000000..cdd0f81ac31 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md @@ -0,0 +1,79 @@ +--- +id: 61b095989e7fc020b43b1bb9 +title: Крок 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Ви використаєте функцію `rgb` для кольорів цього градієнту. + +В функції `linear-gradient` скористайтеся функцією `rgb`, щоб встановити перший аргумент як чистий червоний. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(90deg, rgb(255, 0, 0))`. + +```js +assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md new file mode 100644 index 00000000000..6089cb3c800 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md @@ -0,0 +1,79 @@ +--- +id: 61b095a79e7fc020b43b1bba +title: Крок 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Ви не побачите градієнт зараз, оскільки функції `linear-gradient` потрібно хоча б два аргументи, щоб запрацювати. + +В тій самій функції `linear-gradient` використайте функцію `rgb`, щоб встановити другий аргумент на чисто зелений. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати властивість `background` зі значенням `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`. + +```js +assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(90deg, rgb(255, 0, 0)); +} +--fcc-editable-region-- + +.green { + background-color: #007F00; +} + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md new file mode 100644 index 00000000000..58f9d9a3339 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md @@ -0,0 +1,77 @@ +--- +id: 61b095c79e7fc020b43b1bbb +title: Крок 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Для другого аргумента використайте шістнадцяткові коди кольорів зі значеннями `71` для червоного, `F5` для зеленого та `3E` для синього. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати властивість `background` зі значенням `linear-gradient(180deg, #55680D, #71F53E)`. + +```js +assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.red { + background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(180deg, #55680D); +} +--fcc-editable-region-- + +.blue { + background-color: hsl(240, 100%, 50%); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md new file mode 100644 index 00000000000..85447594460 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md @@ -0,0 +1,97 @@ +--- +id: 61b09f739aa6572d2064f9b8 +title: Крок 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Чорний колір вашого краю виглядає досить різко, порівнюючи з більш прозорою насадкою. Ви можете використати альфа-канал, щоб зменшити непрозорість чорного краю. + +Для скороченої властивості `border-left` скористайтеся функцією `rgba`, щоб встановити значення кольору на чистий чорний з непрозорістю 75%. + +# --hints-- + +Ваше CSS-правило `.sleeve` повинне мати скорочену властивість `border-left` зі значенням `10px double rgba(0, 0, 0, 0.75)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +--fcc-editable-region-- +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double black; +} +--fcc-editable-region-- + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md new file mode 100644 index 00000000000..7020859e3b7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md @@ -0,0 +1,123 @@ +--- +id: 61b0a1b2af494934b7ec1a72 +title: Крок 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Чудово. Червоний маркер має чудовий вигляд. Тепер все, що вам потрібно зробити, це додати ковпачки та насадки до інших маркерів. + +Додайте ковпачок та насадку до зеленого та синього маркерів. Ви можете просто скопіювати елементи `div` з червоного маркера та вставити їх до двох інших маркерів. + +# --hints-- + +Ваш зелений маркер `div` повинен містити два елементи `div`. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); +``` + +Ковпачок зеленого маркера `div` повинен бути перед насадкою `div`. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +const greenMarkerCap = document.querySelector('.green .cap'); +const greenMarkerSleeve = document.querySelector('.green .sleeve'); +assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); +``` + +Ваш синій маркер `div` повинен містити два елементи `div`. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); +``` + +Ковпачок синього маркера `div` повинен бути перед насадкою `div`. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +const blueMarkerCap = document.querySelector('.blue .cap'); +const blueMarkerSleeve = document.querySelector('.blue .sleeve'); +assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+ --fcc-editable-region-- +
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md new file mode 100644 index 00000000000..1a4f2441257 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md @@ -0,0 +1,109 @@ +--- +id: 61b0a44a6b865738ba49b9fb +title: Крок 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Останнє, що ви зробите, це додасте легку тінь до кожного маркера, щоб вони виглядали ще реалістичніше. + +Властивість `box-shadow` дозволяє застосовувати одну або більше тіней навколо елемента. Ось основний синтаксис: + +```css +box-shadow: offsetX offsetY color; +``` + +Почніть з додавання простої тіні до червоного маркера. + +В CSS-правилі `.red` додайте властивість `box-shadow` зі значеннями `5px` для `offsetX`, `5px` для `offsetY` та `red` для `color`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати скорочену властивість `box-shadow` зі значенням `5px 5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md new file mode 100644 index 00000000000..b48c5e4f1b6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md @@ -0,0 +1,104 @@ +--- +id: 61b306305810f1c9040ce5a2 +title: Крок 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Як бачите, ви додали просту червону тінь навколо свого маркера, яка на 5 пікселів праворуч та на 5 пікселів нижче. + +А що як ви хочете розмістити свою тінь на протилежному боці? Ви можете зробити це, використавши від’ємні значення для `offsetX` та `offsetY`. + +Оновіть значення властивості `box-shadow` та встановіть значення `offsetX` на `-5px`, а `offsetY` на `-5px`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати скорочену властивість `box-shadow` зі значенням `-5px -5px red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 5px 5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md new file mode 100644 index 00000000000..b4410a8c0f2 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md @@ -0,0 +1,108 @@ +--- +id: 61b30995968123ceb6b76167 +title: Крок 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Зверніть увагу, що краї тіні гострі. Це тому що є додаткове значення `blurRadius` для властивості `box-shadow`: + +```css +box-shadow: offsetX offsetY blurRadius color; +``` + +Якщо значення `blurRadius` не враховано, то за замовчуванням воно становить `0` та створює гострі краї. Чим більше значення `blurRadius`, тим більшим є ефект розмиття. + +В CSS-правилі `.green` додайте властивість `box-shadow` зі значеннями `5px` для `offsetX`, `5px` для `offsetY`, `5px` для `blurRadius` та `green` для `color`. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати скорочену властивість `box-shadow` зі значенням `5px 5px 5px green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md new file mode 100644 index 00000000000..fef90e2da27 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md @@ -0,0 +1,111 @@ +--- +id: 61b30a286c228bd0c493c09a +title: Крок 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +А що як ви хочете ще більше розширити тінь? Ви можете зробити це з допомогою додаткового значення `spreadRadius`: + +```css +box-shadow: offsetX offsetY blurRadius spreadRadius color; +``` + +Як і `blurRadius`, `spreadRadius` за умовчанням має значення `0`, якщо його не враховано. + +Потренуйтеся, додавши 5-піксельну тінь прямо навколо синього маркера. + +В CSS-правилі `.blue` додайте властивість `box-shadow` зі значеннями `0` для `offsetX`, `0` для `offsetY`, `0` для `blurRadius`, `5px` для `spreadRadius` та `blue` для `color`. + +# --hints-- + +Ваше CSS-правило `.blue` повинне мати скорочену властивість `box-shadow` зі значенням `0 0 0 5px blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md new file mode 100644 index 00000000000..b2916ed1f18 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md @@ -0,0 +1,104 @@ +--- +id: 61b31287fb580ae75a486047 +title: Крок 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Тепер, коли ви знайомі з властивістю `box-shadow`, ви можете завершити тіні, починаючи з тіні для червоного маркера. + +В CSS-правилі `.red` оновіть значення властивості `box-shadow` таким чином, щоб `offsetX` був `0`, `offsetY` був `0`, `blurRadius` був `20px`, `spreadRadius` був `0`, а `color` був `red`. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати скорочену властивість `box-shadow` зі значенням `0 0 20px 0 red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: -5px -5px red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md new file mode 100644 index 00000000000..9600c315253 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md @@ -0,0 +1,104 @@ +--- +id: 61b315e76a63b3ecbbb11b75 +title: Крок 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Далі оновіть значення `color` властивості `box-shadow` червоного маркера. + +Замініть вказаний колір на функцію `rgba`. Використайте значення `83` для червоного, `14` для зеленого, `14` для синього та `0.8` для альфа-каналу. + +# --hints-- + +Ваше CSS-правило `.red` повинне мати скорочену властивість `box-shadow` зі значенням `0 0 20px 0 rgba(83, 14, 14, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +--fcc-editable-region-- +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 red; +} +--fcc-editable-region-- + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md new file mode 100644 index 00000000000..87fbf42fcee --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md @@ -0,0 +1,110 @@ +--- +id: 61b3183655ec10efd8c0bb07 +title: Крок 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Тіні для ваших зелених та синіх маркерів будуть мати однакове положення, розмиття та розсіяння. Єдиною відмінністю будуть кольори. + +В CSS-правилах `.green` та `.blue` оновіть значення властивостей `box-shadow`, щоб `offsetX` був `0`, `offsetY` був `0`, `blurRadius` був `20px`, а `spreadRadius` був `0`. Наразі залиште кольори `green` та `blue`. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати скорочену властивість `box-shadow` зі значенням `0 0 20px 0 green`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); +``` + +Ваше CSS-правило `.blue` повинне мати скорочену властивість `box-shadow` зі значенням `0 0 20px 0 blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 5px 5px 5px green; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 0 5px blue; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md new file mode 100644 index 00000000000..7b004e8d88c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md @@ -0,0 +1,102 @@ +--- +id: 61b31a451057fff645ec09be +title: Крок 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Для властивості `box-shadow` зеленого маркера замініть названий колір на шістнадцятковий код кольору. Використайте значення `3B` для червоного, `7E` для зеленого, `20` для синього та `CC` для альфа-каналу. + +# --hints-- + +Ваше CSS-правило `.green` повинне мати скорочену властивість `box-shadow` зі значенням `0 0 20px 0 #3B7E20CC`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +--fcc-editable-region-- +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 green; +} +--fcc-editable-region-- + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md new file mode 100644 index 00000000000..4a3b5d524b0 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md @@ -0,0 +1,184 @@ +--- +id: 61b31cd7b0c76bfc076b4719 +title: Крок 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Зрештою для властивості `box-shadow` синього маркера, замініть названий колір на функцію `hsla`. Використайте значення `223` для відтінку, `59%` для насичення, `31%` для освітленості та `0.8` для альфа-каналу. + +Ось так, ваш набір кольорових маркерів готовий! Хороша робота. + +# --hints-- + +Ваше CSS-правило `.blue` повинне мати скорочену властивість `box-shadow` зі значенням `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +--fcc-editable-region-- +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 blue; +} +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + + Colored Markers + + + +

CSS Color Markers

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +h1 { + text-align: center; +} + +.container { + background-color: rgb(255, 255, 255); + padding: 10px 0; +} + +.marker { + width: 200px; + height: 25px; + margin: 10px auto; +} + +.cap { + width: 60px; + height: 25px; +} + +.sleeve { + width: 110px; + height: 25px; + background-color: rgba(255, 255, 255, 0.5); + border-left: 10px double rgba(0, 0, 0, 0.75); +} + +.cap, .sleeve { + display: inline-block; +} + +.red { + background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); + box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8); +} + +.green { + background: linear-gradient(#55680D, #71F53E, #116C31); + box-shadow: 0 0 20px 0 #3B7E20CC; +} + +.blue { + background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); + box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8); +} + +```