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
2021-07-16 04:46:40 +01:00
committed by GitHub
parent 885fbe694e
commit ff20199e63
118 changed files with 18924 additions and 41620 deletions

View File

@ -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>
```

View File

@ -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--
```

View File

@ -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>
```

View File

@ -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>

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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--
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
}
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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>
```

View File

@ -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