gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(curriculum): removed step 28 and edited meta.json (#44856)

Browse Source
This commit is contained in:
wbenarto
2022-02-10 08:27:55 -08:00
committed by GitHub
parent 8d13163e21
commit ee0fb44c62
20 changed files with 369 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json
View File

@ -119,80 +119,76 @@
"Step 27" "Step 27"
], ],
[ [
"60a3e3396c7b40068ad69985", "60a3e3396c7b40068ad69986",
"Step 28" "Step 28"
], ],
[ [
"60a3e3396c7b40068ad69986", "60a3e3396c7b40068ad69987",
"Step 29" "Step 29"
], ],
[ [
"60a3e3396c7b40068ad69987", "60a3e3396c7b40068ad69988",
"Step 30" "Step 30"
], ],
[ [
"60a3e3396c7b40068ad69988", "60a3e3396c7b40068ad69989",
"Step 31" "Step 31"
], ],
[ [
"60a3e3396c7b40068ad69989", "60a3e3396c7b40068ad6998a",
"Step 32" "Step 32"
], ],
[ [
"60a3e3396c7b40068ad6998a", "60a3e3396c7b40068ad6998b",
"Step 33" "Step 33"
], ],
[ [
"60a3e3396c7b40068ad6998b", "60a3e3396c7b40068ad6998c",
"Step 34" "Step 34"
], ],
[ [
"60a3e3396c7b40068ad6998c", "60a3e3396c7b40068ad6998d",
"Step 35" "Step 35"
], ],
[ [
"60a3e3396c7b40068ad6998d", "60a3e3396c7b40068ad6998e",
"Step 36" "Step 36"
], ],
[ [
"60a3e3396c7b40068ad6998e", "60a3e3396c7b40068ad6998f",
"Step 37" "Step 37"
], ],
[ [
"60a3e3396c7b40068ad6998f", "60a3e3396c7b40068ad69990",
"Step 38" "Step 38"
], ],
[ [
"60a3e3396c7b40068ad69990", "60a3e3396c7b40068ad69991",
"Step 39" "Step 39"
], ],
[ [
"60a3e3396c7b40068ad69991", "60a3e3396c7b40068ad69992",
"Step 40" "Step 40"
], ],
[ [
"60a3e3396c7b40068ad69992", "60a3e3396c7b40068ad69993",
"Step 41" "Step 41"
], ],
[ [
"60a3e3396c7b40068ad69993", "60a3e3396c7b40068ad69994",
"Step 42" "Step 42"
], ],
[ [
"60a3e3396c7b40068ad69994", "60a3e3396c7b40068ad69995",
"Step 43" "Step 43"
], ],
[ [
"60a3e3396c7b40068ad69995", "60a3e3396c7b40068ad69996",
"Step 44" "Step 44"
], ],
[
"60a3e3396c7b40068ad69996",
"Step 45"
],
[ [
"60a3e3396c7b40068ad69997", "60a3e3396c7b40068ad69997",
"Step 46" "Step 45"
] ]
] ]
} }

