feat(curriculum): add tests to css variables skyline (#42067)
* add(tests): parts 1-2 * refactor for multi-file editor, and add temp css tests * re-re-rebasing * add link to subsequent challenges * add test strings to 007-015 * add final tests 001-016 * fix 005-007, add 017-022 tests and test strings * add: tests 021-030, and formatting * add: 031-034 tests * tests: add 035-046 * fix: test in 021 * tests: add 047-050 * format: 009, 051-118 remove css whitespace * tests: add 051-078 * tests: add 079-105 * tests: add 104-118 * fix: empty -> isEmpty, and include -> match * fix: correct editable region * fix: formatting and spelling * fix: test logic, and add TODO for whitespace * fix: add final part solution 🤦♂️ * fix typo in part-006 * remove whitespace in prep * getStyleDeclaration -> getStyle * remove editable region from solution 🤦♂️ * fix: correct tests to fail on initial * fix: add missing regex Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * fix: correct tests * remove commas and stuff 🤷♂️ Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * uppercaserise doctype Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add "the" Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * remove half-colon Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * use more boring form of the word "shoudl" Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add suggestions to tests * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md * Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md * fix: the few commits I couldn't add on github * fix: lesson 41 Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -7,14 +7,32 @@ dashedName: part-1
|
||||
|
||||
# --description--
|
||||
|
||||
Welcome to the CSS Variables skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading.
|
||||
Welcome to the CSS Variables Skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
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));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -22,10 +40,8 @@ assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
```
|
||||
--fcc-editable-region--
|
||||
|
||||
# --solutions--
|
||||
--fcc-editable-region--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
@ -7,14 +7,38 @@ dashedName: part-2
|
||||
|
||||
# --description--
|
||||
|
||||
Add opening and closing `html` tags below the doctype so you have a place to start putting some code.
|
||||
Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>\s*<html\s*>\s*<\/html\s*>/gi));
|
||||
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*>/));
|
||||
```
|
||||
|
||||
Your `html` tags should be in the correct order.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>\s*<\/html\s*>/));
|
||||
```
|
||||
|
||||
You should only have one `html` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('html').length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -23,13 +47,8 @@ assert(code.match(/<!DOCTYPE\s+html\s*>\s*<html\s*>\s*<\/html\s*>/gi));
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@ -7,18 +7,50 @@ dashedName: part-3
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add opening and closing `head` and `body` tags within the html element.
|
||||
Next, add opening and closing `head` and `body` tags within the `html` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<html\s*>\s*<head\s*>\s*<\/head\s*>\s*<body\s*>\s*<\/body\s*>\s*<\/html\s*>/gi
|
||||
)
|
||||
);
|
||||
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--
|
||||
@ -27,21 +59,11 @@ assert(
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,18 +7,80 @@ dashedName: part-4
|
||||
|
||||
# --description--
|
||||
|
||||
Nest opening and closing `title` and `style` tags in the head area and give your project a title of `freeCodeCamp Skyline Project`. Any styles you are asked to add during this project should go in this style area.
|
||||
Add a `title` element to the `head`, and give your project a title of `freeCodeCamp Skyline Project`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<head\s*>\s*(<style\s*>\s*<\/style\s*>\s*<title\s*>freeCodeCamp Skyline Project<\/title\s*>|<title\s*>freeCodeCamp Skyline Project<\/title\s*>\s*<style\s*>\s*<\/style>)\s*<\/head\s*>/g
|
||||
)
|
||||
);
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
The `title` element should be within the `head` element.
|
||||
|
||||
```js
|
||||
const head = document.querySelector('head');
|
||||
// TODO: head does not contain title...body contains title
|
||||
```
|
||||
|
||||
Your project should have a title of `freeCodeCamp Skyline Project`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text.toLowerCase(), 'freecodecamp skyline project')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matters for the title.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text, 'freeCodeCamp Skyline Project');
|
||||
```
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
You should not change your existing `head` tags. Make sure you did not delete the closing tag.
|
||||
|
||||
```js
|
||||
const heads = document.querySelectorAll('head');
|
||||
assert.equal(heads?.length, 1);
|
||||
```
|
||||
|
||||
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--
|
||||
@ -28,25 +90,11 @@ assert(
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style></style>
|
||||
</head>
|
||||
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -7,18 +7,27 @@ dashedName: part-5
|
||||
|
||||
# --description--
|
||||
|
||||
In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector in your style area and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later.
|
||||
In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should use the `*` selector.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<style\s*>\s*\*\s*{\s*border\s*:\s*1px\s+solid\s+black\s*;?\s*}\s*<\/style\s*>/g
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
|
||||
```
|
||||
|
||||
You should use the `border` property to style all the elements.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
|
||||
```
|
||||
|
||||
All elements should have a `1px solid black` border.
|
||||
|
||||
```js
|
||||
const astStyles = new __helpers.CSSHelp(document).getStyle('*');
|
||||
assert.equal(astStyles?.border, '1px solid black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -30,7 +39,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style></style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -38,21 +47,9 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,14 +7,28 @@ dashedName: part-6
|
||||
|
||||
# --description--
|
||||
|
||||
Also add a `box-sizing` of `border-box` to the everything. This will make it so the border you added doesn't add any size to your elements.
|
||||
Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should use the `box-sizing` property.
|
||||
|
||||
```js
|
||||
assert($('#display-body').css('box-sizing') === 'border-box');
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
|
||||
```
|
||||
|
||||
You should make use of the existing `*` selector.
|
||||
|
||||
```js
|
||||
// Two selectors create two CSSStyleRule objects
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
|
||||
```
|
||||
|
||||
All elements should have a `box-sizing` of `border-box`.
|
||||
|
||||
```js
|
||||
const astStyles = new __helpers.CSSHelp(document).getStyle('*');
|
||||
assert.equal(astStyles.boxSizing, 'border-box');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,11 +40,7 @@ assert($('#display-body').css('box-sizing') === 'border-box');
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -38,22 +48,13 @@ assert($('#display-body').css('box-sizing') === 'border-box');
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,34 @@ dashedName: part-7
|
||||
|
||||
# --description--
|
||||
|
||||
You can see the body, it's the horizontal line on your page; the box around it is the html element. Make your body fill the whole viewport by giving it a `height` of `100vh`. Remove the default margin from the body by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
|
||||
You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should use the `body` selector.
|
||||
|
||||
```js
|
||||
const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/height\s*:\s*100vh\s*(;|})/g.test(body) &&
|
||||
/margin\s*:\s*(0|0px)\s*(;|})/g.test(body) &&
|
||||
/overflow\s*:\s*hidden\s*(;|})/g.test(body)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Your `body` should have a `height` of `100vh`.
|
||||
|
||||
```js
|
||||
const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert.equal(bodyStyles?.height, '100vh');
|
||||
```
|
||||
|
||||
Your `body` should have a `margin` of `0`.
|
||||
|
||||
```js
|
||||
// TODO: Editor adds margin as preferential style - 8px is always added.
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
|
||||
```
|
||||
|
||||
Your `body` should have the `overflow` property set to `hidden`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,12 +46,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -44,28 +54,16 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,14 +7,26 @@ dashedName: part-8
|
||||
|
||||
# --description--
|
||||
|
||||
It's tough to see now, but there's a border at the edge of your preview, that's the body. Create a `div` element in the body with a class of `background-buildings`. This will be a container for a group of buildings.
|
||||
It's tough to see now, but there's a border at the edge of your preview, that's the `body`. Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a `div` element.
|
||||
|
||||
```js
|
||||
assert($('#display-body')[0].contains($('div.background-buildings')[0]));
|
||||
assert.exists(document.querySelector('div'));
|
||||
```
|
||||
|
||||
Your `div` element should be within the `body`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
Your `div` element should have a class of `background-buildings`
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,48 +38,27 @@ assert($('#display-body')[0].contains($('div.background-buildings')[0]));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,17 +7,26 @@ dashedName: part-9
|
||||
|
||||
# --description--
|
||||
|
||||
Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the body.
|
||||
Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should use the `background-buildings` class to select the correct element.
|
||||
|
||||
```js
|
||||
const bb = code.match(/\.background-buildings\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*100%\s*(;|})/g.test(bb) && /height\s*:\s*100%\s*(;|})/g.test(bb)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
|
||||
```
|
||||
|
||||
Your `.background-buildings` element should have a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
|
||||
```
|
||||
|
||||
Your `.background-buildings` element should have a `height` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -29,18 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -49,34 +47,21 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings"></div>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -11,15 +11,34 @@ Nest a `div` with a class of `bb1` in the background buildings container. Give i
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new `div` element.
|
||||
|
||||
```js
|
||||
const bb1 = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
$('.background-buildings')[0].contains($('div.bb1')[0]) &&
|
||||
/width\s*:\s*10%\s*(;|})/g.test(bb1) &&
|
||||
/height\s*:\s*70%\s*(;|})/g.test(bb1)
|
||||
);
|
||||
assert.equal(document.querySelectorAll('div').length, 2);
|
||||
```
|
||||
|
||||
You should give the new `div` a class of `bb1`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1'));
|
||||
```
|
||||
|
||||
You should use a `.bb1` class selector to style the element.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
|
||||
```
|
||||
|
||||
You should give the `.bb1` element a `width` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
|
||||
```
|
||||
|
||||
You should give the `.bb1` element a `height` of `70%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,66 +50,33 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="background-buildings"></div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,53 @@ dashedName: part-11
|
||||
|
||||
# --description--
|
||||
|
||||
Nest four `div` elements in the `bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
|
||||
Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create four new `div` elements.
|
||||
|
||||
```js
|
||||
const bb1 = $('.bb1')[0];
|
||||
assert(
|
||||
bb1.contains($('div.bb1a')[0]) &&
|
||||
bb1.contains($('div.bb1b')[0]) &&
|
||||
bb1.contains($('div.bb1c')[0]) &&
|
||||
bb1.contains($('div.bb1d')[0])
|
||||
);
|
||||
assert.equal(document.querySelectorAll('div')?.length, 6);
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements a class of `bb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1a'));
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements a class of `bb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1b'));
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements a class of `bb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1c'));
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements a class of `bb1d`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1d'));
|
||||
```
|
||||
|
||||
You should place the new `div` elements in the correct order.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
|
||||
}
|
||||
assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
|
||||
```
|
||||
|
||||
You should place the new `div` elements within the `.bb1` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,78 +65,40 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
--fcc-editable-region--
|
||||
<div class="bb1"></div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,27 +7,80 @@ dashedName: part-12
|
||||
|
||||
# --description--
|
||||
|
||||
Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `bb1a`, `80%` and `10%` to `bb1b`, `90%` and `10%` to `bb1c`, and `100%` and `70%` to `bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% to fill the container vertically.
|
||||
Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should use a class selector to style `.bb1a`.
|
||||
|
||||
```js
|
||||
const bb1a = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb1b = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb1c = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*70%\s*(;|})/g.test(bb1a) &&
|
||||
/height\s*:\s*10%\s*(;|})/g.test(bb1a) &&
|
||||
/width\s*:\s*80%\s*(;|})/g.test(bb1b) &&
|
||||
/height\s*:\s*10%\s*(;|})/g.test(bb1b) &&
|
||||
/width\s*:\s*90%\s*(;|})/g.test(bb1c) &&
|
||||
/height\s*:\s*10%\s*(;|})/g.test(bb1c) &&
|
||||
/width\s*:\s*100%\s*(;|})/g.test(bb1d) &&
|
||||
/height\s*:\s*70%\s*(;|})/g.test(bb1d)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
|
||||
```
|
||||
|
||||
You should give `.bb1a` a `width` of `70%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
|
||||
```
|
||||
|
||||
You should give `.bb1a` a `height` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
|
||||
```
|
||||
|
||||
You should use a class selector to style `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
|
||||
```
|
||||
|
||||
You should give `.bb1b` a `width` of `80%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
|
||||
```
|
||||
|
||||
You should give `.bb1b` a `height` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
|
||||
```
|
||||
|
||||
You should use a class selector to style `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
|
||||
```
|
||||
|
||||
You should give `.bb1c` a `width` of `90%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
|
||||
```
|
||||
|
||||
You should give `.bb1c` a `height` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
|
||||
```
|
||||
|
||||
You should use a class selector to style `.bb1d`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
|
||||
```
|
||||
|
||||
You should give `.bb1d` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give `.bb1d` a `height` of `70%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,28 +92,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -76,66 +108,30 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,37 @@ dashedName: part-13
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project.
|
||||
Give your `.bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should not change the `.bb1` `width` or `height` properties.
|
||||
|
||||
```js
|
||||
const bb1 = $('.bb1');
|
||||
assert(
|
||||
bb1.css('display') === 'flex' &&
|
||||
bb1.css('flex-direction') === 'column' &&
|
||||
bb1.css('align-items') === 'center'
|
||||
);
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.width, '10%');
|
||||
assert.equal(bb1Style?.height, '70%');
|
||||
```
|
||||
|
||||
You should give the `.bb1` element a `display` of `flex`.
|
||||
|
||||
```js
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.display, 'flex');
|
||||
```
|
||||
|
||||
You should give the `.bb1` element a `flex-direction` of `column`.
|
||||
|
||||
```js
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.flexDirection, 'column');
|
||||
```
|
||||
|
||||
You should give the `.bb1` element a `align-items` of `center`.
|
||||
|
||||
```js
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.alignItems, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,48 +49,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -88,69 +65,47 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,15 +7,26 @@ dashedName: part-14
|
||||
|
||||
# --description--
|
||||
|
||||
Now you have something that is starting to resemble a building. Lets get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
|
||||
Now you have something that is starting to resemble a building. Let's get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new variable named `--building-color1`.
|
||||
|
||||
```js
|
||||
const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style));
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
|
||||
```
|
||||
|
||||
You should define the `--building-color1` variable within `.bb1`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
|
||||
```
|
||||
|
||||
You should give `--building-color1` a value of `#999`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,51 +38,7 @@ assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -87,70 +54,49 @@ assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #999;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,19 +7,20 @@ dashedName: part-15
|
||||
|
||||
# --description--
|
||||
|
||||
To use a variable, just put the variable name in parenthesis with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property.
|
||||
To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `.bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
The `background-color` of the `bb1a` element should be set.
|
||||
|
||||
```js
|
||||
const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(
|
||||
bb1aStyle
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
|
||||
```
|
||||
|
||||
You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,52 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #999;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -92,71 +48,50 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #999;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,27 +7,44 @@ dashedName: part-16
|
||||
|
||||
# --description--
|
||||
|
||||
It's that simple. Use the same variable as the `background-color` of the `bb1b`, `bb1c`, and `bb1d` classes to fill in the rest of the building.
|
||||
Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
The `background-color` of the `bb1b` element should be set.
|
||||
|
||||
```js
|
||||
const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(
|
||||
bb1bStyle
|
||||
) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(
|
||||
bb1cStyle
|
||||
) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test(
|
||||
bb1dStyle
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
|
||||
```
|
||||
|
||||
You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
The `background-color` of the `bb1c` element should be set.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
|
||||
```
|
||||
|
||||
You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
The `background-color` of the `bb1d` element should be set.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
|
||||
```
|
||||
|
||||
You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,53 +56,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #999;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -101,74 +72,52 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -11,11 +11,10 @@ I don't really like that color. Change the value of your variable from `#999` to
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.
|
||||
|
||||
```js
|
||||
const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style));
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,139 +26,73 @@ assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--fcc-editable-region--
|
||||
--building-color1: #999;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -11,15 +11,43 @@ Your first building looks pretty good now. Let's make some more! Nest three new
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a `div` with a class of `bb2`.
|
||||
|
||||
```js
|
||||
const bb = $('.background-buildings');
|
||||
assert(
|
||||
bb.children('.bb2').length === 1 &&
|
||||
bb.children('.bb3').length === 1 &&
|
||||
bb.children('.bb4').length === 1
|
||||
);
|
||||
assert.exists(document.querySelector('div.bb2'));
|
||||
```
|
||||
|
||||
You should create a `div` with a class of `bb3`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb3'));
|
||||
```
|
||||
|
||||
You should create a `div` with a class of `bb4`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb4'));
|
||||
```
|
||||
|
||||
You should create 3 new `div` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 9);
|
||||
```
|
||||
|
||||
You should place these `div` elements within the `.background-buildings` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
|
||||
```
|
||||
|
||||
You should place the elements in the correct order.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
|
||||
}
|
||||
assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,56 +59,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -91,82 +70,63 @@ assert(
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div class="bb4"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,24 +7,44 @@ dashedName: part-19
|
||||
|
||||
# --description--
|
||||
|
||||
Give the new buildings `width` and `height` properties of: `10%` and `50%` for `bb2`, `10%` and `55%` for `bb3`, and `11%` and `58%` for `bb4`. You will be using almost all percent based units and some Flexbox for this project, so everything will be completely responsive.
|
||||
Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.bb2` a `width` of `10%`.
|
||||
|
||||
```js
|
||||
const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb4 = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*10%\s*(;|})/g.test(bb2) &&
|
||||
/height\s*:\s*50%\s*(;|})/g.test(bb2) &&
|
||||
/width\s*:\s*10%\s*(;|})/g.test(bb3) &&
|
||||
/height\s*:\s*55%\s*(;|})/g.test(bb3) &&
|
||||
/width\s*:\s*11%\s*(;|})/g.test(bb4) &&
|
||||
/height\s*:\s*58%\s*(;|})/g.test(bb4)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
|
||||
```
|
||||
|
||||
You should give `.bb2` a `height` of `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
|
||||
```
|
||||
|
||||
You should give `.bb3` a `width` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
|
||||
```
|
||||
|
||||
You should give `.bb3` a `height` of `55%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
|
||||
```
|
||||
|
||||
You should give `.bb4` a `width` of `11%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
|
||||
```
|
||||
|
||||
You should give `.bb4` a `height` of `58%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -36,56 +56,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -104,92 +75,58 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div class="bb4"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,19 +7,26 @@ dashedName: part-20
|
||||
|
||||
# --description--
|
||||
|
||||
The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use Flexbox again to evenly space the buildings across the bottom of the element.
|
||||
The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use flexbox again to evenly space the buildings across the bottom of the element.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add a `display` of `flex` to the `background-buildings` class.
|
||||
|
||||
```js
|
||||
const bb = $('.background-buildings');
|
||||
assert(
|
||||
bb.css('display') === 'flex' &&
|
||||
bb.css('align-items') === 'flex-end' &&
|
||||
bb.css('justify-content') === 'space-evenly'
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
|
||||
```
|
||||
|
||||
You should add an `align-items` of `flex-end` to the `background-buildings` class.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
|
||||
```
|
||||
|
||||
You should add a `justify-content` of `space-evenly` to the `background-buildings` class.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,71 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -114,95 +57,70 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div class="bb4"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,36 @@ dashedName: part-21
|
||||
|
||||
# --description--
|
||||
|
||||
I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `bb3` and `bb4`. These will be added as things that are spaced evenly across the container, effectively moving the buildings closer to the center.
|
||||
I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add two new `div` elements before the `.bb1` element.
|
||||
|
||||
```js
|
||||
const bb = $('.background-buildings').children('div');
|
||||
assert(
|
||||
bb.length === 9 &&
|
||||
bb[2] === $('div.bb1')[0] &&
|
||||
bb[3] === $('div.bb2')[0] &&
|
||||
bb[4] === $('div.bb3')[0] &&
|
||||
bb[6] === $('div.bb4')[0]
|
||||
);
|
||||
const bBuildings = document.querySelector('.background-buildings')?.children;
|
||||
assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
|
||||
assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
|
||||
```
|
||||
|
||||
You should add one new `div` element between the `.bb3` and `.bb4` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
|
||||
```
|
||||
|
||||
You should add two new `div` elements after the `.bb4` element.
|
||||
|
||||
```js
|
||||
const bb4 = document.querySelector('.bb4');
|
||||
assert.exists(bb4?.nextElementSibling);
|
||||
assert.exists(bb4?.nextElementSibling?.nextElementSibling);
|
||||
```
|
||||
|
||||
You should add 5 new `div` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 14);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,77 +48,11 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
@ -115,104 +64,78 @@ assert(
|
||||
<div class="bb3"></div>
|
||||
<div class="bb4"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,32 @@ dashedName: part-22
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new variable by the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `bb2`.
|
||||
Create a new variable by the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should define a new property variable called `--building-color2`.
|
||||
|
||||
```js
|
||||
const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(bb1style) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color2\s*\)\s*(;|\s*})/g.test(
|
||||
bb2style
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
|
||||
```
|
||||
|
||||
You should give `--building-color2` a value of `#66cc99`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
|
||||
```
|
||||
|
||||
You should set the `background-color` of `.bb2`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should set the `background-color` using the `--building-color2` variable.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,74 +44,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -124,102 +68,72 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,19 +7,14 @@ dashedName: part-23
|
||||
|
||||
# --description--
|
||||
|
||||
Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `bb2`.
|
||||
Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add a fallback value of `green` to the `background-color` property.
|
||||
|
||||
```js
|
||||
const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background-color\s*:\s*var\(\s*--building-color2\s*,\s*green\s*\)\s*(;|\s*})/g.test(
|
||||
bb2style
|
||||
)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,27 +26,51 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
@ -59,167 +78,46 @@ assert(
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2, green);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,21 +7,32 @@ dashedName: part-24
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new variable by the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `bb3` class and give it a fallback value of `pink`.
|
||||
Create a new variable by the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should define a new property variable called `--building-color3`.
|
||||
|
||||
```js
|
||||
const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb3style = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(bb1style) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color3\s*,\s*pink\s*\)\s*(;|\s*})/g.test(
|
||||
bb3style
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
|
||||
```
|
||||
|
||||
You should give `--building-color3` a value of `#66cc99`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
|
||||
```
|
||||
|
||||
You should set the `background-color` of `.bb3`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,76 +44,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2, green);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -126,34 +68,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
@ -161,69 +96,46 @@ assert(
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2, green);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3, pink);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,23 +7,40 @@ dashedName: part-25
|
||||
|
||||
# --description--
|
||||
|
||||
That one used the fallback value as well? I see the problem now! The variables you declared in `bb1` do not cascade to the `bb2` and `bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet and move all your variable declarations there.
|
||||
That one used the fallback value as well? I see the problem now! The variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should declare a `:root` selector at the top of the stylesheet.
|
||||
|
||||
```js
|
||||
const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(rootStyle) &&
|
||||
/--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(rootStyle) &&
|
||||
/--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(rootStyle) &&
|
||||
!/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style) &&
|
||||
!/--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(bb1style) &&
|
||||
!/--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(bb1style)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
|
||||
```
|
||||
|
||||
You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
|
||||
```
|
||||
|
||||
You should define `--building-color2` with a value of `#66cc99` in the `:root` selector.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
|
||||
```
|
||||
|
||||
You should define `--building-color3` with a value of `#cc6699` in the `:root` selector.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
|
||||
```
|
||||
|
||||
You should remove the custom property variables from `.bb1`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -35,78 +52,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2, green);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3, pink);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -130,107 +76,79 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2, green);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3, pink);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,19 +11,16 @@ Now that you've worked the bugs out and the buildings are the right colors, you
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the fallback in the `background-color` from `.bb2`.
|
||||
|
||||
```js
|
||||
const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb3style = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background-color\s*:\s*var\(\s*--building-color2\s*\)\s*(;|\s*})/g.test(
|
||||
bb2style
|
||||
) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color3\s*\)\s*(;|\s*})/g.test(
|
||||
bb3style
|
||||
)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)');
|
||||
```
|
||||
|
||||
You should remove the fallback in the `background-color` from `.bb3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -35,205 +32,103 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2, green);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3, pink);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,21 +7,20 @@ dashedName: part-27
|
||||
|
||||
# --description--
|
||||
|
||||
Create another variable named `--building-color4` and give it a value of `#538cc6`, make sure it's in the `:root` selector this time. Then use it to fill in the last building.
|
||||
Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should define a new property variable called `--building-color4`.
|
||||
|
||||
```js
|
||||
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb4style = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/--building-color4\s*:\s*#538cc6\s*(;|\s*})/g.test(rootStyle) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color4\s*\)\s*(;|\s*})/g.test(
|
||||
bb4style
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
|
||||
```
|
||||
|
||||
You should give `--building-color4` a value of `#538cc6` in the `:root` selector.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,81 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -131,109 +56,82 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,13 +11,22 @@ The background buildings are starting to look pretty good. Create a new `div` be
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new `div` element.
|
||||
|
||||
```js
|
||||
const bodyDivs = $('#display-body').children('div');
|
||||
assert(
|
||||
bodyDivs.length === 2 && bodyDivs[1] === $('div.foreground-buildings')[0]
|
||||
);
|
||||
assert.equal(document.querySelectorAll('div')?.length, 15);
|
||||
```
|
||||
|
||||
The new `div` should come after the `div.background-buildings` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.background-buildings + div'));
|
||||
```
|
||||
|
||||
Your new `div` should have a class of `foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.foreground-buildings'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -29,83 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -125,115 +58,89 @@ assert(
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,16 +11,34 @@ You want the foreground buildings container to sit directly on top of the backgr
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should use a `.foreground-buildings` selector.
|
||||
|
||||
```js
|
||||
const fb = code.match(/\.foreground-buildings\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
$('.foreground-buildings').css('position') === 'absolute' &&
|
||||
$('.foreground-buildings').css('top') === '0px' &&
|
||||
/width\s*:\s*100%\s*(;|})/g.test(fb) &&
|
||||
/height\s*:\s*100%\s*(;|})/g.test(fb)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
|
||||
```
|
||||
|
||||
You should give the `.foreground-buildings` element a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give the `.foreground-buildings` element a `height` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
|
||||
```
|
||||
|
||||
You should give the `.foreground-buildings` element a `position` of `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
|
||||
```
|
||||
|
||||
You should give the `.foreground-buildings` element a `top` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,83 +50,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -134,118 +76,85 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,23 +7,64 @@ dashedName: part-30
|
||||
|
||||
# --description--
|
||||
|
||||
Nest six `div` elements within `foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
|
||||
Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new `div` with a class of `fb1`.
|
||||
|
||||
```js
|
||||
const fb = $('.foreground-buildings').children('div');
|
||||
assert(
|
||||
fb.length === 6 &&
|
||||
fb[0] === $('div.fb1')[0] &&
|
||||
fb[1] === $('div.fb2')[0] &&
|
||||
fb[2] === $('div.fb3')[0] &&
|
||||
fb[3] === $('div.fb4')[0] &&
|
||||
fb[4] === $('div.fb5')[0] &&
|
||||
fb[5] === $('div.fb6')[0]
|
||||
);
|
||||
assert.exists(document.querySelector('div.fb1'));
|
||||
```
|
||||
|
||||
You should create a new `div` with a class of `fb2`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb2'));
|
||||
```
|
||||
|
||||
You should create a new `div` with a class of `fb3`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb3'));
|
||||
```
|
||||
|
||||
You should create a new `div` with a class of `fb4`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb4'));
|
||||
```
|
||||
|
||||
You should create a new `div` with a class of `fb5`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb5'));
|
||||
```
|
||||
|
||||
You should create a new `div` with a class of `fb6`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb6'));
|
||||
```
|
||||
|
||||
You should place these new `div` elements within the `.foreground-buildings` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
|
||||
```
|
||||
|
||||
You should place the new `div` elements in the correct order.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
|
||||
}
|
||||
assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -35,90 +76,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -138,131 +96,96 @@ assert(
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
<div class="foreground-buildings"></div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,33 +7,116 @@ dashedName: part-31
|
||||
|
||||
# --description--
|
||||
|
||||
Give the six new elements these `width` and `height` values: `10%` and `60%` to `fb1`, `10%` and `40%` to `fb2`, `10%` and `35%` to `fb3`, `8%` and `45%` to `fb4`, `10%` and `33%` to `fb5`, and `9%` and `38%` to `fb6`.
|
||||
Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a `.fb1` selector.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.fb1\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*60%\s*(;|})|height\s*:\s*60%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(
|
||||
code
|
||||
) &&
|
||||
/\.fb2\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*40%\s*(;|})|height\s*:\s*40%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(
|
||||
code
|
||||
) &&
|
||||
/\.fb3\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*35%\s*(;|})|height\s*:\s*35%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(
|
||||
code
|
||||
) &&
|
||||
/\.fb4\s*{\s*(width\s*:\s*8%\s*;\s*height\s*:\s*45%\s*(;|})|height\s*:\s*45%\s*;\s*width\s*:\s*8%\s*(;|}))/g.test(
|
||||
code
|
||||
) &&
|
||||
/\.fb5\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*33%\s*(;|})|height\s*:\s*33%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test(
|
||||
code
|
||||
) &&
|
||||
/\.fb6\s*{\s*(width\s*:\s*9%\s*;\s*height\s*:\s*38%\s*(;|})|height\s*:\s*38%\s*;\s*width\s*:\s*9%\s*(;|}))/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
|
||||
```
|
||||
|
||||
You should give the `.fb1` selector a `width` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
|
||||
```
|
||||
|
||||
You should give the `.fb1` selector a `height` of `60%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
|
||||
```
|
||||
|
||||
You should create a `.fb2` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
|
||||
```
|
||||
|
||||
You should give the `.fb2` selector a `width` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
|
||||
```
|
||||
|
||||
You should give the `.fb2` selector a `height` of `40%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
|
||||
```
|
||||
|
||||
You should create a `.fb3` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
|
||||
```
|
||||
|
||||
You should give the `.fb3` selector a `width` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
|
||||
```
|
||||
|
||||
You should give the `.fb3` selector a `height` of `35%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
|
||||
```
|
||||
|
||||
You should create a `.fb4` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
|
||||
```
|
||||
|
||||
You should give the `.fb4` selector a `width` of `8%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
|
||||
```
|
||||
|
||||
You should give the `.fb4` selector a `height` of `45%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
|
||||
```
|
||||
|
||||
You should create a `.fb5` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
|
||||
```
|
||||
|
||||
You should give the `.fb5` selector a `width` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
|
||||
```
|
||||
|
||||
You should give the `.fb5` selector a `height` of `33%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
|
||||
```
|
||||
|
||||
You should create a `.fb6` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
|
||||
```
|
||||
|
||||
You should give the `.fb6` selector a `width` of `9%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
|
||||
```
|
||||
|
||||
You should give the `.fb6` selector a `height` of `38%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -45,90 +128,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -161,155 +161,92 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,15 +11,22 @@ Add the same `display`, `align-items`, and `justify-content` properties and valu
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.foreground-buildings` a `display` property of `flex`.
|
||||
|
||||
```js
|
||||
const fb = $('.foreground-buildings');
|
||||
assert(
|
||||
fb.css('display') === 'flex' &&
|
||||
fb.css('align-items') === 'flex-end' &&
|
||||
fb.css('justify-content') === 'space-evenly'
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
|
||||
```
|
||||
|
||||
You should give `.foreground-buildings` an `align-items` property of `flex-end`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
|
||||
```
|
||||
|
||||
You should give `.foreground-buildings` a `justify-content` property of `space-evenly`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,120 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -177,158 +71,119 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,56 @@ dashedName: part-33
|
||||
|
||||
# --description--
|
||||
|
||||
I see some code that can be optimized. Move the `position` and `top` properties and values from `foreground-buildings` to `background-buildings`. Then select both `background-buildings` and `foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
|
||||
I see some code that can be optimized. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should not remove the `.foreground-buildings` declaration.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.background-buildings').css('position') === 'absolute' &&
|
||||
$('.background-buildings').css('top') === '0px' &&
|
||||
/(\.background-buildings\s*,\s*\.foreground-buildings|\.foreground-buildings\s*,\s*\.background-buildings)/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
|
||||
```
|
||||
|
||||
You should remove the `position` property from `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
|
||||
```
|
||||
|
||||
You should remove the `top` property from `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
|
||||
```
|
||||
|
||||
You should add the `position` property of `absolute` to `.background-buildings, foreground-buildings`.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.equal(eitherOr()?.position, 'absolute');
|
||||
```
|
||||
|
||||
You should add the `top` property of `0` to `.background-buildings, foreground-buildings`.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.equal(eitherOr()?.top, '0px');
|
||||
```
|
||||
|
||||
You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.exists(eitherOr());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,123 +68,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -181,158 +101,122 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,14 +7,14 @@ dashedName: part-34
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you did that, you can delete the old `foreground-buildings` class and all of its properties since they aren't needed anymore.
|
||||
Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should delete the whole `.foreground-buildings` style declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.foreground-buildings/g).length === 1);
|
||||
assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,123 +26,7 @@ assert(code.match(/\.foreground-buildings/g).length === 1);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -175,33 +59,26 @@ assert(code.match(/\.foreground-buildings/g).length === 1);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -209,116 +86,95 @@ assert(code.match(/\.foreground-buildings/g).length === 1);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,44 @@ dashedName: part-35
|
||||
|
||||
# --description--
|
||||
|
||||
The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `fb3` and `fb4`, `--building-color2` for `fb5`, `--building-color3` for `fb2` and `fb6`, and `--building-color4` for `fb1`.
|
||||
The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb1` a `background-color` using `--building-color4`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.fb1').css('background-color') === 'rgb(83, 140, 198)' &&
|
||||
$('.fb2').css('background-color') === 'rgb(204, 102, 153)' &&
|
||||
$('.fb3').css('background-color') === 'rgb(170, 128, 255)' &&
|
||||
$('.fb4').css('background-color') === 'rgb(170, 128, 255)' &&
|
||||
$('.fb5').css('background-color') === 'rgb(102, 204, 153)' &&
|
||||
$('.fb6').css('background-color') === 'rgb(204, 102, 153)'
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)');
|
||||
```
|
||||
|
||||
You should give `.fb2` a `background-color` using `--building-color3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)');
|
||||
```
|
||||
|
||||
You should give `.fb3` a `background-color` using `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)');
|
||||
```
|
||||
|
||||
You should give `.fb4` a `background-color` using `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)');
|
||||
```
|
||||
|
||||
You should give `.fb5` a `background-color` using `--building-color2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)');
|
||||
```
|
||||
|
||||
You should give `.fb6` a `background-color` using `--building-color3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,115 +56,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -174,33 +89,26 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -208,122 +116,87 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,23 +7,37 @@ dashedName: part-36
|
||||
|
||||
# --description--
|
||||
|
||||
Squeeze the buildings together again by adding two empty `div` elements at both the top and bottom of the `foreground-buildings` element, and one more in between `fb2` and `fb3`.
|
||||
Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add two `div` elements as the first children of `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
const fb = $('.foreground-buildings').children('div');
|
||||
assert(
|
||||
fb.length === 11 &&
|
||||
fb[2] === $('div.fb1')[0] &&
|
||||
fb[3] === $('div.fb2')[0] &&
|
||||
fb[5] === $('div.fb3')[0] &&
|
||||
fb[6] === $('div.fb4')[0] &&
|
||||
fb[7] === $('div.fb5')[0] &&
|
||||
fb[8] === $('div.fb6')[0]
|
||||
);
|
||||
const bBuildings = document.querySelector('.background-buildings')?.children;
|
||||
assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
|
||||
assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
|
||||
```
|
||||
|
||||
You should add one `div` element between `.fb2` and `.fb3`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
|
||||
```
|
||||
|
||||
|
||||
You should add two `div` elements as the last children of `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
const fb6 = document.querySelector('.fb6');
|
||||
assert.exists(fb6?.nextElementSibling);
|
||||
assert.exists(fb6?.nextElementSibling?.nextElementSibling);
|
||||
```
|
||||
|
||||
You should have added 5 new `div` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 26);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -35,121 +49,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -169,7 +69,7 @@ assert(
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
@ -178,37 +78,31 @@ assert(
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -216,127 +110,93 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,32 @@ dashedName: part-37
|
||||
|
||||
# --description--
|
||||
|
||||
Move the position of `fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
|
||||
Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb4` a `position` of `relative`.
|
||||
|
||||
```js
|
||||
const fb4style = code.match(/\.fb4\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb5style = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
$('.fb4').css('position') === 'relative' &&
|
||||
$('.fb5').css('position') === 'relative' &&
|
||||
/left\s*:\s*10%\s*(;|})/g.test(fb4style) &&
|
||||
/right\s*:\s*10%\s*(;|})/g.test(fb5style)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
|
||||
```
|
||||
|
||||
You should give `.fb4` a `left` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
|
||||
```
|
||||
|
||||
You should give `.fb5` a `position` of `relative`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
|
||||
```
|
||||
|
||||
You should give `.fb5` a `right` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,121 +44,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -185,33 +82,26 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -219,131 +109,93 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,20 @@ dashedName: part-38
|
||||
|
||||
# --description--
|
||||
|
||||
Your code is starting to get quite long. Add a comment above the `fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
|
||||
Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//g.test(
|
||||
code
|
||||
) &&
|
||||
/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
|
||||
```
|
||||
|
||||
You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.
|
||||
|
||||
```js
|
||||
assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,125 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -189,33 +70,26 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -223,133 +97,99 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,11 +11,16 @@ Create a new variable in `:root` called `--window-color1` and give it a value of
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new variable in `:root` called `--window-color1`.
|
||||
|
||||
```js
|
||||
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle));
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
|
||||
```
|
||||
|
||||
You should give the property variable `--window-color1` a value of `black`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,127 +32,7 @@ assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -185,34 +70,27 @@ assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -220,133 +98,99 @@ assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -16,19 +16,32 @@ gradient-type(
|
||||
);
|
||||
```
|
||||
|
||||
In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second.
|
||||
In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should apply a `background` to `.bb1a`.
|
||||
|
||||
```js
|
||||
const bb1a = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(
|
||||
bb1a
|
||||
)
|
||||
);
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
```
|
||||
|
||||
You should give the `background` a `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
You should give the `background` a `linear-gradient` starting from `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
|
||||
```
|
||||
|
||||
You should give the `background` a `linear-gradient` ending at `--window-color1`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -40,128 +53,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -199,34 +91,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -234,137 +119,99 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,40 @@ dashedName: part-41
|
||||
|
||||
# --description--
|
||||
|
||||
You want to add the same gradient to the next two sections. But instead of doing that, create a new class called `bb1-window` and move the `height` and `background` properties and values from `bb1a` to the new class.
|
||||
You want to add the same gradient to the next two sections. Instead of doing that, create a new class called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new class declaration called `bb1-window`.
|
||||
|
||||
```js
|
||||
const bb1wStyle = code.match(/\.bb1-window\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/height\s*:\s*10%\s*(;|})/g.test(bb1wStyle) &&
|
||||
/background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(
|
||||
bb1wStyle
|
||||
)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
|
||||
```
|
||||
|
||||
You should move the `height` property and value from `.bb1a` to `.bb1-window`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
|
||||
```
|
||||
|
||||
You should move the `background` property and value from `.bb1a` to `.bb1-window`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
```
|
||||
|
||||
You should not move the `background-color` property from `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should not move the `width` property from `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,132 +52,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -195,34 +90,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -230,140 +118,105 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,18 +7,51 @@ dashedName: part-42
|
||||
|
||||
# --description--
|
||||
|
||||
Add the new `bb1-window` class to the `bb1a`, `bb1b`, and `bb1c` elements. This will apply the gradient to them.
|
||||
Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should not remove the `bb1a` class.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.bb1a.bb1-window').length === 1 &&
|
||||
$('.bb1b.bb1-window').length === 1 &&
|
||||
$('.bb1c.bb1-window').length === 1
|
||||
);
|
||||
assert.exists(document.querySelector('div.bb1a'));
|
||||
```
|
||||
|
||||
You should add the `bb1-window` class to the `.bb1a` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1a.bb1-window'));
|
||||
```
|
||||
|
||||
You should not remove the `bb1b` class.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1b'));
|
||||
```
|
||||
|
||||
You should add the `bb1-window` class to the `.bb1b` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1b.bb1-window'));
|
||||
```
|
||||
|
||||
You should not remove the `bb1c` class.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1c'));
|
||||
```
|
||||
|
||||
You should add the `bb1-window` class to the `.bb1c` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1c.bb1-window'));
|
||||
```
|
||||
|
||||
You should not change the `.bb1d` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1d'));
|
||||
assert.notExists(document.querySelector('div.bb1d.bb1-window'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -30,147 +63,21 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
@ -196,34 +103,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -231,140 +131,106 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,38 @@ dashedName: part-43
|
||||
|
||||
# --description--
|
||||
|
||||
You don't need the `height` or `background-color` properties in `bb1a`, `bb1b` or `bb1c` anymore, so go ahead and remove them.
|
||||
You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` from `.bb1a`.
|
||||
|
||||
```js
|
||||
const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
!/(height|background-color)/g.test(bb1aStyle) &&
|
||||
!/(height|background-color)/g.test(bb1bStyle) &&
|
||||
!/(height|background-color)/g.test(bb1cStyle)
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should remove the `height` property from `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
|
||||
```
|
||||
|
||||
You should remove the `background-color` property from `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should remove the `height` property from `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
|
||||
```
|
||||
|
||||
You should remove the `background-color` property from `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,135 +50,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -199,34 +88,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -234,135 +116,106 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -17,19 +17,38 @@ gradient-type(
|
||||
);
|
||||
```
|
||||
|
||||
Add a `linear-gradient` to `bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
|
||||
Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should use the `background` on `.bb1d`.
|
||||
|
||||
```js
|
||||
const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*linear-gradient\(\s*orange\s*,\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(
|
||||
bb1d
|
||||
)
|
||||
);
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
|
||||
```
|
||||
|
||||
You should give the `background` property a `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
You should use `orange` as the first color in the `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
|
||||
```
|
||||
|
||||
You should use `--building-color1` as the second color in the `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
|
||||
```
|
||||
|
||||
You should use `--window-color1` as the third color in the `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -41,130 +60,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -202,34 +98,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -237,140 +126,101 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,15 +7,14 @@ dashedName: part-45
|
||||
|
||||
# --description--
|
||||
|
||||
It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `bb1d`.
|
||||
It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` property and value from `.bb1d`
|
||||
|
||||
```js
|
||||
const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(!/background-color/g.test(bb1dStyle));
|
||||
assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,135 +26,7 @@ assert(!/background-color/g.test(bb1dStyle));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -193,34 +64,27 @@ assert(!/background-color/g.test(bb1dStyle));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -228,139 +92,106 @@ assert(!/background-color/g.test(bb1dStyle));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -17,19 +17,14 @@ gradient-type(
|
||||
);
|
||||
```
|
||||
|
||||
Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `bb1d` gradient so you can see it in action.
|
||||
Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`.
|
||||
|
||||
```js
|
||||
const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*linear-gradient\(\s*orange\s*,\s*var\(\s*--building-color1\s*\)\s*80%\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(
|
||||
bb1d
|
||||
)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -41,134 +36,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -206,34 +74,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -241,139 +102,105 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1) 80%,
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,20 @@ dashedName: part-47
|
||||
|
||||
# --description--
|
||||
|
||||
Remove `orange` from the `bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
|
||||
Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove `orange` from the `linear-gradient`.
|
||||
|
||||
```js
|
||||
const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*50%\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test(
|
||||
bb1d
|
||||
)
|
||||
);
|
||||
assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
|
||||
```
|
||||
|
||||
You should change the now first `linear-gradient` color to transition at `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,27 +32,65 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -59,30 +98,30 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
@ -90,279 +129,74 @@ assert(
|
||||
var(--building-color1) 80%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,17 +7,26 @@ dashedName: part-48
|
||||
|
||||
# --description--
|
||||
|
||||
Nest two new `div` elements within `bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
|
||||
Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add two `div` elements to `.bb2`.
|
||||
|
||||
```js
|
||||
const bb2 = $('.bb2').children('div');
|
||||
assert(
|
||||
bb2.length === 2 && bb2[0] === $('.bb2a')[0] && bb2[1] === $('.bb2b')[0]
|
||||
);
|
||||
assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first `div` a class of `bb2a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb2a'));
|
||||
```
|
||||
|
||||
You should give the second `div` a class of `bb2b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb2b'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -29,133 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -168,7 +51,9 @@ assert(
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb2"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
@ -193,34 +78,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -228,141 +106,104 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,18 +7,20 @@ dashedName: part-49
|
||||
|
||||
# --description--
|
||||
|
||||
Give `bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
|
||||
Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.bb2b` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.bb2b\s*{\s*(width\s*:\s*100%\s*;\s*height\s*:\s*100%\s*(;|})|height\s*:\s*100%\s*;\s*width\s*:\s*100%\s*(;|}))/g.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give `.bb2b` a `height` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -30,133 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -197,34 +73,27 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -232,146 +101,106 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,11 +11,16 @@ Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new property variable called `window-color2` within `:root`.
|
||||
|
||||
```js
|
||||
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle));
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
|
||||
```
|
||||
|
||||
You should give `window-color2` a value of `#8cd9b3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,138 +32,7 @@ assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -199,35 +73,28 @@ assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -235,146 +102,109 @@ assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -18,19 +18,38 @@ gradient-type(
|
||||
);
|
||||
```
|
||||
|
||||
Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
|
||||
Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.bb2b` a `background` property.
|
||||
|
||||
```js
|
||||
const bb2b = code.match(/\.bb2b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*9%\s*\)\s*(;|})/g.test(
|
||||
bb2b
|
||||
)
|
||||
);
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
|
||||
```
|
||||
|
||||
You should use a `linear-gradient` on the `background`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
|
||||
```
|
||||
|
||||
You should use `--building-color2` from `0%` to `6%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
|
||||
```
|
||||
|
||||
You should use `--window-color2` from `6%` to `9%`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
|
||||
```
|
||||
|
||||
`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -42,139 +61,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -215,35 +102,28 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -251,152 +131,109 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,15 +11,10 @@ You can see the hard color change at the top of the section. Change the gradient
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
const bb2b = code.match(/\.bb2b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*repeating-linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*9%\s*\)\s*(;|})/g.test(
|
||||
bb2b
|
||||
)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,145 +26,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -210,35 +67,28 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -246,152 +96,115 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
background: linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,15 +7,14 @@ dashedName: part-53
|
||||
|
||||
# --description--
|
||||
|
||||
In the next few steps, you are going to use some tricks with CSS borders to turn the `bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `bb2` since you don't need it anymore.
|
||||
In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` from `.bb2`.
|
||||
|
||||
```js
|
||||
const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(!/background-color/g.test(bb2));
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,145 +26,7 @@ assert(!/background-color/g.test(bb2));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -206,35 +67,28 @@ assert(!/background-color/g.test(bb2));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -242,151 +96,113 @@ assert(!/background-color/g.test(bb2));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
```
|
||||
|
||||
@ -7,35 +7,62 @@ dashedName: part-54
|
||||
|
||||
# --description--
|
||||
|
||||
Add these properties to `bb2a`:
|
||||
Add these properties to `.bb2a`:
|
||||
|
||||
```css
|
||||
margin: auto;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 1vw solid #999;
|
||||
border-right: 1vw solid #999;
|
||||
margin: auto;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 1vw solid #999;
|
||||
border-right: 1vw solid #999;
|
||||
```
|
||||
|
||||
After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.bb2a` a `margin` of `auto`.
|
||||
|
||||
```js
|
||||
const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/margin\s*:\s*auto\s*(;|})/g.test(bb2a) &&
|
||||
/width\s*:\s*5vw\s*(;|})/g.test(bb2a) &&
|
||||
/height\s*:\s*5vw\s*(;|})/g.test(bb2a) &&
|
||||
/border-top\s*:\s*1vw\s+solid\s+#000\s*(;|})/g.test(bb2a) &&
|
||||
/border-bottom\s*:\s*1vw\s+solid\s+#000\s*(;|})/g.test(bb2a) &&
|
||||
/border-left\s*:\s*1vw\s+solid\s+#999\s*(;|})/g.test(bb2a) &&
|
||||
/border-right\s*:\s*1vw\s+solid\s+#999\s*(;|})/g.test(bb2a)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
|
||||
```
|
||||
|
||||
You should give `.bb2a` a `width` of `auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
|
||||
```
|
||||
|
||||
You should give `.bb2a` a `height` of `5vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
|
||||
```
|
||||
|
||||
You should give `.bb2a` a `border-top` of `1vw solid #000`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
|
||||
```
|
||||
|
||||
You should give `.bb2a` a `border-bottom` of `1vw solid #000`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
|
||||
```
|
||||
|
||||
You should give `.bb2a` a `border-left` of `1vw solid #999`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
You should give `.bb2a` a `border-right` of `1vw solid #999`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -47,144 +74,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -225,35 +115,28 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -261,62 +144,54 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 1vw solid #999;
|
||||
border-right: 1vw solid #999;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -325,97 +200,60 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,32 @@ dashedName: part-55
|
||||
|
||||
# --description--
|
||||
|
||||
Next, remove the `width` and `height` from `bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
|
||||
Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `width` from `.bb2a`.
|
||||
|
||||
```js
|
||||
const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
!/width/g.test(bb2a) &&
|
||||
!/height/g.test(bb2a) &&
|
||||
/border-left\s*:\s*5vw\s+solid\s+#999\s*(;|})/g.test(bb2a) &&
|
||||
/border-right\s*:\s*5vw\s+solid\s+#999\s*(;|})/g.test(bb2a)
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
|
||||
```
|
||||
|
||||
You should remove the `height` from `.bb2a`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
|
||||
```
|
||||
|
||||
You should change the `border-left` to use `5vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
You should change the `border-right` to use `5vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,28 +44,69 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -61,52 +114,52 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
@ -114,9 +167,9 @@ assert(
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 1vw solid #999;
|
||||
border-right: 1vw solid #999;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -125,290 +178,60 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid #999;
|
||||
border-right: 5vw solid #999;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,18 +7,20 @@ dashedName: part-56
|
||||
|
||||
# --description--
|
||||
|
||||
Next, change the two `#999` of `bb2a` to `transparent`. This will make the left and right borders invisible.
|
||||
Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should change the `border-left` to use `transparent`.
|
||||
|
||||
```js
|
||||
const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/border-left\s*:\s*5vw\s+solid\s+transparent\s*(;|})/g.test(bb2a) &&
|
||||
/border-right\s*:\s*5vw\s+solid\s+transparent\s*(;|})/g.test(bb2a)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
|
||||
```
|
||||
|
||||
You should change the `border-right` to use `transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -30,28 +32,69 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -59,60 +102,60 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid #999;
|
||||
border-right: 5vw solid #999;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -121,290 +164,60 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,15 +7,20 @@ dashedName: part-57
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `margin` and `border-top` properties and values from `bb2a` to turn it into a triangle for the top of the building.
|
||||
Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `margin` from `.bb2a`.
|
||||
|
||||
```js
|
||||
const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a));
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
|
||||
```
|
||||
|
||||
You should remove the `border-top` from `.bb2a`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,28 +32,69 @@ assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -56,60 +102,60 @@ assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -118,288 +164,60 @@ assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a));
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,19 +7,26 @@ dashedName: part-58
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, on the `border-bottom` property of `bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
|
||||
Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should change `border-bottom` to use `5vh`.
|
||||
|
||||
```js
|
||||
const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/border-bottom\s*:\s*5vh\s+solid\s+var\(\s*--building-color2\s*\)\s*(;|})/g.test(
|
||||
bb2a
|
||||
)
|
||||
);
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
|
||||
```
|
||||
|
||||
You should change `border-bottom` to use `--building-color2`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
|
||||
```
|
||||
|
||||
`border-bottom` should be `5vh solid var(--building-color2)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,28 +38,69 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -60,58 +108,58 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -120,288 +168,59 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -11,11 +11,16 @@ On to the next building! Create a new variable called `--window-color3` in `:roo
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should define a new property variable `--window-color3`.
|
||||
|
||||
```js
|
||||
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle));
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
|
||||
```
|
||||
|
||||
You should give `--window-color3` a value of `#d98cb3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,150 +32,7 @@ assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -211,36 +73,29 @@ assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -248,58 +103,58 @@ assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -308,97 +163,60 @@ assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle));
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,25 +11,38 @@ So far, all the gradients you created have gone from top to bottom, that's the d
|
||||
|
||||
```css
|
||||
gradient-type(
|
||||
direction
|
||||
direction,
|
||||
color1,
|
||||
color2
|
||||
);
|
||||
```
|
||||
|
||||
Fill in `bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
|
||||
Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.bb3` a `background` using `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*(7\.5%\s*,|,)\s*var\(\s*--window-color3\s*\)\s*15%\s*\)\s*(;|})/g.test(
|
||||
bb3
|
||||
)
|
||||
);
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
|
||||
```
|
||||
|
||||
You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
|
||||
```
|
||||
|
||||
You should use `--building-color3` for the first two colors.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
|
||||
```
|
||||
|
||||
You should use `--window-color3` at `15%` for the third color.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -41,151 +54,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -226,15 +95,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -242,20 +104,20 @@ assert(
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -263,58 +125,58 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -323,103 +185,60 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,15 +7,14 @@ dashedName: part-61
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `background-color` property and value from `bb3` since you are using the gradient as the background now.
|
||||
Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` from `.bb3`.
|
||||
|
||||
```js
|
||||
const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(!/background-color/g.test(bb3));
|
||||
assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,157 +26,7 @@ assert(!/background-color/g.test(bb3));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -218,15 +67,8 @@ assert(!/background-color/g.test(bb3));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -234,20 +76,20 @@ assert(!/background-color/g.test(bb3));
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -255,58 +97,58 @@ assert(!/background-color/g.test(bb3));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -315,102 +157,66 @@ assert(!/background-color/g.test(bb3));
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,39 @@ dashedName: part-62
|
||||
|
||||
# --description--
|
||||
|
||||
The next building will have three sections. Nest three `div` elements within `bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
|
||||
The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add three `div` elements within `.bb4`.
|
||||
|
||||
```js
|
||||
const bb4 = $('.bb4').children('div');
|
||||
assert(
|
||||
bb4.length === 3 &&
|
||||
bb4[0] === $('.bb4a')[0] &&
|
||||
bb4[1] === $('.bb4b')[0] &&
|
||||
bb4[2] === $('.bb4c')[0]
|
||||
);
|
||||
assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
|
||||
```
|
||||
|
||||
You should give the first new `div` a class of `bb4a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4 > div.bb4a"));
|
||||
```
|
||||
|
||||
You should give the second new `div` a class of `bb4b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4 > div.bb4a"));
|
||||
```
|
||||
|
||||
You should give the third new `div` a class of `bb4c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4 > div.bb4a"));
|
||||
```
|
||||
|
||||
You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4a + div.bb4b"));
|
||||
assert.exists(document.querySelector("div.bb4b + div.bb4c"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,156 +51,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -200,7 +70,9 @@ assert(
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb4"></div>
|
||||
--fcc-editable-region--
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
@ -222,15 +94,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -238,20 +103,20 @@ assert(
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -259,58 +124,58 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -319,9 +184,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -330,95 +195,54 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,24 +7,44 @@ dashedName: part-63
|
||||
|
||||
# --description--
|
||||
|
||||
Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `bb4a`, `80%` and `5%` to `bb4b`, and `100%` and `85%` to `bb4c`.
|
||||
Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.bb4a` a `width` of `3%`.
|
||||
|
||||
```js
|
||||
const bb4a = code.match(/\.bb4a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb4b = code.match(/\.bb4b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const bb4c = code.match(/\.bb4c\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*3%\s*(;|})/g.test(bb4a) &&
|
||||
/height\s*:\s*10%\s*(;|})/g.test(bb4a) &&
|
||||
/width\s*:\s*80%\s*(;|})/g.test(bb4b) &&
|
||||
/height\s*:\s*5%\s*(;|})/g.test(bb4b) &&
|
||||
/width\s*:\s*100%\s*(;|})/g.test(bb4c) &&
|
||||
/height\s*:\s*85%\s*(;|})/g.test(bb4c)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
|
||||
```
|
||||
|
||||
You should give `.bb4a` a `height` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
|
||||
```
|
||||
|
||||
You should give `.bb4b` a `width` of `80%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
|
||||
```
|
||||
|
||||
You should give `.bb4b` a `height` of `5%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
|
||||
```
|
||||
|
||||
You should give `.bb4c` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
|
||||
```
|
||||
|
||||
You should give `.bb4c` a `height` of `85%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -36,156 +56,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -230,15 +101,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -246,20 +110,20 @@ assert(
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -267,58 +131,58 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -327,9 +191,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -338,110 +202,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
--fcc-editable-region--
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,32 @@ dashedName: part-64
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `background-color` property and value from `bb4` and add it to the three new sections; `bb4a`, `bb4b`, and `bb4c`, so only the sections are filled.
|
||||
Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` from `.bb4`.
|
||||
|
||||
```js
|
||||
const bb4 = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
!/background-color/g.test(bb4) &&
|
||||
$('.bb4a').css('background-color') === 'rgb(83, 140, 198)' &&
|
||||
$('.bb4b').css('background-color') === 'rgb(83, 140, 198)' &&
|
||||
$('.bb4c').css('background-color') === 'rgb(83, 140, 198)'
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give `.bb4a` a `background-color` of `--building-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
|
||||
```
|
||||
|
||||
You should give `.bb4b` a `background-color` of `--building-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
|
||||
```
|
||||
|
||||
You should give `.bb4c` a `background-color` of `--building-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,171 +44,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -241,15 +89,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -257,20 +98,20 @@ assert(
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -278,58 +119,58 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -338,9 +179,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -349,112 +190,68 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,14 +7,14 @@ dashedName: part-65
|
||||
|
||||
# --description--
|
||||
|
||||
You want `bb4` to share the properties of `bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
|
||||
You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a new class declaration called `building-wrap`.
|
||||
|
||||
```js
|
||||
assert(/\.building-wrap\s*{\s*}/g.test(code));
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,173 +26,7 @@ assert(/\.building-wrap\s*{\s*}/g.test(code));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -237,15 +71,8 @@ assert(/\.building-wrap\s*{\s*}/g.test(code));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -253,20 +80,20 @@ assert(/\.building-wrap\s*{\s*}/g.test(code));
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -274,62 +101,60 @@ assert(/\.building-wrap\s*{\s*}/g.test(code));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.building-wrap {
|
||||
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
--fcc-editable-region--
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -338,9 +163,9 @@ assert(/\.building-wrap\s*{\s*}/g.test(code));
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -349,112 +174,71 @@ assert(/\.building-wrap\s*{\s*}/g.test(code));
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,44 @@ dashedName: part-66
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `display`, `flex-direction`, and `align-items` properties and values from `bb1` to the new `building-wrap` class.
|
||||
Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove `display` from `.bb1`.
|
||||
|
||||
```js
|
||||
const bWrap = code.match(/\.building-wrap\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/display\s*:\s*flex\s*(;|})/g.test(bWrap) &&
|
||||
/flex-direction\s*:\s*column\s*(;|})/g.test(bWrap) &&
|
||||
/align-items\s*:\s*center\s*(;|})/g.test(bWrap)
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
|
||||
```
|
||||
|
||||
You should move `display` with a value of `flex` to `.building-wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
|
||||
```
|
||||
|
||||
You should remove `flex-direction` from `.bb1`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
|
||||
```
|
||||
|
||||
You should move `flex-direction` with a value of `column` to `.building-wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
|
||||
```
|
||||
|
||||
You should remove `align-items` from `.bb1`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
|
||||
```
|
||||
|
||||
You should move `align-items` with a value of `center` to `.building-wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,177 +56,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -246,15 +101,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -262,20 +110,20 @@ assert(
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -283,61 +131,62 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.building-wrap {
|
||||
|
||||
.building-wrap {
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -346,9 +195,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -357,112 +206,71 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,16 +7,20 @@ dashedName: part-67
|
||||
|
||||
# --description--
|
||||
|
||||
Add the new `building-wrap` class to the `bb1` and `bb4` elements. This will apply the centering properties to the buildings that need it.
|
||||
Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add `building-wrap` to the `.bb1` element.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.bb1.building-wrap').length === 1 && $('.bb4.building-wrap').length === 1
|
||||
);
|
||||
assert.exists(document.querySelector("div.bb1.building-wrap"));
|
||||
```
|
||||
|
||||
You should add `building-wrap` to the `.bb4` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4.building-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -28,182 +32,14 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
@ -217,6 +53,7 @@ assert(
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
--fcc-editable-region--
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
@ -242,15 +79,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -258,20 +88,20 @@ assert(
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -279,61 +109,61 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -342,9 +172,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -353,112 +183,71 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,11 +11,16 @@ Create a new variable called `--window-color4` in `:root` and give it a value of
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should define a new property variable `--window-color4`.
|
||||
|
||||
```js
|
||||
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
|
||||
```
|
||||
|
||||
You should give `--window-color4` a value of `#8cb3d9`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,176 +32,7 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -241,15 +77,9 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -257,21 +87,20 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -279,61 +108,61 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -342,9 +171,9 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -353,112 +182,71 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,14 +7,20 @@ dashedName: part-69
|
||||
|
||||
# --description--
|
||||
|
||||
Nest four new `div` elements within `bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
|
||||
Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add four `div` elements to `.bb4c`.
|
||||
|
||||
```js
|
||||
assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
|
||||
```
|
||||
|
||||
You should give each new `div` a class of `bb4-window`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,177 +32,7 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -218,7 +54,9 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb4c"></div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
@ -241,15 +79,8 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -258,20 +89,20 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -279,61 +110,61 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -342,9 +173,9 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -353,117 +184,71 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,17 +11,22 @@ Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add you
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.bb4-window` a `width` of `18%`.
|
||||
|
||||
```js
|
||||
const bb4Window = code.match(/\.bb4-window\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*18%\s*(;|})/g.test(bb4Window) &&
|
||||
/height\s*:\s*90%\s*(;|})/g.test(bb4Window) &&
|
||||
/background-color\s*:\s*var\(\s*--window-color4\s*\)\s*(;|})/g.test(
|
||||
bb4Window
|
||||
)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
|
||||
```
|
||||
|
||||
You should give `.bb4-window` a `height` of `90%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
|
||||
```
|
||||
|
||||
You should give `.bb4-window` a `background-color` of `--window-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,177 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -253,15 +88,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -270,20 +98,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -291,61 +119,61 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -354,9 +182,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -365,123 +193,72 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
--fcc-editable-region--
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,19 +7,40 @@ dashedName: part-71
|
||||
|
||||
# --description--
|
||||
|
||||
The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `building-wrap` called `window-wrap` and add these properties to it: `display: flex;`, `align-items: center;`, and `justify-content: space-evenly;`. This will be used in a few places to center window elements vertically and space them evenly in their parent.
|
||||
The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `.window-wrap`, and add these properties to it:
|
||||
|
||||
```css
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
```
|
||||
|
||||
This will be used in a few places to center window elements vertically, and evenly space them in their parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should create a `.window-wrap` selector.
|
||||
|
||||
```js
|
||||
const wWrap = code.match(/\.window-wrap\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/display\s*:\s*flex\s*(;|})/g.test(wWrap) &&
|
||||
/align-items\s*:\s*center\s*(;|})/g.test(wWrap) &&
|
||||
/justify-content\s*:\s*space-evenly\s*(;|})/g.test(wWrap)
|
||||
);
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
|
||||
```
|
||||
|
||||
You should give `.window-wrap` a `display` of `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
|
||||
```
|
||||
|
||||
You should give `.window-wrap` an `align-items` of `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
|
||||
```
|
||||
|
||||
You should give `.window-wrap` a `justify-content` of `space-evenly`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,183 +52,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -257,15 +102,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -274,20 +112,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -295,67 +133,63 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
--fcc-editable-region--
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -364,9 +198,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -375,123 +209,77 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,14 +7,14 @@ dashedName: part-72
|
||||
|
||||
# --description--
|
||||
|
||||
Add the new `window-wrap` class to the `bb4c` element.
|
||||
Add the new `window-wrap` class to the `.bb4c` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add a class of `window-wrap` to `.bb4c`.
|
||||
|
||||
```js
|
||||
assert($('.bb4c.window-wrap').length === 1);
|
||||
assert.exists(document.querySelector("div.bb4c.window-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,189 +26,7 @@ assert($('.bb4c.window-wrap').length === 1);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -230,12 +48,14 @@ assert($('.bb4c.window-wrap').length === 1);
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb4c">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
@ -258,15 +78,8 @@ assert($('.bb4c.window-wrap').length === 1);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -275,20 +88,20 @@ assert($('.bb4c.window-wrap').length === 1);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -296,67 +109,67 @@ assert($('.bb4c.window-wrap').length === 1);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -365,9 +178,9 @@ assert($('.bb4c.window-wrap').length === 1);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -376,123 +189,77 @@ assert($('.bb4c.window-wrap').length === 1);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,39 @@ dashedName: part-73
|
||||
|
||||
# --description--
|
||||
|
||||
Looks good! On to the foreground buildings! Turn the `fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
|
||||
Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add three `div` elements within `.fb1`.
|
||||
|
||||
```js
|
||||
const fb1 = $('.fb1').children('div');
|
||||
assert(
|
||||
fb1.length === 3 &&
|
||||
fb1[0] === $('div.fb1a')[0] &&
|
||||
fb1[1] === $('div.fb1b')[0] &&
|
||||
fb1[2] === $('div.fb1c')[0]
|
||||
);
|
||||
assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
|
||||
```
|
||||
|
||||
You should give the first new `div` a class of `fb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1 > div.fb1a"));
|
||||
```
|
||||
|
||||
You should give the second new `div` a class of `fbab`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1 > div.fb1b"));
|
||||
```
|
||||
|
||||
You should give the third new `div` a class of `fb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1 > div.fb1c"));
|
||||
```
|
||||
|
||||
You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1a + div.fb1b"));
|
||||
assert.exists(document.querySelector("div.fb1b + div.fb1c"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,189 +51,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -250,7 +87,9 @@ assert(
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb1"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
@ -264,15 +103,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -281,20 +113,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -302,67 +134,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -371,9 +203,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -382,127 +214,77 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,32 @@ dashedName: part-74
|
||||
|
||||
# --description--
|
||||
|
||||
Give `fb1b` a `width` of `60%` and `height` of `10%`, and `fb1c` a `width` of `100%` and `height` of `80%`.
|
||||
Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb1b` a `width` of `60%`.
|
||||
|
||||
```js
|
||||
const fb1b = code.match(/\.fb1b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*60%\s*(;|})/g.test(fb1b) &&
|
||||
/height\s*:\s*10%\s*(;|})/g.test(fb1b) &&
|
||||
/width\s*:\s*100%\s*(;|})/g.test(fb1c) &&
|
||||
/height\s*:\s*80%\s*(;|})/g.test(fb1c)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
|
||||
```
|
||||
|
||||
You should give `.fb1b` a `height` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
|
||||
```
|
||||
|
||||
You should give `.fb1c` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
|
||||
```
|
||||
|
||||
You should give `.fb1c` a `height` of `80%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,189 +44,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -269,15 +98,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -286,20 +108,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -307,67 +129,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -376,9 +198,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -387,137 +209,78 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,14 +7,14 @@ dashedName: part-75
|
||||
|
||||
# --description--
|
||||
|
||||
Add the `building-wrap` class to the `fb1` element to center the sections.
|
||||
Add the `building-wrap` class to the `.fb1` element to center the sections.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add the class `building-wrap` to `.fb1`.
|
||||
|
||||
```js
|
||||
assert($('.fb1.building-wrap').length === 1);
|
||||
assert.exists(document.querySelector("div.fb1.building-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,199 +26,7 @@ assert($('.fb1.building-wrap').length === 1);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -254,11 +62,13 @@ assert($('.fb1.building-wrap').length === 1);
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb1">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
@ -272,15 +82,8 @@ assert($('.fb1.building-wrap').length === 1);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -289,20 +92,20 @@ assert($('.fb1.building-wrap').length === 1);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -310,67 +113,67 @@ assert($('.fb1.building-wrap').length === 1);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -379,9 +182,9 @@ assert($('.fb1.building-wrap').length === 1);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -390,137 +193,87 @@ assert($('.fb1.building-wrap').length === 1);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,17 +7,20 @@ dashedName: part-76
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `background-color` property and value from `fb1` to `fb1b`.
|
||||
Move the `background-color` property and value from `.fb1` to `.fb1b`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove `background-color` from `.fb1`.
|
||||
|
||||
```js
|
||||
const fb1b = code.match(/\.fb1b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background-color\s*:\s*var\(\s*--building-color4\s*\)\s*(;|})/g.test(fb1b)
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
|
||||
```
|
||||
|
||||
You should add a `background-color` of `--building-color4` to `.fb1b`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -29,199 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -275,15 +86,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -292,20 +96,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -313,67 +117,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -382,9 +186,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -393,137 +197,87 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -9,19 +9,32 @@ dashedName: part-77
|
||||
|
||||
Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.
|
||||
|
||||
Add a `repeating-linear-gradient` to `fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
|
||||
Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb1c` a `background` with a `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*15%\s*\)\s*(;|})/g.test(
|
||||
fb1c
|
||||
)
|
||||
);
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
|
||||
```
|
||||
|
||||
You should use a direction of `90deg`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
|
||||
```
|
||||
|
||||
You should use a first color of `--building-color4` from `0%` to `10%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%/);
|
||||
```
|
||||
|
||||
You should use a second color of `transparent` from `10%` to `15%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,199 +46,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -279,15 +100,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -296,20 +110,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -317,67 +131,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -386,9 +200,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -397,144 +211,86 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
)
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -18,19 +18,26 @@ gradient2(
|
||||
);
|
||||
```
|
||||
|
||||
Add a `repeating-linear-gradient` to `fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
|
||||
Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should not alter the first `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*15%\s*\)\s*,\s*repeating-linear-gradient\(\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*var\(\s*--window-color4\s*\)\s*10%\s*,\s*var\(\s*--window-color4\s*\)\s*90%\s*\)\s*(;|})/g.test(
|
||||
fb1c
|
||||
)
|
||||
);
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
|
||||
```
|
||||
|
||||
You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%/);
|
||||
```
|
||||
|
||||
You should use a second color of `--window-color4` from `10%` to `90%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%,var\(--window-color4\)10%,var\(--window-color4\)90%\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -42,8 +49,62 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -52,20 +113,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -73,67 +134,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -142,9 +203,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -153,50 +214,50 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -206,357 +267,40 @@ assert(
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
)
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,19 +7,20 @@ dashedName: part-79
|
||||
|
||||
# --description--
|
||||
|
||||
You're going to use some more border tricks for top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
|
||||
You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb1a` a `border-bottom`.
|
||||
|
||||
```js
|
||||
const fb1a = code.match(/\.fb1a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/border-bottom\s*:\s*7vh\s+solid\s+var\(\s*--building-color4\s*\)\s*(;|})/g.test(
|
||||
fb1a
|
||||
)
|
||||
);
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
|
||||
```
|
||||
|
||||
You should use a `border-bottom` of `7vh solid var(--building-color4)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,212 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -290,15 +86,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -307,20 +96,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -328,67 +117,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -397,9 +186,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -408,54 +197,52 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
--fcc-editable-region--
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -471,91 +258,40 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,18 +7,20 @@ dashedName: part-80
|
||||
|
||||
# --description--
|
||||
|
||||
When you make the left and right borders bigger, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent;` as the value of the `border-left` and `border-right` properties of `fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
|
||||
When you make the left and right borders bigger, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb1a` a `border-left` of `2vw solid transparent`.
|
||||
|
||||
```js
|
||||
const fb1a = code.match(/\.fb1a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/border-left\s*:\s*2vw\s+solid\s+transparent\s*(;|})/g.test(fb1a) &&
|
||||
/border-right\s*:\s*2vw\s+solid\s+transparent\s*(;|})/g.test(fb1a)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
|
||||
```
|
||||
|
||||
You should give `.fb1a` a `border-right` of `2vw solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -30,216 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -293,15 +86,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -310,20 +96,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -331,67 +117,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -400,9 +186,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -411,56 +197,54 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -476,91 +260,41 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,17 +7,27 @@ dashedName: part-81
|
||||
|
||||
# --description--
|
||||
|
||||
On to the next building! Nest two `div` elements within `fb2` and give them the classes of `fb2a` and `fb2b`, in that order.
|
||||
On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add two `div` elements within `.fb2`.
|
||||
|
||||
```js
|
||||
const fb2 = $('.fb2').children('div');
|
||||
assert(
|
||||
fb2.length === 2 && fb2[0] === $('div.fb2a')[0] && fb2[1] === $('div.fb2b')[0]
|
||||
);
|
||||
assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` a class of `fb2a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb2 > div.fb2a"));
|
||||
assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
|
||||
```
|
||||
|
||||
You should give the second new `div` a class of `fb2b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb2 > div.fb2b"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -29,218 +39,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -281,7 +80,9 @@ assert(
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2"></div>
|
||||
--fcc-editable-region--
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
@ -294,15 +95,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -311,20 +105,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -332,67 +126,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -401,9 +195,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -412,56 +206,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -477,94 +271,41 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,20 +7,26 @@ dashedName: part-82
|
||||
|
||||
# --description--
|
||||
|
||||
Give `fb2a` a `width` of `100%` and `fb2b` a `width` of `100%` and `height` of `75%`.
|
||||
Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb2a` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
const fb2a = code.match(/\.fb2a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb2b = code.match(/\.fb2b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*100%\s*(;|})/g.test(fb2a) &&
|
||||
/width\s*:\s*100%\s*(;|})/g.test(fb2b) &&
|
||||
/height\s*:\s*75%\s*(;|})/g.test(fb2b)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
|
||||
```
|
||||
|
||||
You should give `.fb2b` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
|
||||
```
|
||||
|
||||
You should give `.fb2b` a `height` of `75%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -32,218 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -300,15 +95,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -317,20 +105,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -338,67 +126,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -407,9 +195,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -418,56 +206,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -483,103 +271,43 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
--fcc-editable-region--
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,14 +7,20 @@ dashedName: part-83
|
||||
|
||||
# --description--
|
||||
|
||||
Nest three `div` elements within `fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
|
||||
Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add three `div` elements within `.fb2b`.
|
||||
|
||||
```js
|
||||
assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
|
||||
```
|
||||
|
||||
You should give the three new `div` elements each a class of `fb2-window`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,227 +32,7 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -289,7 +75,9 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2b"></div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
@ -303,15 +91,8 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -320,20 +101,20 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -341,67 +122,67 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -410,9 +191,9 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -421,56 +202,56 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -486,107 +267,50 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,14 +7,14 @@ dashedName: part-84
|
||||
|
||||
# --description--
|
||||
|
||||
Add your `window-wrap` class to `fb2b` to position the new window elements.
|
||||
Add your `window-wrap` class to `.fb2b` to position the new window elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add the class `window-wrap` to `.fb2b`.
|
||||
|
||||
```js
|
||||
assert($('.fb2b.window-wrap').length === 1);
|
||||
assert.exists(document.querySelector("div.fb2b.window-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,227 +26,7 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -289,11 +69,13 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2b">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
@ -307,15 +89,8 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -324,20 +99,20 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -345,67 +120,67 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -414,9 +189,9 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -425,56 +200,56 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -490,107 +265,50 @@ assert($('.fb2b.window-wrap').length === 1);
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,26 @@ dashedName: part-85
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
|
||||
Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give the `.fb2-window` elements a `width` of `22%`.
|
||||
|
||||
```js
|
||||
const fb2w = code.match(/\.fb2-window\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*22%\s*(;|})/g.test(fb2w) &&
|
||||
/height\s*:\s*100%\s*(;|})/g.test(fb2w) &&
|
||||
/background-color\s*:\s*var\(\s*--window-color3\s*\)\s*(;|})/g.test(fb2w)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
|
||||
```
|
||||
|
||||
You should give the `.fb2-window` elements a `height` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
|
||||
```
|
||||
|
||||
You should give the `.fb2-window` elements a `background-color` of `--window-color3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,227 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -312,15 +99,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -329,20 +109,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -350,67 +130,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -419,9 +199,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -430,56 +210,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -495,113 +275,51 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
--fcc-editable-region--
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,19 +7,20 @@ dashedName: part-86
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `background-color` property and value from `fb2` to `fb2b` to just color the section and not the container.
|
||||
Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` property from `.fb2`.
|
||||
|
||||
```js
|
||||
const fb2 = code.match(/\.fb2\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb2b = code.match(/\.fb2b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
!/background-color/g.test(fb2) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color3\s*\)\s*(;|})/g.test(fb2b)
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give `.fb2b` a `background-color` of `--building-color3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,233 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -318,15 +93,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -335,20 +103,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -356,67 +124,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -425,9 +193,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -436,56 +204,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -501,113 +269,55 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,21 +7,26 @@ dashedName: part-87
|
||||
|
||||
# --description--
|
||||
|
||||
For `fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)` and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
|
||||
For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`.
|
||||
|
||||
```js
|
||||
const fb2a = code.match(/\.fb2a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/border-bottom\s*:\s*10vh\s+solid\s+var\(\s*--building-color3\s*\)\s*(;|})/g.test(
|
||||
fb2a
|
||||
) &&
|
||||
/border-left\s*:\s*1vw\s+solid\s+transparent\s*(;|})/g.test(fb2a) &&
|
||||
/border-right\s*:\s*1vw\s+solid\s+transparent\s*(;|})/g.test(fb2a)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
|
||||
```
|
||||
|
||||
You should give `.fb2a` a `border-left` of `1vw solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
|
||||
```
|
||||
|
||||
You should give `.fb2a` a `border-right` of `1vw solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,233 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -320,15 +99,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -337,20 +109,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -358,67 +130,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -427,9 +199,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -438,56 +210,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -503,116 +275,55 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,22 +7,38 @@ dashedName: part-88
|
||||
|
||||
# --description--
|
||||
|
||||
For the next building, nest four `div` elements within `fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections and the top two will be almost the same as the bottom two.
|
||||
For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add four `div` elements within `.fb3`.
|
||||
|
||||
```js
|
||||
const fb3 = $('.fb3').children('div');
|
||||
console.log(fb3);
|
||||
assert(
|
||||
fb3.length === 4 &&
|
||||
fb3[0] === $('div.fb3a')[0] &&
|
||||
fb3[1] === $('div.fb3b')[0] &&
|
||||
fb3[2] === $('div.fb3a')[1] &&
|
||||
fb3[3] === $('div.fb3b')[1]
|
||||
);
|
||||
assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
|
||||
```
|
||||
|
||||
You should give the first new `div` a class of `fb3a`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
|
||||
```
|
||||
|
||||
You should give the second new `div` a class of `fb3b`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
|
||||
```
|
||||
|
||||
You should give the third new `div` a class of `fb3a`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
|
||||
```
|
||||
|
||||
You should give the fourth new `div` a class of `fb3b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -34,236 +50,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -313,7 +100,9 @@ assert(
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb3"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
@ -324,15 +113,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -341,20 +123,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -362,67 +144,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -431,9 +213,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -442,56 +224,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -507,121 +289,59 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,21 +7,32 @@ dashedName: part-89
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `fb3b` element a `width` of `100%` and `height` of `35%`.
|
||||
Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb3a` a `width` of `80%`.
|
||||
|
||||
```js
|
||||
const fb3a = code.match(/\.fb3a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb3b = code.match(/\.fb3b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*80%\s*(;|})/g.test(fb3a) &&
|
||||
/height\s*:\s*15%\s*(;|})/g.test(fb3a) &&
|
||||
/width\s*:\s*100%\s*(;|})/g.test(fb3b) &&
|
||||
/height\s*:\s*35%\s*(;|})/g.test(fb3b)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
|
||||
```
|
||||
|
||||
You should give `.fb3a` a `height` of `15%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
|
||||
```
|
||||
|
||||
You should give `.fb3b` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
|
||||
```
|
||||
|
||||
You should give `.fb3b` a `height` of `35%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -33,236 +44,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -328,15 +110,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -345,20 +120,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -366,67 +141,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -435,9 +210,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -446,56 +221,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -511,131 +286,61 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,23 +7,26 @@ dashedName: part-90
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `background-color` property and value from `fb3` and add them to `fb3a` and `fb3b`.
|
||||
Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` from `.fb3`.
|
||||
|
||||
```js
|
||||
const fb3 = code.match(/\.fb3\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb3a = code.match(/\.fb3a\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb3b = code.match(/\.fb3b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
!/background-color/g.test(fb3) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(
|
||||
fb3a
|
||||
) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb3b)
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give `.fb3a` a `background-color` of `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
|
||||
```
|
||||
|
||||
You should give `.fb3b` a `background-color` of `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -35,246 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -340,15 +104,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -357,20 +114,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -378,67 +135,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -447,9 +204,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -458,56 +215,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -523,132 +280,68 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,14 +7,14 @@ dashedName: part-91
|
||||
|
||||
# --description--
|
||||
|
||||
Add your `building-wrap` class to the `fb3` element to center the sections.
|
||||
Add your `building-wrap` class to the `.fb3` element to center the sections.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add the class `building-wrap` to `.fb3`.
|
||||
|
||||
```js
|
||||
assert($('.fb3.building-wrap').length === 1);
|
||||
assert.exists(document.querySelector("div.fb3.building-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,247 +26,7 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -316,12 +76,14 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb3">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
@ -332,15 +94,8 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -349,20 +104,20 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -370,67 +125,67 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -439,9 +194,9 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -450,56 +205,56 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -515,132 +270,70 @@ assert($('.fb3.building-wrap').length === 1);
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,14 +7,20 @@ dashedName: part-92
|
||||
|
||||
# --description--
|
||||
|
||||
Nest three new `div` elements in the first `fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
|
||||
Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add three `div` elements within the first `.fb3a` element.
|
||||
|
||||
```js
|
||||
assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
|
||||
```
|
||||
|
||||
You should give each new `div` a class of `fb3-window`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,247 +32,7 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -317,7 +83,9 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
--fcc-editable-region--
|
||||
<div class="fb3a"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
@ -332,15 +100,8 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -349,20 +110,20 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -370,67 +131,67 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -439,9 +200,9 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -450,56 +211,56 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -515,136 +276,70 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,26 @@ dashedName: part-93
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
|
||||
Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb3-window` a `width` of `25%`.
|
||||
|
||||
```js
|
||||
const fb3w = code.match(/\.fb3-window\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*25%\s*(;|})/g.test(fb3w) &&
|
||||
/height\s*:\s*80%\s*(;|})/g.test(fb3w) &&
|
||||
/background-color\s*:\s*var\(\s*--window-color1\s*\)\s*(;|})/g.test(fb3w)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
|
||||
```
|
||||
|
||||
You should give `.fb3-window` a `height` of `80%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
|
||||
```
|
||||
|
||||
You should give `.fb3-window` a `background-color` of `--window-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,247 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -341,15 +108,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -358,20 +118,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -379,67 +139,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -448,9 +208,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -459,56 +219,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -524,142 +284,71 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,14 +7,14 @@ dashedName: part-94
|
||||
|
||||
# --description--
|
||||
|
||||
Add your `window-wrap` class to the `fb3a` element to center and space the windows.
|
||||
Add your `window-wrap` class to the `.fb3a` element to center and space the windows.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb3a` a class of `window-wrap`.
|
||||
|
||||
```js
|
||||
assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
assert.exists(document.querySelector("div.fb3a.window-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,253 +26,7 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -323,11 +77,13 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
--fcc-editable-region--
|
||||
<div class="fb3a">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
@ -342,15 +98,8 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -359,20 +108,20 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -380,67 +129,67 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -449,9 +198,9 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -460,56 +209,56 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -525,142 +274,76 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -11,11 +11,10 @@ I'm not thrilled about that black for the windows anymore. Change the `--window-
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should change the value of `--window-color1` to `#bb99ff`.
|
||||
|
||||
```js
|
||||
const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -27,8 +26,79 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -37,20 +107,20 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -58,67 +128,67 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -127,9 +197,9 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -138,56 +208,56 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -203,465 +273,76 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,17 +7,26 @@ dashedName: part-96
|
||||
|
||||
# --description--
|
||||
|
||||
Only three more building to go. Nest two new `div` elements within the `fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `fb4` and `fb5`, so it's the rightmost purple building you are working on now.
|
||||
Only three more building to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add two `div` elements within `.fb4`.
|
||||
|
||||
```js
|
||||
const fb4 = $('.fb4').children('div');
|
||||
assert(
|
||||
fb4.length === 2 && fb4[0] === $('div.fb4a')[0] && fb4[1] === $('div.fb4b')[0]
|
||||
);
|
||||
assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` a class of `fb4a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb4a"));
|
||||
```
|
||||
|
||||
You should give the second new `div` a class of `fb4b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb4b"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -29,253 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -335,7 +98,9 @@ assert(
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb4"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
@ -345,15 +110,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -362,20 +120,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -383,67 +141,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -452,9 +210,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -463,56 +221,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -528,145 +286,76 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b"></div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,18 +7,20 @@ dashedName: part-97
|
||||
|
||||
# --description--
|
||||
|
||||
Give `fb4b` a `width` of `100%` and `height` of `89%`.
|
||||
Give `.fb4b` a `width` of `100%` and `height` of `89%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb4b` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
const fb4b = code.match(/\.fb4b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*100%\s*(;|})/g.test(fb4b) &&
|
||||
/height\s*:\s*89%\s*(;|})/g.test(fb4b)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
|
||||
```
|
||||
|
||||
You should give `.fb4b` a `height` of `89%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -30,253 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -349,15 +105,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -366,20 +115,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -387,67 +136,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -456,9 +205,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -467,56 +216,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -532,150 +281,78 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
--fcc-editable-region--
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b"></div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,20 @@ dashedName: part-98
|
||||
|
||||
# --description--
|
||||
|
||||
Add your `--building-color1` variable as value of the `background-color` property of `fb4b`. Then, remove the `background-color` from `fb4`.
|
||||
Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should remove the `background-color` from `.fb4`.
|
||||
|
||||
```js
|
||||
const fb4 = code.match(/\.fb4\s*{[\s\S]+?[^}]}/g)[0];
|
||||
const fb4b = code.match(/\.fb4b\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
!/background-color/g.test(fb4) &&
|
||||
/background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb4b)
|
||||
);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give `.fb4b` a `background-color` of `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,258 +32,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -355,15 +105,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -372,20 +115,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -393,67 +136,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -462,9 +205,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -473,56 +216,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -538,150 +281,80 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b"></div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@ -7,14 +7,20 @@ dashedName: part-99
|
||||
|
||||
# --description--
|
||||
|
||||
Nest six `div` elements within `fb4b` and give them all a class of `fb4-window`.
|
||||
Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should add six `div` elements within `.fb4b`.
|
||||
|
||||
```js
|
||||
assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
|
||||
```
|
||||
|
||||
You should give each new `div` a class of `fb4-window`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -26,258 +32,7 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -339,7 +94,9 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb4b"></div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
@ -350,15 +107,8 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -367,20 +117,20 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -388,67 +138,67 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -457,9 +207,9 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -468,56 +218,56 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -533,157 +283,81 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b">
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -7,19 +7,26 @@ dashedName: part-100
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
|
||||
Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building.
|
||||
|
||||
# --hints--
|
||||
|
||||
test-text
|
||||
You should give `.fb4-window` a `width` of `30%`.
|
||||
|
||||
```js
|
||||
const fb4w = code.match(/\.fb4-window\s*{[\s\S]+?[^}]}/g)[0];
|
||||
assert(
|
||||
/width\s*:\s*30%\s*(;|})/g.test(fb4w) &&
|
||||
/height\s*:\s*10%\s*(;|})/g.test(fb4w) &&
|
||||
/border-radius\s*:\s*50%\s*(;|})/g.test(fb4w)
|
||||
);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
|
||||
```
|
||||
|
||||
You should give `.fb4-window` a `height` of `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
|
||||
```
|
||||
|
||||
You should give `.fb4-window` a `border-radius` of `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -31,258 +38,7 @@ assert(
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -362,15 +118,8 @@ assert(
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Skyline Project</title>
|
||||
<style>
|
||||
:root {
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
@ -379,20 +128,20 @@ assert(
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -400,67 +149,67 @@ assert(
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -469,9 +218,9 @@ assert(
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -480,56 +229,56 @@ assert(
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
@ -545,163 +294,83 @@ assert(
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.fb4-window {
|
||||
width: 30%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
--fcc-editable-region--
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b">
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user