feat(curriculum): css picasso painting (#42436)
* feat: generating steps - Steps 1-32 done. - Steps 33-80 done. - Instructions 1-26 done. - Instructions 27-61 done. - More steps. - Instructions 62-88 done. - Clarify instructions for new concepts. - build fixes - Audit instructions on live site. * fix: add helpCategory * feat: write tests * feat: add intro * chore: use the right selectors Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * chore: cannot read property Shaun of undefined :) Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * feat: Shau-ptional chaining * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: uncross my wires * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: gikf <60067306+gikf@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
6fd628f338
commit
fa84f6c449
@ -75,6 +75,13 @@
|
||||
"css-variables-skyline": {
|
||||
"title": "CSS Variables Skyline",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"css-picasso-painting": {
|
||||
"title": "CSS Picasso Painting",
|
||||
"intro": [
|
||||
"Pablo Picasso was known for his Cubism style of painting, a style recognized by representations of objects broken down and reassembled from multiple perspectives. Picasso's paintings are often highly abstract and thought provoking.",
|
||||
"In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"responsive-web-design-principles": "HTML-CSS",
|
||||
"css-flexbox": "HTML-CSS",
|
||||
"css-grid": "HTML-CSS",
|
||||
"css-picasso-painting": "HTML-CSS",
|
||||
"responsive-web-design-projects": "HTML-CSS",
|
||||
"basic-javascript": "JavaScript",
|
||||
"es6": "JavaScript",
|
||||
|
||||
370
curriculum/challenges/_meta/css-picasso-painting/meta.json
Normal file
370
curriculum/challenges/_meta/css-picasso-painting/meta.json
Normal file
@ -0,0 +1,370 @@
|
||||
{
|
||||
"name": "CSS Picasso Painting",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "css-picasso-painting",
|
||||
"order": 11,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60b69a66b6ddb80858c51578",
|
||||
"Part 1"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51579",
|
||||
"Part 2"
|
||||
],
|
||||
[
|
||||
"60b80da8676fb3227967a731",
|
||||
"Part 3"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5157a",
|
||||
"Part 4"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5157b",
|
||||
"Part 5"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5157c",
|
||||
"Part 6"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5157d",
|
||||
"Part 7"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5157e",
|
||||
"Part 8"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5157f",
|
||||
"Part 9"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51580",
|
||||
"Part 10"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51581",
|
||||
"Part 11"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51582",
|
||||
"Part 12"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51583",
|
||||
"Part 13"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51584",
|
||||
"Part 14"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51585",
|
||||
"Part 15"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51586",
|
||||
"Part 16"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51587",
|
||||
"Part 17"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51588",
|
||||
"Part 18"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51589",
|
||||
"Part 19"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5158a",
|
||||
"Part 20"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5158b",
|
||||
"Part 21"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5158c",
|
||||
"Part 22"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5158d",
|
||||
"Part 23"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5158e",
|
||||
"Part 24"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5158f",
|
||||
"Part 25"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51590",
|
||||
"Part 26"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51591",
|
||||
"Part 27"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51592",
|
||||
"Part 28"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51593",
|
||||
"Part 29"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51594",
|
||||
"Part 30"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51595",
|
||||
"Part 31"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51596",
|
||||
"Part 32"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51597",
|
||||
"Part 33"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51598",
|
||||
"Part 34"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c51599",
|
||||
"Part 35"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5159a",
|
||||
"Part 36"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5159b",
|
||||
"Part 37"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5159c",
|
||||
"Part 38"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5159d",
|
||||
"Part 39"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5159e",
|
||||
"Part 40"
|
||||
],
|
||||
[
|
||||
"60bad32219ebcb4a8810ac6a",
|
||||
"Part 41"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c5159f",
|
||||
"Part 42"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a0",
|
||||
"Part 43"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a1",
|
||||
"Part 44"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a2",
|
||||
"Part 45"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a3",
|
||||
"Part 46"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a4",
|
||||
"Part 47"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a5",
|
||||
"Part 48"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a6",
|
||||
"Part 49"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a7",
|
||||
"Part 50"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a8",
|
||||
"Part 51"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515a9",
|
||||
"Part 52"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515aa",
|
||||
"Part 53"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515ab",
|
||||
"Part 54"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515ac",
|
||||
"Part 55"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515ad",
|
||||
"Part 56"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515ae",
|
||||
"Part 57"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515af",
|
||||
"Part 58"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b0",
|
||||
"Part 59"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b1",
|
||||
"Part 60"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b2",
|
||||
"Part 61"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b3",
|
||||
"Part 62"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b4",
|
||||
"Part 63"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b5",
|
||||
"Part 64"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b6",
|
||||
"Part 65"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b7",
|
||||
"Part 66"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b8",
|
||||
"Part 67"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515b9",
|
||||
"Part 68"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515ba",
|
||||
"Part 69"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515bc",
|
||||
"Part 70"
|
||||
],
|
||||
[
|
||||
"60ba8914bab51f0fb8228e9c",
|
||||
"Part 71"
|
||||
],
|
||||
[
|
||||
"60ba89146b25080f99ab54ad",
|
||||
"Part 72"
|
||||
],
|
||||
[
|
||||
"60ba8913f1704c0f7a8906b8",
|
||||
"Part 73"
|
||||
],
|
||||
[
|
||||
"60ba89123a445e0f5c9e4022",
|
||||
"Part 74"
|
||||
],
|
||||
[
|
||||
"60ba890832b4940f24d1936b",
|
||||
"Part 75"
|
||||
],
|
||||
[
|
||||
"60ba929345ab0714a3743655",
|
||||
"Part 76"
|
||||
],
|
||||
[
|
||||
"60ba9296d4d6b414c1b10995",
|
||||
"Part 77"
|
||||
],
|
||||
[
|
||||
"60ba92987c1e4914dfa7a0b9",
|
||||
"Part 78"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515bd",
|
||||
"Part 79"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515be",
|
||||
"Part 80"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515bf",
|
||||
"Part 81"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c0",
|
||||
"Part 82"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c1",
|
||||
"Part 83"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c2",
|
||||
"Part 84"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c3",
|
||||
"Part 85"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c4",
|
||||
"Part 86"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c5",
|
||||
"Part 87"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c6",
|
||||
"Part 88"
|
||||
],
|
||||
[
|
||||
"60b69a66b6ddb80858c515c7",
|
||||
"Part 89"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51578
|
||||
title: Part 1
|
||||
challengeType: 0
|
||||
dashedName: part-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Start by setting up your HTML structure. Add a `<!DOCTYPE>` declaration and an `html` element. Within the `html` element, add a `head` element and a `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
The `head` and `body` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
The `head` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
The `body` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51579
|
||||
title: Part 2
|
||||
challengeType: 0
|
||||
dashedName: part-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `freeCodeCamp Picasso Painting`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add exactly one `meta` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('meta').length === 1);
|
||||
```
|
||||
|
||||
Your `meta` element should have a `charset` attribute.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta')?.getAttribute('charset'));
|
||||
```
|
||||
|
||||
Your `charset` attribute should be set to `utf-8`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8');
|
||||
```
|
||||
|
||||
You should add exactly one `title` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('title').length === 1);
|
||||
```
|
||||
|
||||
Your `title` element should have the text `freeCodeCamp Picasso Painting`. Note that spelling and casing matter.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('title')?.innerText === 'freeCodeCamp Picasso Painting');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 60b80da8676fb3227967a731
|
||||
title: Part 3
|
||||
challengeType: 0
|
||||
dashedName: part-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Go ahead and link your CSS file now, even though you have not written any CSS yet.
|
||||
|
||||
Add a `link` element with a `rel` of `stylesheet`, a `type` of `text/css`, and an `href` of `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
Your `link` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\w\W\s]+\/>/i));
|
||||
```
|
||||
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have a `type` attribute with the value `text/css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157a
|
||||
title: Part 4
|
||||
challengeType: 0
|
||||
dashedName: part-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML.
|
||||
|
||||
Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add another `link` element.
|
||||
|
||||
```js
|
||||
// We set this to 1 because the CSS link is stripped from the code by our parser.
|
||||
assert(document.querySelectorAll('link').length === 2);
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` of `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet');
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` of
|
||||
`https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157b
|
||||
title: Part 5
|
||||
challengeType: 0
|
||||
dashedName: part-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `body` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157c
|
||||
title: Part 6
|
||||
challengeType: 0
|
||||
dashedName: part-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your body tag, add a `div` element. Give it an `id` of `back-wall`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add exactly 1 `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element should have the `id` value of `back-wall`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.getAttribute('id') === 'back-wall');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157d
|
||||
title: Part 7
|
||||
challengeType: 0
|
||||
dashedName: part-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `#back-wall` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall'));
|
||||
```
|
||||
|
||||
Your `#back-wall` selector should have a `background-color` of `#8B4513`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157e
|
||||
title: Part 8
|
||||
challengeType: 0
|
||||
dashedName: part-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `back-wall` element a `width` of `100%` and a `height` of `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `width` of the `#back-wall` selector to `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%');
|
||||
```
|
||||
|
||||
You should set the `height` of the `#back-wall` selector to `60%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5157f
|
||||
title: Part 9
|
||||
challengeType: 0
|
||||
dashedName: part-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` attribute.
|
||||
|
||||
Set the `position` attribute for the `back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container.
|
||||
|
||||
When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `back-wall` to have a `top` value of `0`, and a `left` value of `0`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#back-wall` selector should have the `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#back-wall` selector should have the `top` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px');
|
||||
```
|
||||
|
||||
Your `#back-wall` selector should have the `left` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51580
|
||||
title: Part 10
|
||||
challengeType: 0
|
||||
dashedName: part-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept.
|
||||
|
||||
Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects.
|
||||
|
||||
Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#back-wall` selector should have the `z-index` property set to `-1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51581
|
||||
title: Part 11
|
||||
challengeType: 0
|
||||
dashedName: part-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should only add one new `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 2);
|
||||
```
|
||||
|
||||
Your new `div` element should come after your `#back-wall` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div');
|
||||
```
|
||||
|
||||
Your new `div` element should have the `class` set to `characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51582
|
||||
title: Part 12
|
||||
challengeType: 0
|
||||
dashedName: part-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside that `characters` element, create another `div` with an `id` of `offwhite-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should only create 1 additional `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 3);
|
||||
```
|
||||
|
||||
Your new `div` element should be nested in your `.characters` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.characters div'));
|
||||
```
|
||||
|
||||
Your new `div` element should have an `id` of `offwhite-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51583
|
||||
title: Part 13
|
||||
challengeType: 0
|
||||
dashedName: part-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add four `div` elements within your `.offwhite-character` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div').length === 4);
|
||||
```
|
||||
|
||||
Your first new `div` element should have the `id` of `white-hat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat');
|
||||
```
|
||||
|
||||
Your second new `div` element should have the `id` of `black-mask`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask');
|
||||
```
|
||||
|
||||
Your third new `div` element should have the `id` of `gray-instrument`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument');
|
||||
```
|
||||
|
||||
Your fourth new `div` element should have the `id` of `tan-table`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51584
|
||||
title: Part 14
|
||||
challengeType: 0
|
||||
dashedName: part-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
This character needs eyes. Create two `div` elements in the `black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create 2 `div` elements within your `#black-mask` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-mask div').length === 2);
|
||||
```
|
||||
|
||||
Your first new `div` should have the classes `eyes` and `left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes'));
|
||||
assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left'));
|
||||
```
|
||||
|
||||
Your second new `div` should have the classes `eyes` and `right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes'));
|
||||
assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="gray-instrument"></div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51585
|
||||
title: Part 15
|
||||
challengeType: 0
|
||||
dashedName: part-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create some "dots" for the instrument. Add five `div` elements within your `gray-instrument` element. Set the `class` of each to `black-dot`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have five new `div` elements within your `#gray-instrument` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#gray-instrument div').length === 5);
|
||||
```
|
||||
|
||||
Your five `div` elements should all have the class `black-dot`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51586
|
||||
title: Part 16
|
||||
challengeType: 0
|
||||
dashedName: part-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, create a rule for your `offwhite-character` element. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `#offwhite-character` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character'));
|
||||
```
|
||||
|
||||
Your `#offwhite-character` should have a `width` property set to `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px');
|
||||
```
|
||||
|
||||
Your `#offwhite-character` should have a `height` property set to `550px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px');
|
||||
```
|
||||
|
||||
Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51587
|
||||
title: Part 17
|
||||
challengeType: 0
|
||||
dashedName: part-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#offwhite-character` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#offwhite-character` selector should have a `top` property set to `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%');
|
||||
```
|
||||
|
||||
Your `#offwhite-character` selector should have a `left` property set to `17.5%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51588
|
||||
title: Part 18
|
||||
challengeType: 0
|
||||
dashedName: part-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, style your `white-hat` element. Give it a `width` and `height` of `0`, and a `border-style` of `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `#white-hat` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat'));
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `width` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px');
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `height` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px');
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `border-style` property set to `solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51589
|
||||
title: Part 19
|
||||
challengeType: 0
|
||||
dashedName: part-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158a
|
||||
title: Part 20
|
||||
challengeType: 0
|
||||
dashedName: part-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#white-hat` selector should have a `border-top-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `border-right-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `border-left-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158b
|
||||
title: Part 21
|
||||
challengeType: 0
|
||||
dashedName: part-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#white-hat` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `top` property set to `-140px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px');
|
||||
```
|
||||
|
||||
Your `#white-hat` selector should have a `left` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158c
|
||||
title: Part 22
|
||||
challengeType: 0
|
||||
dashedName: part-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, create a rule for your `black-mask` element. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#black-mask` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask'));
|
||||
```
|
||||
|
||||
Your `#black-mask` selector should have a `width` property set to `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%');
|
||||
```
|
||||
|
||||
Your `#black-mask` selector should have a `height` property set to `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px');
|
||||
```
|
||||
|
||||
Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158d
|
||||
title: Part 23
|
||||
challengeType: 0
|
||||
dashedName: part-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-mask` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#black-mask` selector should have a `top` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px');
|
||||
```
|
||||
|
||||
Your `#black-mask` selector should have a `left` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158e
|
||||
title: Part 24
|
||||
challengeType: 0
|
||||
dashedName: part-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To ensure you can see the mask, give it a `z-index` of `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-mask` selector should have a `z-index` property set to `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5158f
|
||||
title: Part 25
|
||||
challengeType: 0
|
||||
dashedName: part-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, give your `gray-instrument` element a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#gray-instrument` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument'));
|
||||
```
|
||||
|
||||
Your `#gray-instrument` selector should have a `width` property set to `15%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%');
|
||||
```
|
||||
|
||||
Your `#gray-instrument` selector should have a `height` property set to `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%');
|
||||
```
|
||||
|
||||
Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,124 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51590
|
||||
title: Part 26
|
||||
challengeType: 0
|
||||
dashedName: part-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gray-instrument` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#gray-instrument` selector should have a `top` value set to `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px');
|
||||
```
|
||||
|
||||
Your `#gray-instrument` selector should have a `left` value set to `125px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51591
|
||||
title: Part 27
|
||||
challengeType: 0
|
||||
dashedName: part-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `z-index` to `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gray-instrument` selector should have a `z-index` property set to `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51592
|
||||
title: Part 28
|
||||
challengeType: 0
|
||||
dashedName: part-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to create a rule for the `black-dot` elements. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.black-dot` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot'));
|
||||
```
|
||||
|
||||
Your `.black-dot` selector should have a `width` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px');
|
||||
```
|
||||
|
||||
Your `.black-dot` selector should have a `height` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px');
|
||||
```
|
||||
|
||||
Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51593
|
||||
title: Part 29
|
||||
challengeType: 0
|
||||
dashedName: part-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.black-dot` selector should have a `border-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderRadius === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51594
|
||||
title: Part 30
|
||||
challengeType: 0
|
||||
dashedName: part-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.black-dot` selector should have a `display` property set to `block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block');
|
||||
```
|
||||
|
||||
Your `.black-dot` selector should have a `margin` property set to `auto`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto'));
|
||||
```
|
||||
|
||||
Your `.black-dot` selector should have a `margin-top` property set to `65%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51595
|
||||
title: Part 31
|
||||
challengeType: 0
|
||||
dashedName: part-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to style your `tan-table` element. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#tan-table` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table'));
|
||||
```
|
||||
|
||||
Your `#tan-table` selector should have a `width` property set to `450px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px');
|
||||
```
|
||||
|
||||
Your `#tan-table` selector should have a `height` property set to `140px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px');
|
||||
```
|
||||
|
||||
Your `#tan-table` selector should have a `background-color` property set to `#D2691E`.
|
||||
|
||||
```js
|
||||
assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51596
|
||||
title: Part 32
|
||||
challengeType: 0
|
||||
dashedName: part-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#tan-table` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#tan-table` selector should have a `top` property set to `275px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px');
|
||||
```
|
||||
|
||||
Your `#tan-table` selector should have a `left` property set to `15px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51597
|
||||
title: Part 33
|
||||
challengeType: 0
|
||||
dashedName: part-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the table a `z-index` of `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#tan-table` selector should have a `z-index` property set to `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51598
|
||||
title: Part 34
|
||||
challengeType: 0
|
||||
dashedName: part-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `div` element within the `.characters` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 2);
|
||||
```
|
||||
|
||||
Your new `div` element should have the `id` set to `black-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c51599
|
||||
title: Part 35
|
||||
challengeType: 0
|
||||
dashedName: part-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your new `black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three `div` elements within your `#black-character` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.length === 3);
|
||||
```
|
||||
|
||||
Your first new `div` element should have the `id` set to `black-hat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat');
|
||||
```
|
||||
|
||||
Your second new `div` element should have the `id` set to `gray-mask`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask');
|
||||
```
|
||||
|
||||
Your third new `div` element should have the `id` set to `white-paper`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159a
|
||||
title: Part 36
|
||||
challengeType: 0
|
||||
dashedName: part-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The mask needs eyes. Within your `gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `div` elements within your `#gray-mask` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#gray-mask > div')?.length === 2);
|
||||
```
|
||||
|
||||
Your first new `div` element should have the `class` set to `eyes left`.
|
||||
|
||||
```js
|
||||
const first = document.querySelectorAll('#gray-mask > div')?.[0];
|
||||
assert(first?.classList?.contains('eyes'));
|
||||
assert(first?.classList?.contains('left'));
|
||||
```
|
||||
|
||||
Your second new `div` element should have the `class` set to `eyes right`.
|
||||
|
||||
```js
|
||||
const second = document.querySelectorAll('#gray-mask > div')?.[1];
|
||||
assert(second?.classList?.contains('eyes'));
|
||||
assert(second?.classList?.contains('right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="white-paper"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159b
|
||||
title: Part 37
|
||||
challengeType: 0
|
||||
dashedName: part-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to use some FontAwesome icons.
|
||||
|
||||
The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome.
|
||||
|
||||
Within your `white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`.
|
||||
|
||||
This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have four new `i` elements within your `#white-paper` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#white-paper > i')?.length === 4);
|
||||
```
|
||||
|
||||
All of your `i` elements should have the `class` set to `fas fa-music`.
|
||||
|
||||
```js
|
||||
const icons = document.querySelectorAll('#white-paper > i');
|
||||
for (const icon of icons) {
|
||||
assert(icon.classList?.contains('fas'));
|
||||
assert(icon.classList?.contains('fa-music'));
|
||||
};
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,168 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159c
|
||||
title: Part 38
|
||||
challengeType: 0
|
||||
dashedName: part-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a rule for your `black-character` element. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `#black-character` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character'));
|
||||
```
|
||||
|
||||
Your `#black-character` selector should have a `width` property set to `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px');
|
||||
```
|
||||
|
||||
Your `#black-character` selector should have a `height` property set to `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px');
|
||||
```
|
||||
|
||||
Your `#black-character` selector should have a `background-color` property to `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,166 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159d
|
||||
title: Part 39
|
||||
challengeType: 0
|
||||
dashedName: part-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-character` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#black-character` selector should have a `top` property set to `30%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%');
|
||||
```
|
||||
|
||||
Your `#black-character` selector should have a `left` property set to `59%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,177 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159e
|
||||
title: Part 40
|
||||
challengeType: 0
|
||||
dashedName: part-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a rule for your `black-hat` element. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#black-hat` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat'));
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `width` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px');
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `height` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px');
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `border-style` property set to `solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,163 @@
|
||||
---
|
||||
id: 60bad32219ebcb4a8810ac6a
|
||||
title: Part 41
|
||||
challengeType: 0
|
||||
dashedName: part-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `border-width` of the `black-hat` to `150px 0 0 300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c5159f
|
||||
title: Part 42
|
||||
challengeType: 0
|
||||
dashedName: part-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like with your `white-hat`, you should style the border for the `black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-hat` selector should have a `border-top-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `border-right-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,180 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a0
|
||||
title: Part 43
|
||||
challengeType: 0
|
||||
dashedName: part-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now position the `black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-hat` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `top` property set to `-150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px');
|
||||
```
|
||||
|
||||
Your `#black-hat` selector should have a `left` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a1
|
||||
title: Part 44
|
||||
challengeType: 0
|
||||
dashedName: part-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, style the `gray-mask` element. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#gray-mask` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask'));
|
||||
```
|
||||
|
||||
Your `#gray-mask` selector should have a `width` property set to `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px');
|
||||
```
|
||||
|
||||
Your `#gray-mask` selector should have a `height` property set to `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px')
|
||||
```
|
||||
|
||||
Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,189 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a2
|
||||
title: Part 45
|
||||
challengeType: 0
|
||||
dashedName: part-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#gray-mask` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#gray-mask` selector should have a `top` property set to `-10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px');
|
||||
```
|
||||
|
||||
Your `#gray-mask` selector should have a `left` property set to `70px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a3
|
||||
title: Part 46
|
||||
challengeType: 0
|
||||
dashedName: part-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using an `id` selector, create a rule for the `white-paper` element. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#white-paper` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper'));
|
||||
```
|
||||
|
||||
Your `#white-paper` selector should have a `width` property set to `400px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px');
|
||||
```
|
||||
|
||||
Your `#white-paper` selector should have a `height` property set to `100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px');
|
||||
```
|
||||
|
||||
Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,198 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a4
|
||||
title: Part 47
|
||||
challengeType: 0
|
||||
dashedName: part-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#white-paper` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#white-paper` selector should have a `top` property set to `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px');
|
||||
```
|
||||
|
||||
Your `#white-paper` selector should have a `left` property set to `-150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,189 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a5
|
||||
title: Part 48
|
||||
challengeType: 0
|
||||
dashedName: part-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `z-index` of the `white-paper` to `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#white-paper` selector should have a `z-index` property set to `1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a6
|
||||
title: Part 49
|
||||
challengeType: 0
|
||||
dashedName: part-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a `class` selector to target your `fa-music` icons. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.fa-music` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-music'));
|
||||
```
|
||||
|
||||
Your `.fa-music` selector should have a `display` property set to `inline-block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block');
|
||||
```
|
||||
|
||||
Your `.fa-music` selector should have a `margin-top` property set to `8%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%');
|
||||
```
|
||||
|
||||
Your `.fa-music` selector should have a `margin-left` property set to `13%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,216 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a7
|
||||
title: Part 50
|
||||
challengeType: 0
|
||||
dashedName: part-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two new `div` elements within your `.characters` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 4);
|
||||
```
|
||||
|
||||
Your two new `div` elemnts should have the `class` set to `blue`.
|
||||
|
||||
```js
|
||||
const divs = document.querySelectorAll('.characters > div');
|
||||
assert(divs?.[2]?.classList?.contains('blue'))
|
||||
assert(divs?.[3]?.classList?.contains('blue'))
|
||||
```
|
||||
|
||||
Your first new `div` should have an `id` of `blue-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left');
|
||||
```
|
||||
|
||||
Your second new `div` should have an `id` of `blue-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,206 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a8
|
||||
title: Part 51
|
||||
challengeType: 0
|
||||
dashedName: part-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.blue` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue'));
|
||||
```
|
||||
|
||||
Your `.blue` selector should have a `background-color` property set to `#1E90FF`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,216 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515a9
|
||||
title: Part 52
|
||||
challengeType: 0
|
||||
dashedName: part-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#blue-left` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left'));
|
||||
```
|
||||
|
||||
Your `#blue-left` selector should have a `width` property set to `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px');
|
||||
```
|
||||
|
||||
Your `#blue-left` selector should have a `height` property set to `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,219 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515aa
|
||||
title: Part 53
|
||||
challengeType: 0
|
||||
dashedName: part-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#blue-left` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#blue-left` selector should have a `top` property set to `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%');
|
||||
```
|
||||
|
||||
Your `#blue-left` selector should have a `left` property set to `20%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ab
|
||||
title: Part 54
|
||||
challengeType: 0
|
||||
dashedName: part-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#blue-right` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right'));
|
||||
```
|
||||
|
||||
Your `#blue-right` selector should have a `width` property set to `400px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px');
|
||||
```
|
||||
|
||||
Your `#blue-right` selector should have a `height` property set to `300px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ac
|
||||
title: Part 55
|
||||
challengeType: 0
|
||||
dashedName: part-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#blue-right` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#blue-right` selector should have a `top` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%');
|
||||
```
|
||||
|
||||
Your `#blue-right` selector should have a `left` property set to `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ad
|
||||
title: Part 56
|
||||
challengeType: 0
|
||||
dashedName: part-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `blue` elements, add another `div`. Give it the `id` value of `orange-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div` element within your `characters` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 5);
|
||||
```
|
||||
|
||||
Your new `div` element should have the `id` set to `orange-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ae
|
||||
title: Part 57
|
||||
challengeType: 0
|
||||
dashedName: part-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within that `orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have four new `div` elements within your `orange-character` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.length === 4);
|
||||
```
|
||||
|
||||
Your first new `div` element should have an `id` set to `black-round-hat`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat');
|
||||
```
|
||||
|
||||
Your second new `div` element should have an `id` set to `eyes-div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div');
|
||||
```
|
||||
|
||||
Your third new `div` element should have an `id` set to `triangles`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles');
|
||||
```
|
||||
|
||||
Your fourth new `div` element should have an `id` set to `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,239 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515af
|
||||
title: Part 58
|
||||
challengeType: 0
|
||||
dashedName: part-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `div` elements nested in your `eyes-div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
|
||||
```
|
||||
|
||||
The first new `div` should have the `class` set to `eyes left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes'));
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left'));
|
||||
```
|
||||
|
||||
The second new `div` should have the `class` set to `eyes right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes'));
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="triangles"></div>
|
||||
<div id="guitar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b0
|
||||
title: Part 59
|
||||
challengeType: 0
|
||||
dashedName: part-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have 30 `div` elements within your `triangles` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#triangles > div')?.length === 30);
|
||||
```
|
||||
|
||||
All 30 of your new `div` elements should have the `class` set to `triangle`.
|
||||
|
||||
```js
|
||||
const divDivDiv = document.querySelectorAll('#triangles > div');
|
||||
for (const div of divDivDiv) {
|
||||
assert(div?.classList?.contains('triangle'));
|
||||
}
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="guitar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,297 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b1
|
||||
title: Part 60
|
||||
challengeType: 0
|
||||
dashedName: part-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`.
|
||||
|
||||
The third `div` should not have the `guitar` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three new `div` elements within your `guitar` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.length === 3);
|
||||
```
|
||||
|
||||
Your first new `div` should have a `class` set to `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar'));
|
||||
```
|
||||
|
||||
Your first new `div` should have an `id` set to `guitar-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left');
|
||||
```
|
||||
|
||||
Your second new `div` should have a `class` set to `guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar'));
|
||||
```
|
||||
|
||||
Your second new `div` should have an `id` set to `guitar-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right');
|
||||
```
|
||||
|
||||
Your third new `div` should have an `id` set to `guitar-neck`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck');
|
||||
```
|
||||
|
||||
You should not give the third new `div` a `class` of `guitar`.
|
||||
|
||||
```js
|
||||
assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,280 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b2
|
||||
title: Part 61
|
||||
challengeType: 0
|
||||
dashedName: part-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use another FontAwesome icon for your `guitar`. Inside both the `guitar-left` and `guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Within your `guitar-left` element, you should add an `i` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-left > i')?.length === 1);
|
||||
```
|
||||
|
||||
Within your `guitar-right` element, you should add an `i` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-right > i')?.length === 1);
|
||||
```
|
||||
|
||||
Your two new `i` elements should have the `class` set to `fas fa-bars`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas'));
|
||||
assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars'));
|
||||
assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas'));
|
||||
assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
--fcc-editable-region--
|
||||
<div class="guitar" id="guitar-left">
|
||||
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,286 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b3
|
||||
title: Part 62
|
||||
challengeType: 0
|
||||
dashedName: part-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select your `orange-character` element with an `id` selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `#orange-character` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character'));
|
||||
```
|
||||
|
||||
Your `#orange-character` selector should have a `width` property set to `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px');
|
||||
```
|
||||
|
||||
Your `#orange-character` selector should have a `height` property set to `550px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px');
|
||||
```
|
||||
|
||||
Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,284 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b4
|
||||
title: Part 63
|
||||
challengeType: 0
|
||||
dashedName: part-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#orange-character` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#orange-character` selector should have a `top` property set to `25%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%');
|
||||
```
|
||||
|
||||
Your `#orange-character` selector should have a `left` property set to `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b5
|
||||
title: Part 64
|
||||
challengeType: 0
|
||||
dashedName: part-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Style your `black-round-hat` element with an `id` selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#black-round-hat` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat'));
|
||||
```
|
||||
|
||||
Your `#black-round-hat` selector should have a `width` property set to `180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px');
|
||||
```
|
||||
|
||||
Your `#black-round-hat` selector should have a `height` property set to `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px');
|
||||
```
|
||||
|
||||
Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,281 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b6
|
||||
title: Part 65
|
||||
challengeType: 0
|
||||
dashedName: part-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-round-hat` selector should have a `border-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,294 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b7
|
||||
title: Part 66
|
||||
challengeType: 0
|
||||
dashedName: part-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-round-hat` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#black-round-hat` selector should have a `top` property set to `-100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px');
|
||||
```
|
||||
|
||||
Your `#black-round-hat` selector should have a `left` property set to `5px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,285 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b8
|
||||
title: Part 67
|
||||
challengeType: 0
|
||||
dashedName: part-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Put the `black-round-hat` on the correct layer with a `z-index` of `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#black-round-hat` selector should have a `z-index` property set to `-1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,300 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515b9
|
||||
title: Part 68
|
||||
challengeType: 0
|
||||
dashedName: part-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a rule for your `eyes-div` element. Set the `width` to `180px` and the `height` to `50px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `#eyes-div` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div'));
|
||||
```
|
||||
|
||||
Your `#eyes-div` selector should have a `width` property set to `180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px');
|
||||
```
|
||||
|
||||
Your `#eyes-div` selector should have a `height` property set to `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,303 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515ba
|
||||
title: Part 69
|
||||
challengeType: 0
|
||||
dashedName: part-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#eyes-div` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#eyes-div` selector should have a `top` property set to `-40px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px');
|
||||
```
|
||||
|
||||
Your `#eyes-div` selector should have a `left` property set to `20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,294 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515bc
|
||||
title: Part 70
|
||||
challengeType: 0
|
||||
dashedName: part-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `eyes-div` a `z-index` of `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#eyes-div` selector should have a `z-index` property set to `3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,308 @@
|
||||
---
|
||||
id: 60ba8914bab51f0fb8228e9c
|
||||
title: Part 71
|
||||
challengeType: 0
|
||||
dashedName: part-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `#triangles` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles'));
|
||||
```
|
||||
|
||||
Your `#triangles` selector should have a `width` property set to `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px');
|
||||
```
|
||||
|
||||
Your `#triangles` selector should have a `height` property set to `550px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,313 @@
|
||||
---
|
||||
id: 60ba89146b25080f99ab54ad
|
||||
title: Part 72
|
||||
challengeType: 0
|
||||
dashedName: part-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.triangle` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle'));
|
||||
```
|
||||
|
||||
Your `.triangle` selector should have a `width` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px');
|
||||
```
|
||||
|
||||
Your `.triangle` selector should have a `height` property set to `0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,310 @@
|
||||
---
|
||||
id: 60ba8913f1704c0f7a8906b8
|
||||
title: Part 73
|
||||
challengeType: 0
|
||||
dashedName: part-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.triangle` selector should have a `border-style` property set to `solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid');
|
||||
```
|
||||
|
||||
Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,324 @@
|
||||
---
|
||||
id: 60ba89123a445e0f5c9e4022
|
||||
title: Part 74
|
||||
challengeType: 0
|
||||
dashedName: part-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.triangle` selector should have a `border-top-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `.triangle` selector should have a `border-left-color` property set to `transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent');
|
||||
```
|
||||
|
||||
Your `.triangle` selector should have a `border-right-color` property set to `Gold`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,310 @@
|
||||
---
|
||||
id: 60ba890832b4940f24d1936b
|
||||
title: Part 75
|
||||
challengeType: 0
|
||||
dashedName: part-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adjust the layout of the `triangle` elements with a `display` of `inline-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.triangle` selector should have a `display` property set to `inline-block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,325 @@
|
||||
---
|
||||
id: 60ba929345ab0714a3743655
|
||||
title: Part 76
|
||||
challengeType: 0
|
||||
dashedName: part-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `#guitar` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar'));
|
||||
```
|
||||
|
||||
Your `#guitar` selector should have a `width` property set to `100%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%');
|
||||
```
|
||||
|
||||
Your `#guitar` selector should have a `height` property set to `100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,328 @@
|
||||
---
|
||||
id: 60ba9296d4d6b414c1b10995
|
||||
title: Part 77
|
||||
challengeType: 0
|
||||
dashedName: part-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#guitar` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#guitar` selector should have a `top` property set to `120px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px');
|
||||
```
|
||||
|
||||
Your `#guitar` selector should have a `left` property set to `0px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,319 @@
|
||||
---
|
||||
id: 60ba92987c1e4914dfa7a0b9
|
||||
title: Part 78
|
||||
challengeType: 0
|
||||
dashedName: part-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#guitar` rule a `z-index` of `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#guitar` selector should have a `z-index` property set to `3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515bd
|
||||
title: Part 79
|
||||
challengeType: 0
|
||||
dashedName: part-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now use a `class` selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.guitar` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar'));
|
||||
```
|
||||
|
||||
Your `.guitar` selector should have a `width` property set to `150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px');
|
||||
```
|
||||
|
||||
Your `.guitar` selector should have a `height` property set to `120px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px');
|
||||
```
|
||||
|
||||
Your `.guitar` selector should have a `background-color` property set to `Goldenrod`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod');
|
||||
```
|
||||
|
||||
Your `.guitar` selector should have a `border-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,336 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515be
|
||||
title: Part 80
|
||||
challengeType: 0
|
||||
dashedName: part-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `#guitar-left` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-left'));
|
||||
```
|
||||
|
||||
Your `#guitar-left` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515bf
|
||||
title: Part 81
|
||||
challengeType: 0
|
||||
dashedName: part-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `#guitar-right` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right'));
|
||||
```
|
||||
|
||||
Your `#guitar-right` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#guitar-right` selector should have a `left` property set to `100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,358 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c0
|
||||
title: Part 82
|
||||
challengeType: 0
|
||||
dashedName: part-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to move the bar icons into place. Create a `class` selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.fa-bars` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars'));
|
||||
```
|
||||
|
||||
Your `.fa-bars` selector should have a `display` property set to `block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block');
|
||||
```
|
||||
|
||||
Your `.fa-bars` selector should have a `margin-top` property set to `30%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%');
|
||||
```
|
||||
|
||||
Your `.fa-bars` selector should have a `margin-left` property set to `30%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,364 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c1
|
||||
title: Part 83
|
||||
challengeType: 0
|
||||
dashedName: part-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use an `id` selector to create a `guitar-neck` rule. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `#guitar-neck` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck'));
|
||||
```
|
||||
|
||||
Your `#guitar-neck` selector should have a `width` property set to `200px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px');
|
||||
```
|
||||
|
||||
Your `#guitar-neck` selector should have a `height` property set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px');
|
||||
```
|
||||
|
||||
Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,362 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c2
|
||||
title: Part 84
|
||||
challengeType: 0
|
||||
dashedName: part-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#guitar-neck` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `#guitar-neck` selector should have a `top` property set to `45px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px');
|
||||
```
|
||||
|
||||
Your `#guitar-neck` selector should have a `left` property set to `200px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,353 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c3
|
||||
title: Part 85
|
||||
challengeType: 0
|
||||
dashedName: part-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `guitar-neck` a `z-index` of `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#guitar-neck` selector should have a `z-index` property set to `3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,380 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c4
|
||||
title: Part 86
|
||||
challengeType: 0
|
||||
dashedName: part-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Time to style your `eyes` elements. Use a `class` selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.eyes` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes'));
|
||||
```
|
||||
|
||||
Your `.eyes` selector should have a `width` property set to `35px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px');
|
||||
```
|
||||
|
||||
Your `.eyes` selector should have a `height` property set to `20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px');
|
||||
```
|
||||
|
||||
Your `.eyes` selector should have a `background-color` property set to `#8B4513`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)');
|
||||
```
|
||||
|
||||
Your `.eyes` selector should have a `border-radius` property set to `20px 50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,381 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c5
|
||||
title: Part 87
|
||||
challengeType: 0
|
||||
dashedName: part-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.right` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right'));
|
||||
```
|
||||
|
||||
Your `.right` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `.right` selector should have a `top` property set to `15px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px');
|
||||
```
|
||||
|
||||
Your `.right` selector should have a `right` property set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.eyes {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background-color: #8B4513;
|
||||
border-radius: 20px 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,387 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c6
|
||||
title: Part 88
|
||||
challengeType: 0
|
||||
dashedName: part-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a new `.left` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left'));
|
||||
```
|
||||
|
||||
Your `.left` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute');
|
||||
```
|
||||
|
||||
Your `.left` selector should have a `top` property set to `15px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px');
|
||||
```
|
||||
|
||||
Your `.left` selector should have a `left` property set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.eyes {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background-color: #8B4513;
|
||||
border-radius: 20px 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,383 @@
|
||||
---
|
||||
id: 60b69a66b6ddb80858c515c7
|
||||
title: Part 89
|
||||
challengeType: 0
|
||||
dashedName: part-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
One last step. The FontAwesome icons are a little too small. Target all of them with a `class` selector for `fas`, and set the `font-size` to `30px`.
|
||||
|
||||
With that, your Picasso painting is complete!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `.fas` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fas'));
|
||||
```
|
||||
|
||||
Your `.fas` selector should have a `font-size` property set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>freeCodeCamp Picasso Painting</title>
|
||||
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="back-wall"></div>
|
||||
<div class="characters">
|
||||
<div id="offwhite-character">
|
||||
<div id="white-hat"></div>
|
||||
<div id="black-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="gray-instrument">
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
<div class="black-dot"></div>
|
||||
</div>
|
||||
<div id="tan-table"></div>
|
||||
</div>
|
||||
<div id="black-character">
|
||||
<div id="black-hat"></div>
|
||||
<div id="gray-mask">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="white-paper">
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
<i class="fas fa-music"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue" id="blue-left"></div>
|
||||
<div class="blue" id="blue-right"></div>
|
||||
<div id="orange-character">
|
||||
<div id="black-round-hat"></div>
|
||||
<div id="eyes-div">
|
||||
<div class="eyes left"></div>
|
||||
<div class="eyes right"></div>
|
||||
</div>
|
||||
<div id="triangles">
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div id="guitar">
|
||||
<div class="guitar" id="guitar-left">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div class="guitar" id="guitar-right">
|
||||
<i class="fas fa-bars"></i>
|
||||
</div>
|
||||
<div id="guitar-neck"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(184, 132, 46);
|
||||
}
|
||||
|
||||
#back-wall {
|
||||
background-color: #8B4513;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#offwhite-character {
|
||||
width: 300px;
|
||||
height: 550px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 17.5%;
|
||||
}
|
||||
|
||||
#white-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 120px 140px 180px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: GhostWhite;
|
||||
border-left-color: transparent;
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#black-mask {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#gray-instrument {
|
||||
width: 15%;
|
||||
height: 40%;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 125px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.black-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 65%;
|
||||
}
|
||||
|
||||
#tan-table {
|
||||
width: 450px;
|
||||
height: 140px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 275px;
|
||||
left: 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#black-character {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 59%;
|
||||
}
|
||||
|
||||
#black-hat {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 150px 0 0 300px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: rgb(45, 31, 19);
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#gray-mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: rgb(167, 162, 117);
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 70px;
|
||||
}
|
||||
|
||||
#white-paper {
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
background-color: GhostWhite;
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: -150px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fa-music {
|
||||
display: inline-block;
|
||||
margin-top: 8%;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #1E90FF;
|
||||
}
|
||||
|
||||
#blue-left {
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
#blue-right {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#orange-character {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
background-color: rgb(240, 78, 42);
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
#black-round-hat {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
background-color: rgb(45, 31, 19);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 5px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#eyes-div {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#triangles {
|
||||
width: 250px;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 42px 45px 45px 0;
|
||||
border-top-color: transparent;
|
||||
border-right-color: Gold; /* yellow */
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#guitar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 0px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.guitar {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
background-color: Goldenrod;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#guitar-left {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#guitar-right {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
.fa-bars {
|
||||
display: block;
|
||||
margin-top: 30%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#guitar-neck {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #D2691E;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 200px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.eyes {
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
background-color: #8B4513;
|
||||
border-radius: 20px 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -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-picasso-painting": "CSS Picasso Painting",
|
||||
"javascript-spreadsheet": "JavaScript Spreadsheet",
|
||||
"intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter",
|
||||
"d3-dashboard": "D3 Dashboard"
|
||||
|
||||
Reference in New Issue
Block a user