feat(curriculum): add css-penguin practice project (#44214)
* feat: add css-penguin practice project * rename block name * rename meta block * rename necessary properties * rename page * add to step 25 * adjust prototype with better structure/naming * add step adjusting .ground z-index * fix: add position: absolute to .ground * add to step 37 * add to step 103 * remove erm from solution * add tests to 001-020 * add tests 021-030 * test: update 012 to use dynamic hints * test: improve tests with dynamic hints * fix: add position:relative to .penguin * add tests 032-055 * add tests 056 - 103 * fix some tests * code blocks and test fixes Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> * allow 0% 0px 0 * fix: add width and height step for silly firefox * add instruction to add html element * Tom's good suggestions, and his American suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * adjust wording for - you guessed it - firefox Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * add missing calc keyword * just fix it with regex :( * apply Nich's probably bogus suggestions Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * remove duplicate Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -102,6 +102,7 @@
|
||||
"title": "Learn Typography by Building a Nutrition Label",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"learn-css-transforms-by-building-a-penguin": { "title": "Learn CSS Transforms by Building a Penguin", "intro": ["", ""] },
|
||||
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": ["", ""] },
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": ["", ""] }
|
||||
}
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Learn CSS Transforms by Building a Penguin
|
||||
block: learn-css-transforms-by-building-a-penguin
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn CSS Transforms by Building a Penguin
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -80,9 +80,10 @@
|
||||
"number-guessing-game": "Relational Databases",
|
||||
"learn-accessibility-by-building-a-quiz": "HTML-CSS",
|
||||
"learn-html-forms-by-building-a-registration-form": "HTML-CSS",
|
||||
"learn-css-animation-by-building-a-ferris-wheel": "HTML-CSS",
|
||||
"learn-css-flexbox-by-building-a-photo-gallery": "HTML-CSS",
|
||||
"learn-css-grid-by-building-a-magazine": "HTML-CSS",
|
||||
"learn-css-transforms-by-building-a-penguin": "HTML-CSS",
|
||||
"learn-typography-by-building-a-nutrition-label": "HTML-CSS",
|
||||
"learn-css-animation-by-building-a-ferris-wheel": "HTML-CSS",
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS"
|
||||
}
|
||||
|
||||
@ -0,0 +1,431 @@
|
||||
{
|
||||
"name": "Learn CSS Transforms by Building a Penguin",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-css-transforms-by-building-a-penguin",
|
||||
"order": 47,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"619665c9abd72906f3ad30f9",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"61967e74a8e3690ab6292daa",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"61968df2acd5550bf1616c34",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"61a8fe15a6a31306e60d1e89",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"61968e9243a4090cc805531c",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"61968f8877c6720d6d61aaf5",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"619691693bc14b0e528f5a20",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"6196928658b6010f28c39484",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"6197f667297bb30a552ce017",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"619692ff79f5770fc6d8c0b4",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"6196990f966e8f10a40094f6",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"619699c10a0f6e11591d73c4",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"61969aa6acef5b12200f672e",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"61969c487ced6f12db8fef94",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"61969d66cfcdba137d021558",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"61969e7451455614217e901b",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"6196adc17f77a714d51485f2",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"6196aead7ac7bf1584b17a7f",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"6196ce0415498d2463989e84",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6196cee94c6da1253809dff9",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"6196d00a5d7292262bc02f4c",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"6196d0cda039d026f7f78d1e",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"6196d1ac33c68d27dcda5796",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"6196d213d99f16287bff22ae",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"6196d2c0f22ca0293107c048",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"6196d32d1340d829f0f6f57d",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"6196d41d40bf9b2aaea5d520",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"6197cff995d03905b0cca8ad",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"6197f40a16afea068c7e60c8",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"61993b72e874e709b8dfd666",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"61993cf26a8e0f0a553db223",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"61993dbb35adf30b10d49e38",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"61993e9adc9e9a0bb4d28fff",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"6199409834ccaf0d10736596",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"6199429802b7c10dc79ff871",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"619943285a41720e6370d985",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"619943876b706d0f35c01dbc",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"6199442866286d0ff421a4fc",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"619bcf239fc15905ecd66fce",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"619be73b3c806006ccc00bb0",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"619be7af7b0bf60770f5d2a4",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"619be80062551a080e32c821",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"619be8ce4ea49008c5bfbc30",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"619be946958c6009844f1dee",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"619c155df0063a0a3fec0e32",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"619c16debd0c270b01c5ce38",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"619cfdf2e63ddf05feab86ad",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"619d019488f98c06acbbb71a",
|
||||
"Step 48"
|
||||
],
|
||||
[
|
||||
"619d022dc8400c0763829a17",
|
||||
"Step 49"
|
||||
],
|
||||
[
|
||||
"619d02c7bc95bf0827a5d296",
|
||||
"Step 50"
|
||||
],
|
||||
[
|
||||
"619d033915012509031f309a",
|
||||
"Step 51"
|
||||
],
|
||||
[
|
||||
"619d03dadadb6509a16f4f5f",
|
||||
"Step 52"
|
||||
],
|
||||
[
|
||||
"619d0503e03a790a4179d463",
|
||||
"Step 53"
|
||||
],
|
||||
[
|
||||
"619d05c54dabca0b10058235",
|
||||
"Step 54"
|
||||
],
|
||||
[
|
||||
"619d0882f54bf40bdc4671ed",
|
||||
"Step 55"
|
||||
],
|
||||
[
|
||||
"619d090cd8d6db0c93dc5087",
|
||||
"Step 56"
|
||||
],
|
||||
[
|
||||
"619d0b51ca42ed0d74582186",
|
||||
"Step 57"
|
||||
],
|
||||
[
|
||||
"619d0bc9cb05360e1bf549c3",
|
||||
"Step 58"
|
||||
],
|
||||
[
|
||||
"619d0c1594c38c0ebae75878",
|
||||
"Step 59"
|
||||
],
|
||||
[
|
||||
"619d0d18ca99870f884a7bff",
|
||||
"Step 60"
|
||||
],
|
||||
[
|
||||
"619d0daf214542102739b0da",
|
||||
"Step 61"
|
||||
],
|
||||
[
|
||||
"619d0e56f9ca9710fcb974e3",
|
||||
"Step 62"
|
||||
],
|
||||
[
|
||||
"619d0eec0ac40611b41e2ccc",
|
||||
"Step 63"
|
||||
],
|
||||
[
|
||||
"619d0fc9825c271253df28d4",
|
||||
"Step 64"
|
||||
],
|
||||
[
|
||||
"619d102d786c3d13124c37c6",
|
||||
"Step 65"
|
||||
],
|
||||
[
|
||||
"619d107edf7ddf13cc77106a",
|
||||
"Step 66"
|
||||
],
|
||||
[
|
||||
"619d10cc98145f14820399c5",
|
||||
"Step 67"
|
||||
],
|
||||
[
|
||||
"619d115e2adcd71538e82ebb",
|
||||
"Step 68"
|
||||
],
|
||||
[
|
||||
"619d11e6d5ef9515d2a16033",
|
||||
"Step 69"
|
||||
],
|
||||
[
|
||||
"619d129a417d0716a94de913",
|
||||
"Step 70"
|
||||
],
|
||||
[
|
||||
"619d1340361095175f4b5115",
|
||||
"Step 71"
|
||||
],
|
||||
[
|
||||
"619d15797b580c1828b05426",
|
||||
"Step 72"
|
||||
],
|
||||
[
|
||||
"619d15d955d9d418c4487bbc",
|
||||
"Step 73"
|
||||
],
|
||||
[
|
||||
"619d1629a8adc61960ca8b40",
|
||||
"Step 74"
|
||||
],
|
||||
[
|
||||
"619d1c5fc9f8941a400955da",
|
||||
"Step 75"
|
||||
],
|
||||
[
|
||||
"619d1dab9ff3421ae1976991",
|
||||
"Step 76"
|
||||
],
|
||||
[
|
||||
"619d1deb8b04811b8839ffe4",
|
||||
"Step 77"
|
||||
],
|
||||
[
|
||||
"619d1e7a8e81a61c5a819dc4",
|
||||
"Step 78"
|
||||
],
|
||||
[
|
||||
"619d1ed33c9a071cf657a0d6",
|
||||
"Step 79"
|
||||
],
|
||||
[
|
||||
"619d1fb5d244c31db8a7fdb7",
|
||||
"Step 80"
|
||||
],
|
||||
[
|
||||
"619d204bd73ae51e743b8e94",
|
||||
"Step 81"
|
||||
],
|
||||
[
|
||||
"619d20b12996101f430920fb",
|
||||
"Step 82"
|
||||
],
|
||||
[
|
||||
"619d21fe6a3f9b2016be9d9d",
|
||||
"Step 83"
|
||||
],
|
||||
[
|
||||
"619d229b0e542520cd91c685",
|
||||
"Step 84"
|
||||
],
|
||||
[
|
||||
"619d23089e787e216a7043d6",
|
||||
"Step 85"
|
||||
],
|
||||
[
|
||||
"619d237a107c10221ed743fa",
|
||||
"Step 86"
|
||||
],
|
||||
[
|
||||
"619d26b12e651022d80cd017",
|
||||
"Step 87"
|
||||
],
|
||||
[
|
||||
"619d2712853306238f41828e",
|
||||
"Step 88"
|
||||
],
|
||||
[
|
||||
"619d2b7a84e78b246f2d17a2",
|
||||
"Step 89"
|
||||
],
|
||||
[
|
||||
"619d2bd9c1d43c2526e96f1f",
|
||||
"Step 90"
|
||||
],
|
||||
[
|
||||
"619d2d4e80400325ff89664a",
|
||||
"Step 91"
|
||||
],
|
||||
[
|
||||
"619d2ebc81ba81271460850d",
|
||||
"Step 92"
|
||||
],
|
||||
[
|
||||
"619d2f0e9440bc27caee1cec",
|
||||
"Step 93"
|
||||
],
|
||||
[
|
||||
"619d2fd3ff4f772882e3d998",
|
||||
"Step 94"
|
||||
],
|
||||
[
|
||||
"619d30350883802921bfcccc",
|
||||
"Step 95"
|
||||
],
|
||||
[
|
||||
"619d324f5915c929f36ae91d",
|
||||
"Step 96"
|
||||
],
|
||||
[
|
||||
"619d32c7fa21f32aaa91d499",
|
||||
"Step 97"
|
||||
],
|
||||
[
|
||||
"619d333b738e3c2b5d58b095",
|
||||
"Step 98"
|
||||
],
|
||||
[
|
||||
"619d337765b9f02c10e93722",
|
||||
"Step 99"
|
||||
],
|
||||
[
|
||||
"619d33c51140292cc5a21742",
|
||||
"Step 100"
|
||||
],
|
||||
[
|
||||
"619d3482f505452d861d0f62",
|
||||
"Step 101"
|
||||
],
|
||||
[
|
||||
"619d3561a951bf2e41a24f10",
|
||||
"Step 102"
|
||||
],
|
||||
[
|
||||
"619d36103839c82efa95dd34",
|
||||
"Step 103"
|
||||
],
|
||||
[
|
||||
"619d3711d04d623000013e9e",
|
||||
"Step 104"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 619665c9abd72906f3ad30f9
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You will be building a happy Flappy Penguin, and further exploring CSS transforms and animations in the process.
|
||||
|
||||
Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, `html` element, the appropriate `meta` tags, a `head`, `body`, and `title` element. Also, link your stylesheet to the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `<!DOCTYPE html>` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE html>/i));
|
||||
```
|
||||
|
||||
Your code should have an `html` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('html')?.length, 1);
|
||||
```
|
||||
|
||||
Your code should have a `head` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('head')?.length, 1);
|
||||
```
|
||||
|
||||
Your code should have a `body` element within the `html` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body')?.length, 1);
|
||||
```
|
||||
|
||||
Your `head` element should come before your `body` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD');
|
||||
```
|
||||
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert.equal(meta?.length, 2);
|
||||
```
|
||||
|
||||
One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
The other `meta` element should have the `charset` attribute set to `UTF-8`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your `title` should have some text.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.isAtLeast(title?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
assert(/<link/.test(code))
|
||||
```
|
||||
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have a `type` attribute with the value `text/css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 61967e74a8e3690ab6292daa
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `body` element selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /body\s*\{/);
|
||||
```
|
||||
|
||||
You should use the `background` property in the `body` selector.
|
||||
|
||||
```js
|
||||
assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
|
||||
```
|
||||
|
||||
You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: 61968df2acd5550bf1616c34
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Normalise your page's sizing, by removing the `body` element's `margin` and `padding`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `body` a `margin` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
|
||||
```
|
||||
|
||||
You should give `body` a `padding` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 61a8fe15a6a31306e60d1e89
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Normalise your page, by setting the `width` to `100%`, and `height` to `100vh`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 61968e9243a4090cc805531c
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove both the horizontal and vertical scrollbars, and prevent programmatic scrolling, using only one property.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `body` an `overflow` of `clip`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'clip');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 61968f8877c6720d6d61aaf5
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `body`, add a `div` with a `class` of `ground`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `div`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div'));
|
||||
```
|
||||
|
||||
You should give the `div` a `class` of `ground`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('div')?.className, 'ground');
|
||||
```
|
||||
|
||||
You should place the `div` within the `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > div.ground'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 619691693bc14b0e528f5a20
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.ground` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.ground\s*\{/);
|
||||
```
|
||||
|
||||
You should give the `.ground` element a `width` of `100vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
|
||||
```
|
||||
|
||||
You should give the `.ground` element a `height` of `400px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 6196928658b6010f28c39484
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 6197f667297bb30a552ce017
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.ground` a `z-index` of `3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
|
||||
```
|
||||
|
||||
You should give `.ground` a `position` of `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 619692ff79f5770fc6d8c0b4
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `div` within the `body`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body > div')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the `div` a `class` of `penguin`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
|
||||
```
|
||||
|
||||
You should place `div.penguin` before `div.ground`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 6196990f966e8f10a40094f6
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.penguin` element, and set its `width` and `height` to `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.penguin` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.penguin` a `width` of `300px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
|
||||
```
|
||||
|
||||
You should give `.penguin` a `height` of `300px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 619699c10a0f6e11591d73c4
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginBottom, 'auto');
|
||||
```
|
||||
|
||||
You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 61969aa6acef5b12200f672e
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To create some scenery in the background, you will add two mountains.
|
||||
|
||||
Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body > div')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the `div` a `class` of `left-mountain`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
|
||||
```
|
||||
|
||||
You should place `.left-mountain` before `.penguin`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 61969c487ced6f12db8fef94
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.left-mountain` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.left-mountain\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
|
||||
```
|
||||
|
||||
You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
|
||||
```
|
||||
|
||||
You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 61969d66cfcdba137d021558
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 61969e7451455614217e901b
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
|
||||
|
||||
Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.left-mountain` a `transform` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
|
||||
```
|
||||
|
||||
You should use the `skew` function on `transform`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
|
||||
```
|
||||
|
||||
You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 6196adc17f77a714d51485f2
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `z-index` property to change the stack level.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
|
||||
```
|
||||
|
||||
You should set the `z-index` property to `2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
|
||||
```
|
||||
|
||||
You should not change the `z-index` of the `.ground` element.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 6196aead7ac7bf1584b17a7f
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.left-mountain` a `margin-top` of `100px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
|
||||
```
|
||||
|
||||
You should give `.ground` a `margin-top` of `-58px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 6196ce0415498d2463989e84
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `div` within `body`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body > div')?.length, 4);
|
||||
```
|
||||
|
||||
You should give the `div` a `class` of `back-mountain`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
|
||||
```
|
||||
|
||||
You should place `.back-mountain` after `.left-mountain`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 6196cee94c6da1253809dff9
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.back-mountain` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.back-mountain\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `width` of `300px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `height` of `300px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 6196d00a5d7292262bc02f4c
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.back-mountain` a `position` of `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 6196d0cda039d026f7f78d1e
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `z-index` property to change the stack level.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
|
||||
```
|
||||
|
||||
You should set the `z-index` property to `1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
|
||||
```
|
||||
|
||||
You should not change the `z-index` of the `.left-mountain` element.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 6196d1ac33c68d27dcda5796
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `transform` property to rotate the element.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform);
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)');
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `left` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `top` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
|
||||
```
|
||||
|
||||
You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 6196d213d99f16287bff22ae
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body > div')?.length, 5);
|
||||
```
|
||||
|
||||
You should give the new `div` element a `class` of `sun`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
|
||||
```
|
||||
|
||||
You should place the new `div` element immediately after the `.back-mountain` element.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 6196d2c0f22ca0293107c048
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.sun` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.sun\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.sun` a `width` of `200px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
|
||||
```
|
||||
|
||||
You should give `.sun` a `height` of `200px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
|
||||
```
|
||||
|
||||
You should give `.sun` a `background-color` of `yellow`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 6196d32d1340d829f0f6f57d
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.sun` a `position` of `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
|
||||
```
|
||||
|
||||
You should give `.sun` a `border-radius` of `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 6196d41d40bf9b2aaea5d520
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
|
||||
```
|
||||
|
||||
You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin"></div>
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 6197cff995d03905b0cca8ad
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your penguin will consist of two main sections: the head, and the body.
|
||||
|
||||
Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first `div` a `class` of `penguin-head`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
|
||||
```
|
||||
|
||||
You should give the second `div` a `class` of `penguin-body`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 6197f40a16afea068c7e60c8
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `z-index` property to change the stack level.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
|
||||
```
|
||||
|
||||
You should give the `.penguin` element a `z-index` of `4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
|
||||
```
|
||||
|
||||
You should give `.penguin` a `position` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
|
||||
```
|
||||
|
||||
You should give `.penguin` a `position` of `relative`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 61993b72e874e709b8dfd666
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.penguin-head` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin-head\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.penguin-head` a `width` of `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
|
||||
```
|
||||
|
||||
You should give `.penguin-head` a `height` of `45%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
|
||||
```
|
||||
|
||||
You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 61993cf26a8e0f0a553db223
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
_Most_ penguins do not have a square head.
|
||||
|
||||
Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
|
||||
|
||||
```js
|
||||
// Maybe check for individual border-radius properties?
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 61993dbb35adf30b10d49e38
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.penguin-body` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin-body\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
|
||||
```
|
||||
|
||||
You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
|
||||
```
|
||||
|
||||
You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 61993e9adc9e9a0bb4d28fff
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Another interesting fact about penguins is that they do not have square bodies.
|
||||
|
||||
Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 6199409834ccaf0d10736596
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.penguin *` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin\s*\*\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.penguin *` a `position` of `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 6199429802b7c10dc79ff871
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-head` a `top` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
|
||||
```
|
||||
|
||||
You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
|
||||
```
|
||||
|
||||
You should give `.penguin-head` a `left` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
|
||||
```
|
||||
|
||||
You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 619943285a41720e6370d985
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-body` a `top` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
|
||||
```
|
||||
|
||||
You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
|
||||
```
|
||||
|
||||
You should give `.penguin-body` a `left` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
|
||||
```
|
||||
|
||||
You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 619943876b706d0f35c01dbc
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `z-index` property to change the stack level.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
|
||||
```
|
||||
|
||||
You should give the `.penguin-head` element a `z-index` of `1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 6199442866286d0ff421a4fc
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.penguin-body::before` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.penguin-body::before\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.penguin-body::before` a `content` of `""`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 619bcf239fc15905ecd66fce
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the pseudo-element relative to its closest positioned ancestor.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-body::before` a `position` of `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,158 @@
|
||||
---
|
||||
id: 619be73b3c806006ccc00bb0
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the pseudo-element a `width` half that of its parent, a `height` of `40%`, and a `background-color` of `gray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-body::before` a `width` of `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
|
||||
```
|
||||
|
||||
You should give `.penguin-body::before` a `height` of `40%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '40%');
|
||||
```
|
||||
|
||||
You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 619be7af7b0bf60770f5d2a4
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
|
||||
```
|
||||
|
||||
You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 619be80062551a080e32c821
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `border-radius` property to round off the crest.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
|
||||
```
|
||||
|
||||
You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 619be8ce4ea49008c5bfbc30
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Increase the psuedo-element's transparency by `30%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.penguin-body::before` an `opacity` of `70%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head"></div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,166 @@
|
||||
---
|
||||
id: 619be946958c6009844f1dee
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
|
||||
```
|
||||
|
||||
You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-head">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,193 @@
|
||||
---
|
||||
id: 619c155df0063a0a3fec0e32
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.face` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.face\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.face` a `width` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
|
||||
```
|
||||
|
||||
You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
|
||||
```
|
||||
|
||||
You should give `.face` a `height` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
|
||||
```
|
||||
|
||||
You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
|
||||
```
|
||||
|
||||
You should give `.face` a `background-color` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face"></div>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 619c16debd0c270b01c5ce38
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.face` a `border-radius` of `70% 70% 60% 60%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face"></div>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,169 @@
|
||||
---
|
||||
id: 619cfdf2e63ddf05feab86ad
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.face` elements so that they are `15%` from the top.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.face` a `top` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
|
||||
```
|
||||
|
||||
You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face"></div>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,171 @@
|
||||
---
|
||||
id: 619d019488f98c06acbbb71a
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Currently, the two `.face` elements are on top of each other.
|
||||
|
||||
Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give a `class` of `left` to the first `.face` element.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
|
||||
```
|
||||
|
||||
You should give a `class` of `right` to the second `.face` element.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-head">
|
||||
<div class="face"></div>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,177 @@
|
||||
---
|
||||
id: 619d022dc8400c0763829a17
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.face` element with the `left` class, and position it `5%` left of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.face.left` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.face\.left\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.face.left` a `left` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
|
||||
```
|
||||
|
||||
You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 619d02c7bc95bf0827a5d296
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.face` element with the `right` class, and position it `5%` right of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.face.right` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.face\.right\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.face.right` a `right` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
|
||||
```
|
||||
|
||||
You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 619d033915012509031f309a
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `.face.right` element, add a `div` element with a `class` of `chin`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the `div` a `class` of `chin`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.chin'));
|
||||
```
|
||||
|
||||
You should place the `div` element below the `.face.right` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.face.right + .chin'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 619d03dadadb6509a16f4f5f
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.chin` element, and give it a `width` of `90%`, height of `70%`, and `background-color` of `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.chin` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.chin\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.chin` a `width` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
|
||||
```
|
||||
|
||||
You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
|
||||
```
|
||||
|
||||
You should give `.chin` a `height` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
|
||||
```
|
||||
|
||||
You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
|
||||
```
|
||||
|
||||
You should give `.chin` a `background-color` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,206 @@
|
||||
---
|
||||
id: 619d0503e03a790a4179d463
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.chin` a `top` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
|
||||
```
|
||||
|
||||
You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
|
||||
```
|
||||
|
||||
You should give `.chin` a `left` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
|
||||
```
|
||||
|
||||
You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
|
||||
```
|
||||
|
||||
You should give `.chin` a `border-radius` of `70% 70% 100% 100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,197 @@
|
||||
---
|
||||
id: 619d05c54dabca0b10058235
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
So far, the `.face` and `.chin` elements have the same `background-color`.
|
||||
|
||||
Create a custom CSS property called `--penguin-face`, and set it to `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `:root` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /:root\s*\{/);
|
||||
```
|
||||
|
||||
You should give `:root` a `--penguin-face` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
|
||||
```
|
||||
|
||||
You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,197 @@
|
||||
---
|
||||
id: 619d0882f54bf40bdc4671ed
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Where relevant, replace property values with your `--penguin-face` variable.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.face` a `background-color` of `var(--penguin-face)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
|
||||
```
|
||||
|
||||
You should give `.chin` a `background-color` of `var(--penguin-face)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
|
||||
```
|
||||
|
||||
You should not use `var(--penguin-face)` in the `.penguin-body` selector.
|
||||
|
||||
```js
|
||||
assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: white;
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 619d090cd8d6db0c93dc5087
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `eye`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.eye'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `eye`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.eye.left'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `right`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.eye.right'));
|
||||
```
|
||||
|
||||
You should place `div.eye.left` after `div.chin`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.chin + .eye.left'));
|
||||
```
|
||||
|
||||
You should place `div.eye.right` after `div.eye.left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.eye.left + .eye.right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 619d0b51ca42ed0d74582186
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.eye` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
|
||||
```
|
||||
|
||||
You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
|
||||
```
|
||||
|
||||
You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 619d0bc9cb05360e1bf549c3
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
|
||||
```
|
||||
|
||||
You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 619d0c1594c38c0ebae75878
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.eye.left` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye\.left\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
|
||||
```
|
||||
|
||||
You should use the `.eye.right` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye\.right\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left"></div>
|
||||
<div class="eye right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 619d0d18ca99870f884a7bff
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within each `.eye` element, add a `div` with a `class` of `eye-lid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add one `div` element within `.eye.left`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
|
||||
```
|
||||
|
||||
You should add one `div` element within `.eye.right`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `eye-lid`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.eye.left > div.eye-lid'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `eye-lid`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.eye.right > div.eye-lid'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
|
||||
</div>
|
||||
<div class="eye right">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 619d0daf214542102739b0da
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.eye-lid` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.eye-lid\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
|
||||
```
|
||||
|
||||
You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
|
||||
```
|
||||
|
||||
You should give `.eye-lid` a `background-color` of `var(--penguin-face)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 619d0e56f9ca9710fcb974e3
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
|
||||
```
|
||||
|
||||
You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
|
||||
```
|
||||
|
||||
You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,247 @@
|
||||
---
|
||||
id: 619d0eec0ac40611b41e2ccc
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `blush`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.blush'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `blush`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.blush.left'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `right`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.blush.right'));
|
||||
```
|
||||
|
||||
You should place `.blush.right` after `.blush.left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.blush.left + .blush.right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,238 @@
|
||||
---
|
||||
id: 619d0fc9825c271253df28d4
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.blush` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.blush\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
|
||||
```
|
||||
|
||||
You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
|
||||
```
|
||||
|
||||
You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 619d102d786c3d13124c37c6
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
|
||||
```
|
||||
|
||||
You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,246 @@
|
||||
---
|
||||
id: 619d107edf7ddf13cc77106a
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.blush.left` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.blush\.left\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
|
||||
```
|
||||
|
||||
You should use the `.blush.right` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.blush\.right\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,271 @@
|
||||
---
|
||||
id: 619d10cc98145f14820399c5
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `beak`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.beak'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `beak`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `top`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.beak.top'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `bottom`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
|
||||
```
|
||||
|
||||
You should place `div.beak.top` after `div.blush.right`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.blush.right + .beak.top'));
|
||||
```
|
||||
|
||||
You should place `div.beak.bottom` after `div.beak.top`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.beak.top + .beak.bottom'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,256 @@
|
||||
---
|
||||
id: 619d115e2adcd71538e82ebb
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.beak` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.beak\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
|
||||
```
|
||||
|
||||
You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
|
||||
```
|
||||
|
||||
You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 619d11e6d5ef9515d2a16033
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.beak.top` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.beak\.top\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
|
||||
```
|
||||
|
||||
You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
|
||||
```
|
||||
|
||||
You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,267 @@
|
||||
---
|
||||
id: 619d129a417d0716a94de913
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.beak.bottom` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.beak\.bottom\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
|
||||
```
|
||||
|
||||
You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
|
||||
```
|
||||
|
||||
You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,267 @@
|
||||
---
|
||||
id: 619d1340361095175f4b5115
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the new `div` a `class` of `shirt`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin > div.shirt'));
|
||||
```
|
||||
|
||||
You should place the new `div` before `.penguin-body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.shirt + .penguin-body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,263 @@
|
||||
---
|
||||
id: 619d15797b580c1828b05426
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `.shirt` element, add a `div` with the following emoji as content: 💜
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the new `div` a content of `💜`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="shirt">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,264 @@
|
||||
---
|
||||
id: 619d15d955d9d418c4487bbc
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add one `p` element within `.shirt`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the `p` element the content `I CSS`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,278 @@
|
||||
---
|
||||
id: 619d1629a8adc61960ca8b40
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.shirt` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.shirt\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
|
||||
```
|
||||
|
||||
You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
|
||||
```
|
||||
|
||||
You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 619d1c5fc9f8941a400955da
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you look closely, the _heart_ emoji is slightly different. This is because some of the character's properties were overridden by the `font-weight` style of `bold`.
|
||||
|
||||
Fix this, by targetting the `div` with the heart emoji, and setting its `font-weight` to its original value.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.shirt div` selector to target the `div` with the heart emoji.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.shirt div\s*\{/);
|
||||
```
|
||||
|
||||
You should give the `.shirt div` a `font-weight` of `initial` or `normal`.
|
||||
|
||||
```js
|
||||
assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,273 @@
|
||||
---
|
||||
id: 619d1dab9ff3421ae1976991
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `div` with the heart emoji `11.5px` from the top, and `12px` from the left of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '11.5px');
|
||||
```
|
||||
|
||||
You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,281 @@
|
||||
---
|
||||
id: 619d1deb8b04811b8839ffe4
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
|
||||
```
|
||||
|
||||
You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
|
||||
```
|
||||
|
||||
You should give the `.shirt` element a `z-index` of `1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 619d1e7a8e81a61c5a819dc4
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the shirt's final touch, set the `color` to `#6a6969`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.shirt` a `color` of `#6a6969`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body"></div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,306 @@
|
||||
---
|
||||
id: 619d1ed33c9a071cf657a0d6
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Fun fact: Penguins cannot stand without at least two feet.
|
||||
|
||||
Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `foot`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.foot'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `foot`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
|
||||
```
|
||||
|
||||
You should give one `div` a `class` of `left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.foot.left'));
|
||||
```
|
||||
|
||||
You should give the other `div` a `class` of `right`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.foot.right'));
|
||||
```
|
||||
|
||||
You should place `.foot.right` after `.foot.left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.foot.left + .foot.right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 619d1fb5d244c31db8a7fdb7
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.foot` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.foot\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
|
||||
```
|
||||
|
||||
You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
|
||||
```
|
||||
|
||||
You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,288 @@
|
||||
---
|
||||
id: 619d204bd73ae51e743b8e94
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
|
||||
```
|
||||
|
||||
You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: orange;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 619d20b12996101f430920fb
|
||||
title: Step 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The penguin's beak and feet share the same `color`.
|
||||
|
||||
Create a new custom CSS variable named `--penguin-picorna`, and replace all relavant property values with it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `:root` a `--penguin-picorna` property.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
|
||||
```
|
||||
|
||||
You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
|
||||
```
|
||||
|
||||
You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
|
||||
```
|
||||
|
||||
You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: orange;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: orange;
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,304 @@
|
||||
---
|
||||
id: 619d21fe6a3f9b2016be9d9d
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.foot.left` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.foot\.left\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
|
||||
```
|
||||
|
||||
You should use the `.foot.right` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.foot\.right\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,300 @@
|
||||
---
|
||||
id: 619d229b0e542520cd91c685
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.foot.left` a `transform` of `rotate(80deg)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)');
|
||||
```
|
||||
|
||||
You should give `.foot.right` a `transform` of `rotate(-80deg)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,295 @@
|
||||
---
|
||||
id: 619d23089e787e216a7043d6
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,328 @@
|
||||
---
|
||||
id: 619d237a107c10221ed743fa
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Fun fact: Penguins cannot fly without wings.
|
||||
|
||||
Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
|
||||
```
|
||||
|
||||
You should give the first new `div` a `class` of `arm`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.arm'));
|
||||
```
|
||||
|
||||
You should give the second new `div` a `class` of `arm`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
|
||||
```
|
||||
|
||||
You should give one `div` a `class` of `left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.arm.left'));
|
||||
```
|
||||
|
||||
You should give the other `div` a `class` of `right`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.penguin-body > div.arm.right'));
|
||||
```
|
||||
|
||||
You should place `.arm.right` after `.arm.left`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.arm.left + .arm.right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="penguin-body">
|
||||
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,317 @@
|
||||
---
|
||||
id: 619d26b12e651022d80cd017
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.arm` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.arm\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
|
||||
```
|
||||
|
||||
You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
|
||||
```
|
||||
|
||||
You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,332 @@
|
||||
---
|
||||
id: 619d2712853306238f41828e
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `:root` a `--penguin-skin` property.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
|
||||
```
|
||||
|
||||
You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
|
||||
```
|
||||
|
||||
You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
|
||||
```
|
||||
|
||||
You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
|
||||
```
|
||||
|
||||
You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
gray,
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: gray;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
gray,
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 619d2b7a84e78b246f2d17a2
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.arm.left` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.arm\.left\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
|
||||
```
|
||||
|
||||
You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
|
||||
```
|
||||
|
||||
You should use the `.arm.right` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /\.arm\.right\s*\{/);
|
||||
```
|
||||
|
||||
You should give `.arm.right` a `top` of `0%`.
|
||||
|
||||
```js
|
||||
assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
|
||||
```
|
||||
|
||||
You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,325 @@
|
||||
---
|
||||
id: 619d2bd9c1d43c2526e96f1f
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `transform-origin` property to do this.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
|
||||
```
|
||||
|
||||
You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`.
|
||||
|
||||
```js
|
||||
assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
|
||||
}
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,320 @@
|
||||
---
|
||||
id: 619d2d4e80400325ff89664a
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,321 @@
|
||||
---
|
||||
id: 619d2ebc81ba81271460850d
|
||||
title: Step 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the right arm by `45deg` counterclockwise.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.arm.right` a `transform` of `rotate(-45deg)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
}
|
||||
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,327 @@
|
||||
---
|
||||
id: 619d2f0e9440bc27caee1cec
|
||||
title: Step 93
|
||||
challengeType: 0
|
||||
dashedName: step-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Fun fact: Most, if not all, flippers are not naturally rectangles.
|
||||
|
||||
Give the `.arm` elements top -left, -right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.arm` a `border-radius` of `30% 30% 120% 30%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,323 @@
|
||||
---
|
||||
id: 619d2fd3ff4f772882e3d998
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,333 @@
|
||||
---
|
||||
id: 619d30350883802921bfcccc
|
||||
title: Step 95
|
||||
challengeType: 0
|
||||
dashedName: step-95
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, you are going to use CSS animations to make the penguin wave.
|
||||
|
||||
Define a new `@keyframes` named `wave`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should defined a new `@keyframes` rule.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
|
||||
```
|
||||
|
||||
You should give the `@keyframes` rule a `name` of `--fcc-expected--`, but found `--fcc-actual--`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,345 @@
|
||||
---
|
||||
id: 619d324f5915c929f36ae91d
|
||||
title: Step 96
|
||||
challengeType: 0
|
||||
dashedName: step-96
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give `wave` four waypoints starting at `10%`, and incrementing by `10%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `10%` waypoint for `@keyframes wave`.
|
||||
|
||||
```js
|
||||
assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
|
||||
```
|
||||
|
||||
You should add a `20%` waypoint for `@keyframes wave`.
|
||||
|
||||
```js
|
||||
assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
|
||||
```
|
||||
|
||||
You should add a `30%` waypoint for `@keyframes wave`.
|
||||
|
||||
```js
|
||||
assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
|
||||
```
|
||||
|
||||
You should add a `40%` waypoint for `@keyframes wave`.
|
||||
|
||||
```js
|
||||
assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
<title>CSS Penguin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="left-mountain"></div>
|
||||
<div class="back-mountain"></div>
|
||||
<div class="sun"></div>
|
||||
<div class="penguin">
|
||||
<div class="penguin-head">
|
||||
<div class="face left"></div>
|
||||
<div class="face right"></div>
|
||||
<div class="chin"></div>
|
||||
<div class="eye left">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="eye right">
|
||||
<div class="eye-lid"></div>
|
||||
</div>
|
||||
<div class="blush left"></div>
|
||||
<div class="blush right"></div>
|
||||
<div class="beak top"></div>
|
||||
<div class="beak bottom"></div>
|
||||
</div>
|
||||
<div class="shirt">
|
||||
<div>💜</div>
|
||||
<p>I CSS</p>
|
||||
</div>
|
||||
<div class="penguin-body">
|
||||
<div class="arm left"></div>
|
||||
<div class="arm right"></div>
|
||||
<div class="foot left"></div>
|
||||
<div class="foot right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ground"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--penguin-face: white;
|
||||
--penguin-picorna: orange;
|
||||
--penguin-skin: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.left-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
|
||||
position: absolute;
|
||||
transform: skew(0deg, 44deg);
|
||||
z-index: 2;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.back-mountain {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
left: 110px;
|
||||
top: 225px;
|
||||
}
|
||||
|
||||
.sun {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: yellow;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: -75px;
|
||||
right: -75px;
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
margin-top: 75px;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.penguin-head {
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
var(--penguin-skin),
|
||||
rgb(239, 240, 228)
|
||||
);
|
||||
border-radius: 70% 70% 65% 65%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.face {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.face.left {
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.face.right {
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.chin {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.eye {
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
background-color: black;
|
||||
top: 45%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.eye.left {
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
.eye.right {
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.eye-lid {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--penguin-face);
|
||||
top: 25%;
|
||||
left: -23%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush {
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
background-color: pink;
|
||||
top: 65%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush.left {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.blush.right {
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.beak {
|
||||
height: 10%;
|
||||
background-color: var(--penguin-picorna);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak.top {
|
||||
width: 20%;
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.beak.bottom {
|
||||
width: 16%;
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.shirt {
|
||||
font: bold 25px Helvetica, sans-serif;
|
||||
top: 165px;
|
||||
left: 127.5px;
|
||||
z-index: 1;
|
||||
color: #6a6969;
|
||||
}
|
||||
|
||||
.shirt div {
|
||||
font-weight: initial;
|
||||
top: 22.5px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.penguin-body {
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgb(134, 133, 133) 0%,
|
||||
rgb(234, 231, 231) 25%,
|
||||
white 67%
|
||||
);
|
||||
border-radius: 80% 80% 100% 100%;
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
}
|
||||
|
||||
.penguin-body::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
background-color: var(--penguin-skin);
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
border-radius: 0% 0% 100% 100%;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
.arm {
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--penguin-skin),
|
||||
rgb(209, 210, 199)
|
||||
);
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.arm.left {
|
||||
top: 35%;
|
||||
left: 5%;
|
||||
transform-origin: top left;
|
||||
transform: rotate(130deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.arm.right {
|
||||
top: 0%;
|
||||
right: -5%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
@keyframes wave {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.foot {
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
background-color: var(--penguin-picorna);
|
||||
top: 85%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.foot.left {
|
||||
left: 25%;
|
||||
transform: rotate(80deg);
|
||||
}
|
||||
|
||||
.foot.right {
|
||||
right: 25%;
|
||||
transform: rotate(-80deg);
|
||||
}
|
||||
|
||||
.ground {
|
||||
width: 100vw;
|
||||
height: 400px;
|
||||
background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
margin-top: -58px;
|
||||
}
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user