35
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69985 id: 60a3e3396c7b40068ad69986
title: Step 28 title: Step 28
challengeType: 0 challengeType: 0
dashedName: step-28 dashedName: step-28
@ -7,25 +7,33 @@ dashedName: step-28
# --description-- # --description--
Use margins to adjust the spacing between `one` and `two`. Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
Change the `margin` of `.one` to `20px auto 20px` so the top margin is 20 pixels, it's centered horizontally, and the bottom margin is 20 pixels.
# --hints-- # --hints--
You should set the `margin` property to `20px auto 20px`. Your existing `.one` and `.two` elements should not be changed.
```js ```js
const hasMarginRegex = /20px\s*auto\s*20px/; assert(document.querySelectorAll('.one').length === 1);
// TODO: Why is this stripped? Because margins are the same? assert(document.querySelectorAll('.two').length === 1);
assert(hasMarginRegex.test(code));
``` ```
Your `.one` element should have a `margin` value of `20px auto 20px`. Your new `div` should be nested in your `.canvas` element.
```js ```js
const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/ assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
assert(oneMarginRegex.test(code)); ```
Your new `div` should come after your `.two` element.
```js
assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
```
Your new `div` element should have a `class` with the value `three`.
```js
assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
``` ```
# --seed-- # --seed--
@ -51,9 +59,7 @@ assert(oneMarginRegex.test(code));
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
--fcc-editable-region--
margin: 20px auto; margin: 20px auto;
--fcc-editable-region--
} }
.two { .two {
@ -77,6 +83,9 @@ assert(oneMarginRegex.test(code));
<div class="canvas"> <div class="canvas">
<div class="one"></div> <div class="one"></div>
<div class="two"></div> <div class="two"></div>
--fcc-editable-region--
--fcc-editable-region--
</div> </div>
</div> </div>
</body> </body>

39
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69986 id: 60a3e3396c7b40068ad69987
title: Step 29 title: Step 29
challengeType: 0 challengeType: 0
dashedName: step-29 dashedName: step-29
@ -7,33 +7,31 @@ dashedName: step-29
# --description-- # --description--
Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. You don't always have to use pixels when sizing an element.
Create a new rule, `.three`, and set its `width` to `91%`.
# --hints-- # --hints--
Your existing `.one` and `.two` elements should not be changed. You should use the `.three` selector.
```js ```js
assert(document.querySelectorAll('.one').length === 1); const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
assert(document.querySelectorAll('.two').length === 1); assert(hasThree);
``` ```
Your new `div` should be nested in your `.canvas` element. You should set the `width` property to `91%`.
```js ```js
assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
assert(hasWidth);
``` ```
Your new `div` should come after your `.two` element. Your `.three` element should have a `width` value of `91%`.
```js ```js
assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
``` assert(threeWidth === '91%');
Your new `div` element should have a `class` with the value `three`.
```js
assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
``` ```
# --seed-- # --seed--
@ -59,7 +57,7 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
@ -68,6 +66,11 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
background-color: #8f0401; background-color: #8f0401;
margin: auto; margin: auto;
} }
--fcc-editable-region--
--fcc-editable-region--
``` ```
```html ```html
@ -83,9 +86,7 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
<div class="canvas"> <div class="canvas">
<div class="one"></div> <div class="one"></div>
<div class="two"></div> <div class="two"></div>
--fcc-editable-region-- <div class="three"></div>
--fcc-editable-region--
</div> </div>
</div> </div>
</body> </body>

31
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69987 id: 60a3e3396c7b40068ad69988
title: Step 30 title: Step 30
challengeType: 0 challengeType: 0
dashedName: step-30 dashedName: step-30
@ -7,31 +7,22 @@ dashedName: step-30
# --description-- # --description--
You don't always have to use pixels when sizing an element. Set the `height` of `.three` to `28%`.
Create a new rule, `.three`, and set its `width` to `91%`.
# --hints-- # --hints--
You should use the `.three` selector. You should set the `height` property to `28%`.
```js ```js
const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
assert(hasThree); assert(hasHeight);
``` ```
You should set the `width` property to `91%`. Your `.three` element should have a `height` value of `28%`.
```js ```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
assert(hasWidth); assert(threeHeight === '28%');
```
Your `.three` element should have a `width` value of `91%`.
```js
const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
assert(threeWidth === '91%');
``` ```
# --seed-- # --seed--
@ -57,7 +48,7 @@ assert(threeWidth === '91%');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
@ -67,10 +58,12 @@ assert(threeWidth === '91%');
margin: auto; margin: auto;
} }
.three {
width: 91%;
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--
}
``` ```
```html ```html

