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
@ -72,6 +72,13 @@
|
||||
"title": "Basic CSS Cafe Menu",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"css-box-model": {
|
||||
"title": "CSS Box Model",
|
||||
"intro": [
|
||||
"Mark Rothko was known for his abstract style of painting. Rothko paintings commonly depicted rectangular regions of color in varying sizes.",
|
||||
"In this lesson, you will be using CSS to create your own painting in Rothko's style. You will use many of the skills you have already been practicing, as well as new CSS tool such as blur and transform."
|
||||
]
|
||||
},
|
||||
"css-variables-skyline": {
|
||||
"title": "CSS Variables Skyline",
|
||||
"intro": ["", ""]
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"responsive-web-design-principles": "HTML-CSS",
|
||||
"css-flexbox": "HTML-CSS",
|
||||
"css-grid": "HTML-CSS",
|
||||
"css-box-model": "HTML-CSS",
|
||||
"css-picasso-painting": "HTML-CSS",
|
||||
"responsive-web-design-projects": "HTML-CSS",
|
||||
"basic-javascript": "JavaScript",
|
||||
|
||||
198
curriculum/challenges/_meta/css-box-model/meta.json
Normal file
198
curriculum/challenges/_meta/css-box-model/meta.json
Normal file
@ -0,0 +1,198 @@
|
||||
{
|
||||
"name": "CSS Box Model",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "css-box-model",
|
||||
"order": 12,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60a3e3396c7b40068ad6996a",
|
||||
"Part 1"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6996b",
|
||||
"Part 2"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6996c",
|
||||
"Part 3"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6996d",
|
||||
"Part 4"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6996e",
|
||||
"Part 5"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6996f",
|
||||
"Part 6"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69970",
|
||||
"Part 7"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69971",
|
||||
"Part 8"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69972",
|
||||
"Part 9"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69973",
|
||||
"Part 10"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69974",
|
||||
"Part 11"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69975",
|
||||
"Part 12"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69976",
|
||||
"Part 13"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69977",
|
||||
"Part 14"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69978",
|
||||
"Part 15"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69979",
|
||||
"Part 16"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6997a",
|
||||
"Part 17"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6997b",
|
||||
"Part 18"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6997c",
|
||||
"Part 19"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6997d",
|
||||
"Part 20"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6997e",
|
||||
"Part 21"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6997f",
|
||||
"Part 22"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69980",
|
||||
"Part 23"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69981",
|
||||
"Part 24"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69982",
|
||||
"Part 25"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69983",
|
||||
"Part 26"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69984",
|
||||
"Part 27"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69985",
|
||||
"Part 28"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69986",
|
||||
"Part 29"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69987",
|
||||
"Part 30"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69988",
|
||||
"Part 31"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69989",
|
||||
"Part 32"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998a",
|
||||
"Part 33"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998b",
|
||||
"Part 34"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998c",
|
||||
"Part 35"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998d",
|
||||
"Part 36"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998e",
|
||||
"Part 37"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998f",
|
||||
"Part 38"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69990",
|
||||
"Part 39"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69991",
|
||||
"Part 40"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69992",
|
||||
"Part 41"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69993",
|
||||
"Part 42"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69994",
|
||||
"Part 43"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69995",
|
||||
"Part 44"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69996",
|
||||
"Part 45"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69997",
|
||||
"Part 46"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
```
|
||||
@ -21,6 +21,7 @@
|
||||
"basic-html-cat-photo-app": "HTML Cat Photo App",
|
||||
"basic-css-cafe-menu": "CSS Cafe Menu",
|
||||
"css-variables-skyline": "CSS Variables Skyline",
|
||||
"css-box-model": "CSS Box Model",
|
||||
"css-picasso-painting": "CSS Picasso Painting",
|
||||
"javascript-spreadsheet": "JavaScript Spreadsheet",
|
||||
"intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter",
|
||||
|
||||
Reference in New Issue
Block a user