feat(curriculum): CSS Box Model project (#42182)
* feat(curriculum): add initial steps Add the initial step files for this project. * feat(curriculum): write test texts Add some test text (tests coming soon). * feat: tests for HTML bits Add tests for the HTML bits - CSS holding off until parser lands. * feat: CSS tests New CSS parser works great! * fix: link href Fix the href in the boilerplate. * chore: apply suggestions from code review Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * fix: clarify link element * fix: optional chaining * fix: remove unused meta props * fix: update helper and fix tests * chore: apply tom's review suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * chore: no console logs Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * feat: intro Add introductory text, tweak instructions a bit. Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
ac11c85409
commit
a563b3b4e4
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6996a
|
||||
title: Part 1
|
||||
challengeType: 0
|
||||
dashedName: part-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
By now, you should be familiar with the basic elements an HTML page should have.
|
||||
|
||||
Set up your code with a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `<!DOCTYPE html>` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE html>/i));
|
||||
```
|
||||
|
||||
Your code should have an `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('html').length === 1);
|
||||
```
|
||||
|
||||
Your code should have a `head` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('head').length === 1);
|
||||
```
|
||||
|
||||
Your code should have a `body` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('body').length === 1);
|
||||
```
|
||||
|
||||
Your `head` element should come before your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6996b
|
||||
title: Part 2
|
||||
challengeType: 0
|
||||
dashedName: part-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko`.
|
||||
|
||||
Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
|
||||
# --hints--
|
||||
|
||||
Your code should have a `meta` tag.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('meta').length === 1);
|
||||
```
|
||||
|
||||
The `meta` tag should set the `charset` to `UTF-8`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8');
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('title').length === 1);
|
||||
```
|
||||
|
||||
The `title` should be `Rothko`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('title').innerText === 'Rothko');
|
||||
```
|
||||
|
||||
Your code should have an `img` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img').length === 1);
|
||||
```
|
||||
|
||||
The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,42 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6996c
|
||||
title: Part 3
|
||||
challengeType: 0
|
||||
dashedName: part-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the CSS box model, every HTML element is treated as a box with four areas.
|
||||
|
||||
Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element.
|
||||
|
||||
Change the `src` attribute in the `<img>` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6996d
|
||||
title: Part 4
|
||||
challengeType: 0
|
||||
dashedName: part-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.
|
||||
|
||||
Think of the border like the cardboard box your item was shipped in.
|
||||
|
||||
Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
|
||||
|
||||
# --hints--
|
||||
|
||||
The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6996e
|
||||
title: Part 5
|
||||
challengeType: 0
|
||||
dashedName: part-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Margin is the area outside of the box, and can be used to control the space between other boxes or elements.
|
||||
|
||||
Here the bottom element has a larger top margin, pushing it further down the page.
|
||||
|
||||
Now that you understand the CSS box model, let's get started on the Rothko painting.
|
||||
|
||||
Remove the `<img>` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have an `img` element in your code.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img') === null);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6996f
|
||||
title: Part 6
|
||||
challengeType: 0
|
||||
dashedName: part-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `div` element in the `body`.
|
||||
|
||||
Set the `class` attribute equal to `canvas`. For example, `<div class="my-div">`.
|
||||
|
||||
This will act as the canvas for your painting.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 1)
|
||||
```
|
||||
|
||||
The `div` element should have a `class` with the value `canvas`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div').className.split(' ').includes('canvas'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69970
|
||||
title: Part 7
|
||||
challengeType: 0
|
||||
dashedName: part-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Before you can start styling the `div` you added, you need to link your CSS to your HTML.
|
||||
|
||||
Add a `link` element to link your `styles.css` file. Set the `href` to `./styles.css`, and remember to set the `rel` attribute to `stylesheet`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
assert(/<link/.test(code))
|
||||
```
|
||||
|
||||
Your `href` attribute should have the value `./styles.css`.
|
||||
|
||||
```js
|
||||
assert(/href\s*=\s*('|")(\.\/)?styles\.css\1/.test(code));
|
||||
```
|
||||
|
||||
Your `rel` attribute should have the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(/rel\s*=\s*('|")\s*stylesheet\s*\1/.test(code));
|
||||
```
|
||||
|
||||
Your `link` element should have `href="./styles.css"` and `rel="stylesheet"` attributes
|
||||
|
||||
```js
|
||||
assert(/<\s*link(\s+href\s*=\s*("|')(\.\/)?styles\.css\2\s*rel=('|")\s*stylesheet\s*\4|\s+rel\s*=\s*('|")\s*stylesheet\s*\5\s*href\s*=\s*("|')(\.\/)?styles\.css\6)\s*\/?>/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69971
|
||||
title: Part 8
|
||||
challengeType: 0
|
||||
dashedName: part-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time for CSS.
|
||||
|
||||
Even though your `<div>` has no text, it's still treated as a box with content.
|
||||
Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels.
|
||||
Here's a CSS rule that sets the width of the class `card` to 300 pixels:
|
||||
|
||||
```css
|
||||
.card {
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `.canvas` selector.
|
||||
|
||||
```js
|
||||
const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
|
||||
assert(hasCanvas)
|
||||
```
|
||||
|
||||
You should set the `width` property to `500px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `width` of `500px`.
|
||||
|
||||
```js
|
||||
const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
|
||||
assert(width === '500px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
--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="canvas">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69972
|
||||
title: Part 9
|
||||
challengeType: 0
|
||||
dashedName: part-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the `height` property with the value `600px` to your `.canvas` rule.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `600px`.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `height` of `600px`.
|
||||
|
||||
```js
|
||||
const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
|
||||
assert(canvasHeight === '600px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
--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="canvas">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69973
|
||||
title: Part 10
|
||||
challengeType: 0
|
||||
dashedName: part-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the `background-color` of the canvas to `#4d0f00`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `background-color` property to `#4d0f00`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
|
||||
// TODO: Why does it still do this?
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `background-color` of `#4d0f00`.
|
||||
|
||||
```js
|
||||
const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
|
||||
assert(canvasBackground === 'rgb(77, 15, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
--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="canvas">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69974
|
||||
title: Part 11
|
||||
challengeType: 0
|
||||
dashedName: part-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Every painting needs a frame.
|
||||
|
||||
Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class.
|
||||
# --hints--
|
||||
|
||||
You should add a new `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 2)
|
||||
```
|
||||
|
||||
Your `.canvas` element should be nested in the new `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
|
||||
```
|
||||
|
||||
Your new `div` should have a `class` with the value `frame`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div').className.split(' ').includes('frame'));
|
||||
```
|
||||
|
||||
Your new `div` should be within your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div').parentElement.tagName === 'BODY');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
<div class="canvas">
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69975
|
||||
title: Part 12
|
||||
challengeType: 0
|
||||
dashedName: part-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Write a new rule using the `.frame` class selector.
|
||||
|
||||
Give the `.frame` a border with the shorthand `border: 50px solid black;` declaration.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `.frame` selector.
|
||||
|
||||
```js
|
||||
const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
|
||||
assert(hasFrame);
|
||||
```
|
||||
|
||||
You should set the `border` property to `50px solid black`.
|
||||
|
||||
```js
|
||||
const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
|
||||
assert(hasBorder);
|
||||
```
|
||||
|
||||
Your `.frame` element should have a `50px solid black` `border`.
|
||||
|
||||
```js
|
||||
const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
|
||||
assert(frameBorder === '50px solid black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69976
|
||||
title: Part 13
|
||||
challengeType: 0
|
||||
dashedName: part-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The frame is much too wide.
|
||||
|
||||
In `.frame`, set its `width` to 500 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` property to `500px`.
|
||||
|
||||
```js
|
||||
const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
|
||||
assert(widthFilter.length === 2);
|
||||
```
|
||||
|
||||
Your `.frame` element should have a `width` of `500px`.
|
||||
|
||||
```js
|
||||
const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
|
||||
assert(frameWidth === '500px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69977
|
||||
title: Part 14
|
||||
challengeType: 0
|
||||
dashedName: part-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use padding to adjust the spacing within an element.
|
||||
|
||||
In `.frame`, use the shorthand `padding: 50px;` to increase the space between the top, bottom, left, and right of the frame's border and the canvas within.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `padding` property to `50px`.
|
||||
|
||||
```js
|
||||
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
|
||||
assert(hasPadding);
|
||||
```
|
||||
|
||||
Your `.frame` element should have a `padding` value of `50px`.
|
||||
|
||||
```js
|
||||
const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
|
||||
assert(framePadding === '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69978
|
||||
title: Part 15
|
||||
challengeType: 0
|
||||
dashedName: part-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use margins to adjust the spacing outside of an element.
|
||||
|
||||
Add the `margin` property to `.frame` and set it to `20px auto` to move the frame down 20 pixels and center it horizontally on the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `20px auto`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
Your `.frame` element should have a `margin` value of `20px auto`.
|
||||
|
||||
```js
|
||||
const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
|
||||
assert(frameMargin === '20px auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69979
|
||||
title: Part 16
|
||||
challengeType: 0
|
||||
dashedName: part-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new `div` element inside of your `.canvas` element.
|
||||
|
||||
Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 3);
|
||||
```
|
||||
|
||||
You should nest the new `div` element within your `.canvas` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
|
||||
```
|
||||
|
||||
Your new `div` should have a `class` attribute with a value `one`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6997a
|
||||
title: Part 17
|
||||
challengeType: 0
|
||||
dashedName: part-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Write a new rule that targets `.one` and set its `width` to 425 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.one` selector.
|
||||
|
||||
```js
|
||||
const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
|
||||
assert(hasOne);
|
||||
```
|
||||
|
||||
You should set the `width` property to `425px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `width` value of `425px`.
|
||||
|
||||
```js
|
||||
const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
|
||||
assert(oneWidth === '425px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
<!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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6997b
|
||||
title: Part 18
|
||||
challengeType: 0
|
||||
dashedName: part-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now set the `height` for `.one` to 150 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `150px`.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `height` value of `150px`.
|
||||
|
||||
```js
|
||||
const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
|
||||
assert(oneHeight === '150px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6997c
|
||||
title: Part 19
|
||||
challengeType: 0
|
||||
dashedName: part-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `background-color` of `.one` to `#efb762`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `background-color` property to `#efb762`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
|
||||
assert(hasBackground)
|
||||
```
|
||||
|
||||
Your `.one` element should have a `background-color` value of `#efb762`.
|
||||
|
||||
```js
|
||||
const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
|
||||
assert(oneBackground === 'rgb(239, 183, 98)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6997d
|
||||
title: Part 20
|
||||
challengeType: 0
|
||||
dashedName: part-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use margins to position the `.one` element on the canvas.
|
||||
|
||||
Add the shorthand `margin: 20px auto;` to set the top and bottom margins to 20 pixels, and center it horizontally.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `20px auto`.
|
||||
|
||||
```js
|
||||
const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
|
||||
assert(marginFilter.length === 2);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `margin` value of `20px auto`.
|
||||
|
||||
```js
|
||||
const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
|
||||
assert(oneMargin === '20px auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6997e
|
||||
title: Part 21
|
||||
challengeType: 0
|
||||
dashedName: part-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels.
|
||||
|
||||
Add `padding: 1px;` to `.canvas` to give the `.one` element something solid to push off of.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `padding` property to `1px`.
|
||||
|
||||
```js
|
||||
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
|
||||
assert(hasPadding);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `padding` value of `1px`.
|
||||
|
||||
```js
|
||||
const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
|
||||
assert(canvasPadding === '1px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6997f
|
||||
title: Part 22
|
||||
challengeType: 0
|
||||
dashedName: part-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels.
|
||||
|
||||
Replace `padding: 1px;` with `overflow: hidden;` to change the canvas back to its original dimensions.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `padding` property from the `.one` selector.
|
||||
|
||||
```js
|
||||
const onePadding = new __helpers.CSSHelp(document).getStyle('.one').getPropertyValue('padding');
|
||||
assert(!onePadding);
|
||||
```
|
||||
|
||||
You should set the `overflow` property to `hidden`.
|
||||
|
||||
```js
|
||||
const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
|
||||
assert(hasOverflow);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have an `overflow` value of `hidden`.
|
||||
|
||||
```js
|
||||
const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
|
||||
assert(canvasOverflow === 'hidden')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
--fcc-editable-region--
|
||||
padding: 1px;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69980
|
||||
title: Part 23
|
||||
challengeType: 0
|
||||
dashedName: part-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `.one` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.one').length === 1);
|
||||
```
|
||||
|
||||
You should have a second `div` element in your `.canvas` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
|
||||
```
|
||||
|
||||
Your second `div` element should have a `class` value of `two`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
|
||||
```
|
||||
|
||||
Your `.two` element should come after your `.one` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69981
|
||||
title: Part 24
|
||||
challengeType: 0
|
||||
dashedName: part-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.two` selector.
|
||||
|
||||
```js
|
||||
const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
|
||||
assert(hasTwo);
|
||||
```
|
||||
|
||||
You should set the `width` property to `475px`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `width` value of `475px`.
|
||||
|
||||
```js
|
||||
const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
|
||||
assert(twoWidth === '475px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69982
|
||||
title: Part 25
|
||||
challengeType: 0
|
||||
dashedName: part-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `height` of the `.two` to 200 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `200px`.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `height` value of `200px`.
|
||||
|
||||
```js
|
||||
const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
|
||||
assert(twoHeight === '200px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69983
|
||||
title: Part 26
|
||||
challengeType: 0
|
||||
dashedName: part-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `background-color` of the `.two` element to `#8f0401`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `background-color` property to `#8f0401`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `background-color` value of `#8f0401`.
|
||||
|
||||
```js
|
||||
const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
|
||||
assert(twoBackground === 'rgb(143, 4, 1)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69984
|
||||
title: Part 27
|
||||
challengeType: 0
|
||||
dashedName: part-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Center the `.two` element by setting its `margin` to `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `auto`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `margin` value of `auto`.
|
||||
|
||||
```js
|
||||
const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
|
||||
assert(twoMargin === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
--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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69985
|
||||
title: Part 28
|
||||
challengeType: 0
|
||||
dashedName: part-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use margins to adjust the spacing between `one` and `two`.
|
||||
|
||||
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--
|
||||
|
||||
You should set the `margin` property to `20px auto 20px`.
|
||||
|
||||
```js
|
||||
const hasMarginRegex = /20px\s*auto\s*20px/;
|
||||
// TODO: Why is this stripped? Because margins are the same?
|
||||
assert(hasMarginRegex.test(code));
|
||||
```
|
||||
|
||||
Your `.one` element should have a `margin` value of `20px auto 20px`.
|
||||
|
||||
```js
|
||||
const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/
|
||||
assert(oneMarginRegex.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
--fcc-editable-region--
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69986
|
||||
title: Part 29
|
||||
challengeType: 0
|
||||
dashedName: part-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your existing `.one` and `.two` elements should not be changed.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.one').length === 1);
|
||||
assert(document.querySelectorAll('.two').length === 1);
|
||||
```
|
||||
|
||||
Your new `div` should be nested in your `.canvas` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
|
||||
```
|
||||
|
||||
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-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69987
|
||||
title: Part 30
|
||||
challengeType: 0
|
||||
dashedName: part-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You don't always have to use pixels when sizing an element.
|
||||
|
||||
Create a new rule, `.three`, and set its `width` to `91%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.three` selector.
|
||||
|
||||
```js
|
||||
const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
|
||||
assert(hasThree);
|
||||
```
|
||||
|
||||
You should set the `width` property to `91%`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
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-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
--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>
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69988
|
||||
title: Part 31
|
||||
challengeType: 0
|
||||
dashedName: part-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `height` of `.three` to `28%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `28%`.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `height` value of `28%`.
|
||||
|
||||
```js
|
||||
const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
|
||||
assert(threeHeight === '28%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
--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>
|
||||
```
|
||||
@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69989
|
||||
title: Part 32
|
||||
challengeType: 0
|
||||
dashedName: part-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the `background-color` of `.three` to `#b20403`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `background-color` property to `#b20403`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `background-color` value of `#b20403`.
|
||||
|
||||
```js
|
||||
const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
|
||||
assert(threeBackground === 'rgb(178, 4, 3)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
--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>
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998a
|
||||
title: Part 33
|
||||
challengeType: 0
|
||||
dashedName: part-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Center the `.three` element on the canvas by setting its `margin` to `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `auto`.
|
||||
|
||||
```js
|
||||
const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
|
||||
assert(marginFilter.length === 2);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `margin` value of `auto`.
|
||||
|
||||
```js
|
||||
const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
|
||||
assert(threeMargin === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
--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>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998b
|
||||
title: Part 34
|
||||
challengeType: 0
|
||||
dashedName: part-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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 `.two`, add `margin: 0 auto 20px;` to set its top margin to 0, center it horizontally, and set its bottom margin to 20 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `0 auto 20px`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `margin` value of `0 auto 20px`.
|
||||
|
||||
```js
|
||||
const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
|
||||
assert(twoMargin === '0px auto 20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
--fcc-editable-region--
|
||||
margin: auto;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998c
|
||||
title: Part 35
|
||||
challengeType: 0
|
||||
dashedName: part-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The colors and shapes of your painting are too sharp to pass as a Rothko.
|
||||
|
||||
Use the `filter` property with the value `blur(2px)` in the `.canvas`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `filter` property to `blur(2px)`.
|
||||
|
||||
```js
|
||||
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
|
||||
assert(hasFilter);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `filter` value of `blur(2px)`.
|
||||
|
||||
```js
|
||||
const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
|
||||
assert(canvasFilter === 'blur(2px)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998d
|
||||
title: Part 36
|
||||
challengeType: 0
|
||||
dashedName: part-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
|
||||
|
||||
Here's an example of a rule that increases the `blur` of two elements:
|
||||
|
||||
```css
|
||||
h1, p {
|
||||
filter: blur(3px);
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.one, .two` selector.
|
||||
|
||||
```js
|
||||
const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
|
||||
assert(oneTwo);
|
||||
```
|
||||
|
||||
You should set the `filter` property to `blur(1px)`.
|
||||
|
||||
```js
|
||||
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
|
||||
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-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;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998e
|
||||
title: Part 37
|
||||
challengeType: 0
|
||||
dashedName: part-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Increase the `blur` of `.three` by 2 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `filter` property to `blur(2px)`.
|
||||
|
||||
```js
|
||||
const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
|
||||
assert(filterFilter.length === 2);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `filter` value of `blur(2px)`.
|
||||
|
||||
```js
|
||||
const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
|
||||
assert(threeFilter === 'blur(2px)');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
--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>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998f
|
||||
title: Part 38
|
||||
challengeType: 0
|
||||
dashedName: part-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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--
|
||||
|
||||
You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
|
||||
|
||||
```js
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
assert(hasBoxShadow);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
|
||||
|
||||
```js
|
||||
const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
|
||||
assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69990
|
||||
title: Part 39
|
||||
challengeType: 0
|
||||
dashedName: part-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
|
||||
|
||||
```js
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
assert(hasBoxShadow);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
|
||||
|
||||
```js
|
||||
const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
|
||||
assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69991
|
||||
title: Part 40
|
||||
challengeType: 0
|
||||
dashedName: part-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
|
||||
|
||||
```js
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
assert(hasBoxShadow);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
|
||||
|
||||
```js
|
||||
const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
|
||||
assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
--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>
|
||||
```
|
||||
@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69992
|
||||
title: Part 41
|
||||
challengeType: 0
|
||||
dashedName: part-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The corners of each rectangle are still too sharp.
|
||||
|
||||
Round each corner of `.one` by 9 pixels with `border-radius: 9px;`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `border-radius` property to `9px`.
|
||||
|
||||
```js
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
|
||||
assert(hasBorderRadius);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `border-radius` value of `9px`.
|
||||
|
||||
```js
|
||||
const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
|
||||
assert(oneBorderRadius === '9px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69993
|
||||
title: Part 42
|
||||
challengeType: 0
|
||||
dashedName: part-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `border-radius` of `.two` to `8px 10px`. This will round its top-left and bottom-right corners by 8 pixels, and top-right and bottom-left corners by 10 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `border-radius` property to `8px 10px`.
|
||||
|
||||
```js
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
|
||||
assert(hasBorderRadius);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `border-radius` value of `8px 10px`.
|
||||
|
||||
```js
|
||||
const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
|
||||
assert(twoBorderRadius === '8px 10px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69994
|
||||
title: Part 43
|
||||
challengeType: 0
|
||||
dashedName: part-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `border-radius` property accepts up to four values to round the 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--
|
||||
|
||||
You should set the `border-radius` property to `30px 25px 60px 12px`.
|
||||
|
||||
```js
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
|
||||
assert(hasBorderRadius);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
|
||||
|
||||
```js
|
||||
const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
|
||||
assert(threeBorderRadius === '30px 25px 60px 12px');
|
||||
```
|
||||
|
||||
# --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;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
border-radius: 8px 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
--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>
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69995
|
||||
title: Part 44
|
||||
challengeType: 0
|
||||
dashedName: part-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate each rectangle to give them more of an imperfect, hand-painted look.
|
||||
|
||||
Use the following to rotate `.one` counter clockwise by 0.6 degrees: `transform: rotate(-0.6deg);`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property to `rotate(-0.6deg)`.
|
||||
|
||||
```js
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
|
||||
assert(hasTransform);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
|
||||
|
||||
```js
|
||||
const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
|
||||
assert(oneTransform === 'rotate(-0.6deg)');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
border-radius: 8px 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69996
|
||||
title: Part 45
|
||||
challengeType: 0
|
||||
dashedName: part-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate `.two` clockwise slightly by adding the `transform` property with the value `rotate(0.4deg)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property to `rotate(0.4deg)`.
|
||||
|
||||
```js
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
|
||||
assert(hasTransform);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
|
||||
|
||||
```js
|
||||
const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
|
||||
assert(twoTransform === 'rotate(0.4deg)');
|
||||
```
|
||||
|
||||
# --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;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
```
|
||||
|
||||
```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>
|
||||
```
|
||||
@ -0,0 +1,180 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69997
|
||||
title: Part 46
|
||||
challengeType: 0
|
||||
dashedName: part-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);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user