19
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69988 id: 60a3e3396c7b40068ad69989
title: Step 31 title: Step 31
challengeType: 0 challengeType: 0
dashedName: step-31 dashedName: step-31
@ -7,22 +7,22 @@ dashedName: step-31
# --description-- # --description--
Set the `height` of `.three` to `28%`. Change the `background-color` of `.three` to `#b20403`.
# --hints-- # --hints--
You should set the `height` property to `28%`. You should set the `background-color` property to `#b20403`.
```js ```js
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
assert(hasHeight); assert(hasBackground);
``` ```
Your `.three` element should have a `height` value of `28%`. Your `.three` element should have a `background-color` value of `#b20403`.
```js ```js
const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
assert(threeHeight === '28%'); assert(threeBackground === 'rgb(178, 4, 3)');
``` ```
# --seed-- # --seed--
@ -48,7 +48,7 @@ assert(threeHeight === '28%');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
@ -60,6 +60,7 @@ assert(threeHeight === '28%');
.three { .three {
width: 91%; width: 91%;
height: 28%;
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--

19
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69989 id: 60a3e3396c7b40068ad6998a
title: Step 32 title: Step 32
challengeType: 0 challengeType: 0
dashedName: step-32 dashedName: step-32
@ -7,22 +7,22 @@ dashedName: step-32
# --description-- # --description--
Change the `background-color` of `.three` to `#b20403`. Center the `.three` element on the canvas by setting its `margin` to `auto`.
# --hints-- # --hints--
You should set the `background-color` property to `#b20403`. You should set the `margin` property to `auto`.
```js ```js
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
assert(hasBackground); assert(marginFilter.length === 2);
``` ```
Your `.three` element should have a `background-color` value of `#b20403`. Your `.three` element should have a `margin` value of `auto`.
```js ```js
const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
assert(threeBackground === 'rgb(178, 4, 3)'); assert(threeMargin === 'auto');
``` ```
# --seed-- # --seed--
@ -48,7 +48,7 @@ assert(threeBackground === 'rgb(178, 4, 3)');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
@ -61,6 +61,7 @@ assert(threeBackground === 'rgb(178, 4, 3)');
.three { .three {
width: 91%; width: 91%;
height: 28%; height: 28%;
background-color: #b20403;
--fcc-editable-region-- --fcc-editable-region--
--fcc-editable-region-- --fcc-editable-region--

28
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad6998a id: 60a3e3396c7b40068ad6998b
title: Step 33 title: Step 33
challengeType: 0 challengeType: 0
dashedName: step-33 dashedName: step-33
@ -7,22 +7,26 @@ dashedName: step-33
# --description-- # --description--
Center the `.three` element on the canvas by setting its `margin` to `auto`. It's helpful to have your margins push in one direction.
In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
# --hints-- # --hints--
You should set the `margin` property to `auto`. You should set the `margin` property to `0 auto 20px`.
```js ```js
const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
assert(marginFilter.length === 2); assert(hasMargin);
``` ```
Your `.three` element should have a `margin` value of `auto`. Your `.two` element should have a `margin` value of `0 auto 20px`.
```js ```js
const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
assert(threeMargin === 'auto'); assert(twoMargin === '0px auto 20px');
``` ```
# --seed-- # --seed--
@ -48,23 +52,23 @@ assert(threeMargin === 'auto');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
width: 475px; width: 475px;
height: 200px; height: 200px;
background-color: #8f0401; background-color: #8f0401;
--fcc-editable-region--
margin: auto; margin: auto;
--fcc-editable-region--
} }
.three { .three {
width: 91%; width: 91%;
height: 28%; height: 28%;
background-color: #b20403; background-color: #b20403;
--fcc-editable-region-- margin: auto;
--fcc-editable-region--
} }
``` ```

29
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad6998b id: 60a3e3396c7b40068ad6998c
title: Step 34 title: Step 34
challengeType: 0 challengeType: 0
dashedName: step-34 dashedName: step-34
@ -7,26 +7,24 @@ dashedName: step-34
# --description-- # --description--
It's helpful to have your margins push in one direction. The colors and shapes of your painting are too sharp to pass as a Rothko.
In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
# --hints-- # --hints--
You should set the `margin` property to `0 auto 20px`. You should set the `filter` property to `blur(2px)`.
```js ```js
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
assert(hasMargin); assert(hasFilter);
``` ```
Your `.two` element should have a `margin` value of `0 auto 20px`. Your `.canvas` element should have a `filter` value of `blur(2px)`.
```js ```js
const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
assert(twoMargin === '0px auto 20px'); assert(canvasFilter === 'blur(2px)');
``` ```
# --seed-- # --seed--
@ -39,6 +37,9 @@ assert(twoMargin === '0px auto 20px');
height: 600px; height: 600px;
background-color: #4d0f00; background-color: #4d0f00;
overflow: hidden; overflow: hidden;
--fcc-editable-region--
--fcc-editable-region--
} }
.frame { .frame {
@ -52,16 +53,14 @@ assert(twoMargin === '0px auto 20px');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
width: 475px; width: 475px;
height: 200px; height: 200px;
background-color: #8f0401; background-color: #8f0401;
--fcc-editable-region-- margin: 0 auto 20px;
margin: auto;
--fcc-editable-region--
} }
.three { .three {

50
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad6998c id: 60a3e3396c7b40068ad6998d
title: Step 35 title: Step 35
challengeType: 0 challengeType: 0
dashedName: step-35 dashedName: step-35
@ -7,24 +7,46 @@ dashedName: step-35
# --description-- # --description--
The colors and shapes of your painting are too sharp to pass as a Rothko. Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element. Here's an example of a rule that increases the `blur` of two elements:
```css
h1, p {
filter: blur(3px);
}
```
# --hints-- # --hints--
You should set the `filter` property to `blur(2px)`. You should have a `.one, .two` selector.
```js ```js
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
assert(hasFilter); assert(oneTwo);
``` ```
Your `.canvas` element should have a `filter` value of `blur(2px)`. You should set the `filter` property to `blur(1px)`.
```js ```js
const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
assert(canvasFilter === 'blur(2px)'); assert(hasFilter)
```
Your `.one` element should have a `filter` value of `blur(1px)`.
```js
const one = document.querySelector('.one');
const oneFilter = getComputedStyle(one).filter;
assert(oneFilter === 'blur(1px)');
```
Your `.two` element should have a filter value of `blur(1px)`.
```js
const two = document.querySelector('.two');
const twoFilter = getComputedStyle(two).filter;
assert(twoFilter === 'blur(1px)');
``` ```
# --seed-- # --seed--
@ -37,9 +59,7 @@ assert(canvasFilter === 'blur(2px)');
height: 600px; height: 600px;
background-color: #4d0f00; background-color: #4d0f00;
overflow: hidden; overflow: hidden;
--fcc-editable-region-- filter: blur(2px);
--fcc-editable-region--
} }
.frame { .frame {
@ -53,7 +73,7 @@ assert(canvasFilter === 'blur(2px)');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
@ -63,6 +83,10 @@ assert(canvasFilter === 'blur(2px)');
margin: 0 auto 20px; margin: 0 auto 20px;
} }
--fcc-editable-region--
--fcc-editable-region--
.three { .three {
width: 91%; width: 91%;
height: 28%; height: 28%;

51
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad6998d id: 60a3e3396c7b40068ad6998e
title: Step 36 title: Step 36
challengeType: 0 challengeType: 0
dashedName: step-36 dashedName: step-36
@ -7,46 +7,22 @@ dashedName: step-36
# --description-- # --description--
Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. Increase the `blur` of `.three` by 2 pixels.
Here's an example of a rule that increases the `blur` of two elements:
```css
h1, p {
filter: blur(3px);
}
```
# --hints-- # --hints--
You should have a `.one, .two` selector. You should set the `filter` property to `blur(2px)`.
```js ```js
const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
assert(oneTwo); assert(filterFilter.length === 2);
``` ```
You should set the `filter` property to `blur(1px)`. Your `.three` element should have a `filter` value of `blur(2px)`.
```js ```js
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
assert(hasFilter) assert(threeFilter === 'blur(2px)');
```
Your `.one` element should have a `filter` value of `blur(1px)`.
```js
const one = document.querySelector('.one');
const oneFilter = getComputedStyle(one).filter;
assert(oneFilter === 'blur(1px)');
```
Your `.two` element should have a filter value of `blur(1px)`.
```js
const two = document.querySelector('.two');
const twoFilter = getComputedStyle(two).filter;
assert(twoFilter === 'blur(1px)');
``` ```
# --seed-- # --seed--
@ -73,7 +49,7 @@ assert(twoFilter === 'blur(1px)');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
} }
.two { .two {
@ -83,15 +59,18 @@ assert(twoFilter === 'blur(1px)');
margin: 0 auto 20px; margin: 0 auto 20px;
} }
--fcc-editable-region-- .one, .two {
filter: blur(1px);
--fcc-editable-region-- }
.three { .three {
width: 91%; width: 91%;
height: 28%; height: 28%;
background-color: #b20403; background-color: #b20403;
margin: auto; margin: auto;
--fcc-editable-region--
--fcc-editable-region--
} }
``` ```

27
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad6998e id: 60a3e3396c7b40068ad6998f
title: Step 37 title: Step 37
challengeType: 0 challengeType: 0
dashedName: step-37 dashedName: step-37
@ -7,22 +7,24 @@ dashedName: step-37
# --description-- # --description--
Increase the `blur` of `.three` by 2 pixels. The rectangles are too small and their edges don't have the soft quality of a painting.
Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
# --hints-- # --hints--
You should set the `filter` property to `blur(2px)`. You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
```js ```js
const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
assert(filterFilter.length === 2); assert(hasBoxShadow);
``` ```
Your `.three` element should have a `filter` value of `blur(2px)`. Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
```js ```js
const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
assert(threeFilter === 'blur(2px)'); assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
``` ```
# --seed-- # --seed--
@ -49,7 +51,10 @@ assert(threeFilter === 'blur(2px)');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
--fcc-editable-region--
--fcc-editable-region--
} }
.two { .two {
@ -68,9 +73,7 @@ assert(threeFilter === 'blur(2px)');
height: 28%; height: 28%;
background-color: #b20403; background-color: #b20403;
margin: auto; margin: auto;
--fcc-editable-region-- filter: blur(2px);
--fcc-editable-region--
} }
``` ```

25
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad6998f id: 60a3e3396c7b40068ad69990
title: Step 38 title: Step 38
challengeType: 0 challengeType: 0
dashedName: step-38 dashedName: step-38
@ -7,24 +7,22 @@ dashedName: step-38
# --description-- # --description--
The rectangles are too small and their edges don't have the soft quality of a painting. Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
# --hints-- # --hints--
You should set the `box-shadow` property to `0 0 3px 3px #efb762`. You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
```js ```js
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
assert(hasBoxShadow); assert(hasBoxShadow);
``` ```
Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
```js ```js
const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px'); assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
``` ```
# --seed-- # --seed--
@ -51,10 +49,8 @@ assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
--fcc-editable-region-- box-shadow: 0 0 3px 3px #efb762;
--fcc-editable-region--
} }
.two { .two {
@ -62,6 +58,9 @@ assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
height: 200px; height: 200px;
background-color: #8f0401; background-color: #8f0401;
margin: 0 auto 20px; margin: 0 auto 20px;
--fcc-editable-region--
--fcc-editable-region--
} }
.one, .two { .one, .two {

23
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69990 id: 60a3e3396c7b40068ad69991
title: Step 39 title: Step 39
challengeType: 0 challengeType: 0
dashedName: step-39 dashedName: step-39
@ -7,22 +7,22 @@ dashedName: step-39
# --description-- # --description--
Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
# --hints-- # --hints--
You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
```js ```js
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
assert(hasBoxShadow); assert(hasBoxShadow);
``` ```
Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
```js ```js
const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px'); assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
``` ```
# --seed-- # --seed--
@ -49,7 +49,7 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762; box-shadow: 0 0 3px 3px #efb762;
} }
@ -58,9 +58,7 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
height: 200px; height: 200px;
background-color: #8f0401; background-color: #8f0401;
margin: 0 auto 20px; margin: 0 auto 20px;
--fcc-editable-region-- box-shadow: 0 0 3px 3px #8f0401;
--fcc-editable-region--
} }
.one, .two { .one, .two {
@ -73,6 +71,9 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
background-color: #b20403; background-color: #b20403;
margin: auto; margin: auto;
filter: blur(2px); filter: blur(2px);
--fcc-editable-region--
--fcc-editable-region--
} }
``` ```

27
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69991 id: 60a3e3396c7b40068ad69992
title: Step 40 title: Step 40
challengeType: 0 challengeType: 0
dashedName: step-40 dashedName: step-40
@ -7,22 +7,24 @@ dashedName: step-40
# --description-- # --description--
Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. The corners of each rectangle are still too sharp.
Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
# --hints-- # --hints--
You should set the `box-shadow` property to `0 0 5px 5px #b20403`. You should set the `border-radius` property to `9px`.
```js ```js
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
assert(hasBoxShadow); assert(hasBorderRadius);
``` ```
Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. Your `.one` element should have a `border-radius` value of `9px`.
```js ```js
const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px'); assert(oneBorderRadius === '9px');
``` ```
# --seed-- # --seed--
@ -49,8 +51,11 @@ assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762; box-shadow: 0 0 3px 3px #efb762;
--fcc-editable-region--
--fcc-editable-region--
} }
.two { .two {
@ -71,9 +76,7 @@ assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
background-color: #b20403; background-color: #b20403;
margin: auto; margin: auto;
filter: blur(2px); filter: blur(2px);
--fcc-editable-region-- box-shadow: 0 0 5px 5px #b20403;
--fcc-editable-region--
} }
``` ```

25
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69992 id: 60a3e3396c7b40068ad69993
title: Step 41 title: Step 41
challengeType: 0 challengeType: 0
dashedName: step-41 dashedName: step-41
@ -7,24 +7,22 @@ dashedName: step-41
# --description-- # --description--
The corners of each rectangle are still too sharp. Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`.
Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
# --hints-- # --hints--
You should set the `border-radius` property to `9px`. You should set the `border-radius` property to `8px 10px`.
```js ```js
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
assert(hasBorderRadius); assert(hasBorderRadius);
``` ```
Your `.one` element should have a `border-radius` value of `9px`. Your `.two` element should have a `border-radius` value of `8px 10px`.
```js ```js
const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
assert(oneBorderRadius === '9px'); assert(twoBorderRadius === '8px 10px');
``` ```
# --seed-- # --seed--
@ -51,11 +49,9 @@ assert(oneBorderRadius === '9px');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762; box-shadow: 0 0 3px 3px #efb762;
--fcc-editable-region-- border-radius: 9px;
--fcc-editable-region--
} }
.two { .two {
@ -64,6 +60,9 @@ assert(oneBorderRadius === '9px');
background-color: #8f0401; background-color: #8f0401;
margin: 0 auto 20px; margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401; box-shadow: 0 0 3px 3px #8f0401;
--fcc-editable-region--
--fcc-editable-region--
} }
.one, .two { .one, .two {

25
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69993 id: 60a3e3396c7b40068ad69994
title: Step 42 title: Step 42
challengeType: 0 challengeType: 0
dashedName: step-42 dashedName: step-42
@ -7,22 +7,24 @@ dashedName: step-42
# --description-- # --description--
Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`. The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
# --hints-- # --hints--
You should set the `border-radius` property to `8px 10px`. You should set the `border-radius` property to `30px 25px 60px 12px`.
```js ```js
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
assert(hasBorderRadius); assert(hasBorderRadius);
``` ```
Your `.two` element should have a `border-radius` value of `8px 10px`. Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
```js ```js
const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
assert(twoBorderRadius === '8px 10px'); assert(threeBorderRadius === '30px 25px 60px 12px');
``` ```
# --seed-- # --seed--
@ -49,7 +51,7 @@ assert(twoBorderRadius === '8px 10px');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762; box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px; border-radius: 9px;
} }
@ -60,9 +62,7 @@ assert(twoBorderRadius === '8px 10px');
background-color: #8f0401; background-color: #8f0401;
margin: 0 auto 20px; margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401; box-shadow: 0 0 3px 3px #8f0401;
--fcc-editable-region-- border-radius: 8px 10px;
--fcc-editable-region--
} }
.one, .two { .one, .two {
@ -76,6 +76,9 @@ assert(twoBorderRadius === '8px 10px');
margin: auto; margin: auto;
filter: blur(2px); filter: blur(2px);
box-shadow: 0 0 5px 5px #b20403; box-shadow: 0 0 5px 5px #b20403;
--fcc-editable-region--
--fcc-editable-region--
} }
``` ```

27
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69994 id: 60a3e3396c7b40068ad69995
title: Step 43 title: Step 43
challengeType: 0 challengeType: 0
dashedName: step-43 dashedName: step-43
@ -7,24 +7,24 @@ dashedName: step-43
# --description-- # --description--
The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners. Rotate each rectangle to give them more of an imperfect, hand-painted look.
Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
# --hints-- # --hints--
You should set the `border-radius` property to `30px 25px 60px 12px`. You should set the `transform` property to `rotate(-0.6deg)`.
```js ```js
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
assert(hasBorderRadius); assert(hasTransform);
``` ```
Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
```js ```js
const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
assert(threeBorderRadius === '30px 25px 60px 12px'); assert(oneTransform === 'rotate(-0.6deg)');
``` ```
# --seed-- # --seed--
@ -51,9 +51,12 @@ assert(threeBorderRadius === '30px 25px 60px 12px');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762; box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px; border-radius: 9px;
--fcc-editable-region--
--fcc-editable-region--
} }
.two { .two {
@ -76,9 +79,7 @@ assert(threeBorderRadius === '30px 25px 60px 12px');
margin: auto; margin: auto;
filter: blur(2px); filter: blur(2px);
box-shadow: 0 0 5px 5px #b20403; box-shadow: 0 0 5px 5px #b20403;
--fcc-editable-region-- border-radius: 30px 25px 60px 12px;
--fcc-editable-region--
} }
``` ```

25
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69995 id: 60a3e3396c7b40068ad69996
title: Step 44 title: Step 44
challengeType: 0 challengeType: 0
dashedName: step-44 dashedName: step-44
@ -7,24 +7,22 @@ dashedName: step-44
# --description-- # --description--
Rotate each rectangle to give them more of an imperfect, hand-painted look. Rotate the `.two` element clockwise by 0.4 degrees.
Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
# --hints-- # --hints--
You should set the `transform` property to `rotate(-0.6deg)`. You should set the `transform` property to `rotate(0.4deg)`.
```js ```js
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
assert(hasTransform); assert(hasTransform);
``` ```
Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
```js ```js
const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
assert(oneTransform === 'rotate(-0.6deg)'); assert(twoTransform === 'rotate(0.4deg)');
``` ```
# --seed-- # --seed--
@ -51,12 +49,10 @@ assert(oneTransform === 'rotate(-0.6deg)');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762; box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px; border-radius: 9px;
--fcc-editable-region-- transform: rotate(-0.6deg);
--fcc-editable-region--
} }
.two { .two {
@ -66,6 +62,9 @@ assert(oneTransform === 'rotate(-0.6deg)');
margin: 0 auto 20px; margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401; box-shadow: 0 0 3px 3px #8f0401;
border-radius: 8px 10px; border-radius: 8px 10px;
--fcc-editable-region--
--fcc-editable-region--
} }
.one, .two { .one, .two {

99
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md
View File

@ -1,5 +1,5 @@
--- ---
id: 60a3e3396c7b40068ad69996 id: 60a3e3396c7b40068ad69997
title: Step 45 title: Step 45
challengeType: 0 challengeType: 0
dashedName: step-45 dashedName: step-45
@ -7,22 +7,24 @@ dashedName: step-45
# --description-- # --description--
Rotate the `.two` element clockwise by 0.4 degrees. Rotate `.three` counter clockwise by 0.2 degrees.
With this final step, your Rothko painting is now complete.
# --hints-- # --hints--
You should set the `transform` property to `rotate(0.4deg)`. You should set the `transform` property to `rotate(-0.2deg)`.
```js ```js
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
assert(hasTransform); assert(hasTransform);
``` ```
Your `.two` element should have a `transform` value of `rotate(0.4deg)`. Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
```js ```js
const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
assert(twoTransform === 'rotate(0.4deg)'); assert(threeTransform === 'rotate(-0.2deg)');
``` ```
# --seed-- # --seed--
@ -49,7 +51,7 @@ assert(twoTransform === 'rotate(0.4deg)');
width: 425px; width: 425px;
height: 150px; height: 150px;
background-color: #efb762; background-color: #efb762;
margin: 20px auto 20px; margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762; box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px; border-radius: 9px;
transform: rotate(-0.6deg); transform: rotate(-0.6deg);
@ -62,9 +64,7 @@ assert(twoTransform === 'rotate(0.4deg)');
margin: 0 auto 20px; margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401; box-shadow: 0 0 3px 3px #8f0401;
border-radius: 8px 10px; border-radius: 8px 10px;
--fcc-editable-region-- transform: rotate(0.4deg);
--fcc-editable-region--
} }
.one, .two { .one, .two {
@ -79,6 +79,9 @@ assert(twoTransform === 'rotate(0.4deg)');
filter: blur(2px); filter: blur(2px);
box-shadow: 0 0 5px 5px #b20403; box-shadow: 0 0 5px 5px #b20403;
border-radius: 30px 25px 60px 12px; border-radius: 30px 25px 60px 12px;
--fcc-editable-region--
--fcc-editable-region--
} }
``` ```
@ -101,3 +104,77 @@ assert(twoTransform === 'rotate(0.4deg)');
</body> </body>
</html> </html>
``` ```
## --solutions--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rothko</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="canvas">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
```
```css
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
filter: blur(2px);
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto;
box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px;
transform: rotate(-0.6deg);
}
.two {
width: 475px;
height: 200px;
background-color: #8f0401;
margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401;
border-radius: 8px 10px;
transform: rotate(0.4deg);
}
.one, .two {
filter: blur(1px);
}
.three {
width: 91%;
height: 28%;
background-color: #b20403;
margin: auto;
filter: blur(2px);
box-shadow: 0 0 5px 5px #b20403;
border-radius: 30px 25px 60px 12px;
transform: rotate(-0.2deg);
}
```

180
curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md
View File

@ -1,180 +0,0 @@
---
id: 60a3e3396c7b40068ad69997
title: Step 46
challengeType: 0
dashedName: step-46
---
# --description--
Rotate `.three` counter clockwise by 0.2 degrees.
With this final step, your Rothko painting is now complete.
# --hints--
You should set the `transform` property to `rotate(-0.2deg)`.
```js
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
assert(hasTransform);
```
Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
```js
const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
assert(threeTransform === 'rotate(-0.2deg)');
```
# --seed--
## --seed-contents--
```css
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
filter: blur(2px);
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto 20px;
box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px;
transform: rotate(-0.6deg);
}
.two {
width: 475px;
height: 200px;
background-color: #8f0401;
margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401;
border-radius: 8px 10px;
transform: rotate(0.4deg);
}
.one, .two {
filter: blur(1px);
}
.three {
width: 91%;
height: 28%;
background-color: #b20403;
margin: auto;
filter: blur(2px);
box-shadow: 0 0 5px 5px #b20403;
border-radius: 30px 25px 60px 12px;
--fcc-editable-region--
--fcc-editable-region--
}
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rothko</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="canvas">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
```
## --solutions--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rothko</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="frame">
<div class="canvas">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
</body>
</html>
```
```css
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
overflow: hidden;
filter: blur(2px);
}
.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}
.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto 20px;
box-shadow: 0 0 3px 3px #efb762;
border-radius: 9px;
transform: rotate(-0.6deg);
}
.two {
width: 475px;
height: 200px;
background-color: #8f0401;
margin: 0 auto 20px;
box-shadow: 0 0 3px 3px #8f0401;
border-radius: 8px 10px;
transform: rotate(0.4deg);
}
.one, .two {
filter: blur(1px);
}
.three {
width: 91%;
height: 28%;
background-color: #b20403;
margin: auto;
filter: blur(2px);
box-shadow: 0 0 5px 5px #b20403;
border-radius: 30px 25px 60px 12px;
transform: rotate(-0.2deg);
}
```