mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-02 02:01:39 -05:00
chore(curriculum): add cat painting workshop (#56732)
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Dario-DC
@@ -2136,7 +2136,13 @@
|
||||
]
|
||||
},
|
||||
"rxzq": { "title": "97", "intro": [] },
|
||||
"xobq": { "title": "98", "intro": [] },
|
||||
"workshop-cat-painting": {
|
||||
"title": "Build a Cat Painting",
|
||||
"intro": [
|
||||
"Mastering CSS positioning is essential for creating visually appealing and responsive web layouts.",
|
||||
"In this workshop, you will build a cat painting. You'll learn about how to work with absolute positioning, the z-index property, and the transform property."
|
||||
]
|
||||
},
|
||||
"lab-house-painting": {
|
||||
"title": "Build a House Painting",
|
||||
"intro": ["For this lab, you will build a house painting using CSS."]
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Introduction to the Build a Cat Painting
|
||||
block: workshop-cat-painting
|
||||
superBlock: front-end-development
|
||||
---
|
||||
|
||||
## Introduction to the Build a Cat Painting
|
||||
|
||||
Mastering CSS positioning is essential for creating visually appealing and responsive web layouts.
|
||||
|
||||
In this workshop, you will build a cat painting. You'll learn about how to work with absolute positioning, the z-index property, and the transform property.
|
||||
334
curriculum/challenges/_meta/workshop-cat-painting/meta.json
Normal file
334
curriculum/challenges/_meta/workshop-cat-painting/meta.json
Normal file
@@ -0,0 +1,334 @@
|
||||
{
|
||||
"name": "Build a Cat Painting",
|
||||
"blockType": "workshop",
|
||||
"blockLayout": "challenge-grid",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "workshop-cat-painting",
|
||||
"order": 98,
|
||||
"superBlock": "front-end-development",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "646c48df8674cf2b91020ecc",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "647d855ac12cd436059acd39",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "646c586be7180e40ddf74ff6",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "646c59e942f35541923104bf",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "646c5d7057c45f432fcdd46c",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "646c5ace05e4be4211407935",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "646c5e727e56e743c9aed4a1",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "6476f5c17f99146071ee884c",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "6476f7a4827bcc61682f2347",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "6476fb7cbaafa36d65e9cf35",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "6476fc5cf14b276e6d04e82a",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "6476fd4213318f6ee211028a",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "64770351e8586671ec0911f0",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "6477062778c85972eb648030",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "649353647c44ef4867ab4935",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "647d821de0d97b3283c72b36",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "646c5ffef5598d449b52ec12",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "646ce8bb4b35544d501c7184",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "646ce9d790d2a44de5f99e04",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "646ceb843412c74edee27a79",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "6676a8b01e56ec1a1e07c202",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "6676a8a8d9861319ee901a90",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "646cecc9eb5c4f4f73dafd07",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "646cef0c2b98915094df7099",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "646cf1206cac5f51804f49cf",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "646cf2249f02ca5233d9af7c",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "646cf48d8f8e1f535a1821d3",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "646cf6cbca98e258da65c979",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "646cf88aa884405a11ea5bcc",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "646cfc2b8e6fe95c20a819d5",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "646cfd853634255d02b64cc1",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "646cfde6ac612e5d60391f50",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "646dd556d524bc61c0139bd6",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "646dd6f9caa862627dd87772",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "646dd7cfd0cfac630c1dd520",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "646dd8c79ec23463a3d0e356",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "646dd9d9a729916460724f16",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "646ddab8afd73764f5241bbf",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "646ddb61ff08366570cc5902",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "646ddd3f9f97a0667b964bdb",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "646dde7dc20dc167489faa69",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "646ddf888632fa67f1180940",
|
||||
"title": "Step 42"
|
||||
},
|
||||
{
|
||||
"id": "646de5dc8988076a1d992afd",
|
||||
"title": "Step 43"
|
||||
},
|
||||
{
|
||||
"id": "646de6a97b50a86ac487de86",
|
||||
"title": "Step 44"
|
||||
},
|
||||
{
|
||||
"id": "646de7b64467e96b7d35b5cd",
|
||||
"title": "Step 45"
|
||||
},
|
||||
{
|
||||
"id": "646de8478d6f796bfbdccfb2",
|
||||
"title": "Step 46"
|
||||
},
|
||||
{
|
||||
"id": "646de8d204a3426c7d184372",
|
||||
"title": "Step 47"
|
||||
},
|
||||
{
|
||||
"id": "646dea1c98c2426d43a705c3",
|
||||
"title": "Step 48"
|
||||
},
|
||||
{
|
||||
"id": "646deb169847f86df0f95bfc",
|
||||
"title": "Step 49"
|
||||
},
|
||||
{
|
||||
"id": "646dec359bef3b7811fba5a6",
|
||||
"title": "Step 50"
|
||||
},
|
||||
{
|
||||
"id": "646dedbcba062079128b2ecc",
|
||||
"title": "Step 51"
|
||||
},
|
||||
{
|
||||
"id": "646def5e863abf7a14501421",
|
||||
"title": "Step 52"
|
||||
},
|
||||
{
|
||||
"id": "646df03c8f79337ab46f148b",
|
||||
"title": "Step 53"
|
||||
},
|
||||
{
|
||||
"id": "646df0cf26413a7b35e4b8b3",
|
||||
"title": "Step 54"
|
||||
},
|
||||
{
|
||||
"id": "646df1d1aa4ae57bdf1869c4",
|
||||
"title": "Step 55"
|
||||
},
|
||||
{
|
||||
"id": "646dffd8ce9ac77ec1906f2e",
|
||||
"title": "Step 56"
|
||||
},
|
||||
{
|
||||
"id": "64a2687ef267e5934a2f93e3",
|
||||
"title": "Step 57"
|
||||
},
|
||||
{
|
||||
"id": "64a26ac5540c5493f4641f10",
|
||||
"title": "Step 58"
|
||||
},
|
||||
{
|
||||
"id": "646f0417322c0e04983a5149",
|
||||
"title": "Step 59"
|
||||
},
|
||||
{
|
||||
"id": "646f08293804a30685533c6f",
|
||||
"title": "Step 60"
|
||||
},
|
||||
{
|
||||
"id": "646f09293eb3230723a62f77",
|
||||
"title": "Step 61"
|
||||
},
|
||||
{
|
||||
"id": "646f0c9a1e3360092d1bbd33",
|
||||
"title": "Step 62"
|
||||
},
|
||||
{
|
||||
"id": "646f0ce5737243098ad6e494",
|
||||
"title": "Step 63"
|
||||
},
|
||||
{
|
||||
"id": "646f0ef13604420a8744f7d4",
|
||||
"title": "Step 64"
|
||||
},
|
||||
{
|
||||
"id": "646f0f7c5933560af8e7e380",
|
||||
"title": "Step 65"
|
||||
},
|
||||
{
|
||||
"id": "646f102bf87b350b593baa72",
|
||||
"title": "Step 66"
|
||||
},
|
||||
{
|
||||
"id": "646f107abb89d00bb99f387a",
|
||||
"title": "Step 67"
|
||||
},
|
||||
{
|
||||
"id": "64a3bcbc83e574b58c8ed048",
|
||||
"title": "Step 68"
|
||||
},
|
||||
{
|
||||
"id": "646f12da0b4c5d0ca162834a",
|
||||
"title": "Step 69"
|
||||
},
|
||||
{
|
||||
"id": "646f135eab69d90d0c6d4e9b",
|
||||
"title": "Step 70"
|
||||
},
|
||||
{
|
||||
"id": "646f159b2cffb21150b927cb",
|
||||
"title": "Step 71"
|
||||
},
|
||||
{
|
||||
"id": "646f164bf100dd11d226161f",
|
||||
"title": "Step 72"
|
||||
},
|
||||
{
|
||||
"id": "646f1764e2f1d212ba9785a7",
|
||||
"title": "Step 73"
|
||||
},
|
||||
{
|
||||
"id": "646f1802a09a171332e14630",
|
||||
"title": "Step 74"
|
||||
},
|
||||
{
|
||||
"id": "646f4d6c42dc5f214f4e7444",
|
||||
"title": "Step 75"
|
||||
},
|
||||
{
|
||||
"id": "646f4e46e81f7021d5fd9c1d",
|
||||
"title": "Step 76"
|
||||
},
|
||||
{
|
||||
"id": "646f4f6a14e3c522d130a0d2",
|
||||
"title": "Step 77"
|
||||
},
|
||||
{
|
||||
"id": "646f4fe12b7985232bf475a5",
|
||||
"title": "Step 78"
|
||||
},
|
||||
{
|
||||
"id": "646f507e4d1cd323f17db4fc",
|
||||
"title": "Step 79"
|
||||
},
|
||||
{
|
||||
"id": "646f516dbfc1342495515625",
|
||||
"title": "Step 80"
|
||||
}
|
||||
],
|
||||
"helpCategory": "HTML-CSS"
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 646c48df8674cf2b91020ecc
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You have been provided with a basic boilerplate. Begin by adding a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your should have a `link` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("head>link"));
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` and `href` attribute set to `stylesheet` and `./styles.css`.
|
||||
|
||||
```js
|
||||
const link = document.querySelector("head>link");
|
||||
assert.equal(link?.getAttribute("rel"), "stylesheet");
|
||||
const href = link?.getAttribute("data-href");
|
||||
console.log(href)
|
||||
assert(href === "./styles.css" || href === "styles.css");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 646c586be7180e40ddf74ff6
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `body` element a `background-color` of `#c9d2fc`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `body` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Your `body` selector should have a `background-color` property set to `#c9d2fc`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(201, 210, 252)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 646c59e942f35541923104bf
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Back in your HTML, create a `main` element. Inside that `main` element, add a `div` element with the class `cat-head`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `main` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('main').length === 1);
|
||||
```
|
||||
|
||||
You should have a `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-head`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.getAttribute('class') === 'cat-head');
|
||||
```
|
||||
|
||||
Your `div` element should be inside your `main` tag.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('main div').length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 646c5ace05e4be4211407935
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To see the `.cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`.
|
||||
|
||||
You might not notice the difference between these two colors, but they are there.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-head` selector should have a `background` property.
|
||||
|
||||
```js
|
||||
assert.match(code, /background:/)
|
||||
```
|
||||
|
||||
Your `background` property should use the `linear-gradient` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /background:\s*linear-gradient\(/)
|
||||
```
|
||||
|
||||
Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`.
|
||||
|
||||
```js
|
||||
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
|
||||
const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1];
|
||||
assert.equal(firstGradient,'(94,94,94)85%,');
|
||||
```
|
||||
|
||||
Your `linear-gradient` function should set the second color to be `#45454f` at `100%`.
|
||||
|
||||
```js
|
||||
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
|
||||
const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2];
|
||||
assert.equal(secondGradient,'(69,69,79)100%)');
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cat-head {
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 646c5d7057c45f432fcdd46c
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, give the `.cat-head` element a width of `205px` and a height of `180px`. Also, give it a border of `1px solid #000` and a `border-radius` of `46%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-head` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `width` set to `205px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px');
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `height` set to `180px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `border` set to `1px solid #000`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `border-radius` set to `46%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%')
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class='cat-head'></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 646c5e727e56e743c9aed4a1
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS positioning lets you set how you want an element to be positioned in the browser. It has a `position` property you can set to `static`, `absolute`, `relative`, `sticky` or `fixed`.
|
||||
|
||||
Once you set the `position` property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the `top`, `right`, `left`, or `bottom` properties.
|
||||
|
||||
`static` is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with `top`, `right`, `left`, or `bottom`.
|
||||
|
||||
Give `.cat-head` a `position` property of `static`, then set the `top` and `left` properties to `100px` each.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-head` selector should have a `position` property set to `static`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'static')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cat-head {
|
||||
|
||||
|
||||
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 646c5ffef5598d449b52ec12
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear.
|
||||
|
||||
Inside your `.cat-head` element, create a `div` element with the class `cat-ears`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-head`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-head').length === 1);
|
||||
```
|
||||
|
||||
You should create one `div` element inside your `.cat-head` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-head div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-ears`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<div class="cat-head">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 646ce8bb4b35544d501c7184
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `.cat-ears` element, create two `div` elements with the classes `cat-left-ear` and `cat-right-ear` respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-ears`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-ears').length === 1);
|
||||
```
|
||||
|
||||
You should create two `div` elements inside your `.cat-ears` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-ears div').length === 2);
|
||||
```
|
||||
|
||||
Your first `div` element should have the class `cat-left-ear`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-ears div')[0]?.classList.contains('cat-left-ear'));
|
||||
```
|
||||
|
||||
Your second `div` element should have the class `cat-right-ear`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-ears div')[1]?.classList.contains('cat-right-ear'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
--fcc-editable-region--
|
||||
<div class="cat-ears">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 646ce9d790d2a44de5f99e04
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create two `div` elements, the first inside the `.cat-left-ear` element with a class of `cat-left-inner-ear`, and the second inside the `.cat-right-ear` element with a class of `cat-right-inner-ear`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-left-ear`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-left-ear').length === 1);
|
||||
```
|
||||
|
||||
You should not change the existing `div` element with the class `cat-right-ear`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-right-ear').length === 1);
|
||||
```
|
||||
|
||||
You should have one `div` element inside your `.cat-left-ear` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-ear div').length === 1);
|
||||
```
|
||||
|
||||
You should have one `div` element inside your `.cat-right-ear` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-right-ear div').length === 1);
|
||||
```
|
||||
|
||||
The new `div` element inside `.cat-left-ear` should have the class `cat-left-inner-ear`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-inner-ear'));
|
||||
```
|
||||
|
||||
The new `div` element inside `.cat-right-ear` should have the class `cat-right-inner-ear`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-right-ear div')[0]?.classList.contains('cat-right-inner-ear'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
--fcc-editable-region--
|
||||
<div class="cat-left-ear">
|
||||
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 646ceb843412c74edee27a79
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to `white`. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-right-ear` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `height` property set to `100px`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `width` property set to `100px`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `background-color` property set to `white`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid blue`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid blue`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid red`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 646cecc9eb5c4f4f73dafd07
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the left ear into position by setting a position of `absolute`, a `top` of `-26px`, and a `left` of `-31px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-left-ear` selector should have a `top` property set to `-26px`
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.top === '-26px')
|
||||
```
|
||||
|
||||
Your `.cat-left-ear` selector should have a `left` property set to `-31px`
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.left === '-31px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cat-left-ear {
|
||||
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 646cef0c2b98915094df7099
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Those edges are too sharp for an ear. So, set the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-ear` selector should have a `border-top-left-radius` property set to `90px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopLeftRadius === '90px')
|
||||
```
|
||||
|
||||
Your `.cat-left-ear` selector should have a `border-top-right-radius` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderTopRightRadius === '10px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 646cf1206cac5f51804f49cf
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To position the left ear properly, you can use CSS transform to rotate it in a certain degree.
|
||||
|
||||
The `transform` property allows you to modify the shape, position, and size of an element without changing the layout or affecting the surrounding elements. It has functions such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`.
|
||||
|
||||
Set the `transform` property to `rotate(-45deg)` and see what happens.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property of your `.cat-left-ear` element to `rotate(-45deg)`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.transform === 'rotate(-45deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 646cf2249f02ca5233d9af7c
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can work on the right ear of the cat. You have the HTML for it already.
|
||||
|
||||
Using a class selector, give the `.cat-right-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-right-ear` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear'))
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 646cf48d8f8e1f535a1821d3
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the right ear into position with a `position` property set to `absolute`, a `top` of `-26px`, and a `left` of `163px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-ear` selector should have a `position` property set to `absolute`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `top` property set to `-26px`
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.top === '-26px')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `left` property set to `163px`
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.left === '163px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 646cf6cbca98e258da65c979
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you did for the left ear, rotate the right ear at 45 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property of your `.cat-right-ear` element to `rotate(45deg)`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 646cf88aa884405a11ea5bcc
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the sharp border of the right ear by setting the `border-top-left-radius` to `90px` and the `border-top-right-radius` to `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-top-left-radius` property set to `90px`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopLeftRadius === '90px')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-top-right-radius` property set to `10px`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTopRightRadius === '10px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
transform: rotate(45deg);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 646cfc2b8e6fe95c20a819d5
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The ears should always be placed above the part of the head it overlaps. You can do this with the `z-index` property.
|
||||
|
||||
`z-index` is a property you can use to define the order of overlapping HTML elements. Any element with a higher `z-index` will always be positioned over an element with a lower `z-index`.
|
||||
|
||||
To see `z-index` in action, set the `z-index` property of the left ear to `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-ear` selector should have a `z-index` of `-1`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '-1')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 646cfd853634255d02b64cc1
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That's not the behavior you want. You should make the ears display over the head so the borders that overlap with them don't show.
|
||||
|
||||
Instead of `-1`, set the `z-index` property of the left ear to `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-ear` selector should have a `z-index` of `1`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.zIndex === '1')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
--fcc-editable-region--
|
||||
z-index: -1;
|
||||
--fcc-editable-region--
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 646cfde6ac612e5d60391f50
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `z-index` property of the right ear to `1` so it always stays over the head.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 646dd556d524bc61c0139bd6
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Most cats have different colors in their ear and the inner part of the same ear. You can implement the same too. That's why you defined a `div` element for both right and left inner ears a while ago.
|
||||
|
||||
Using a class selector, give your `.cat-left-inner-ear` element a left and right border of `20px solid transparent` each. Also give it a bottom border of `40px solid #3b3b4f`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-left-inner-ear` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear'))
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `border-left` property set to `20px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderLeft === '20px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `border-right` property set to `20px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderRight === '20px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 646dd6f9caa862627dd87772
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the inner ear into position with a `position` property set to `absolute`, a `top` of `22px`, and a `left` of `-20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `top` property set to `22px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.top === '22px')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `left` property set to `-20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.left === '-20px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 646dd7cfd0cfac630c1dd520
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To remove all the pointed edges of the ear, set a bottom-right and bottom-left border radius of `40%` each, a top-left border radius of `90px`, and a top-right border radius of `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `border-top-left-radius` property set to `90px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopLeftRadius === '90px')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-ear` selector should have a `border-top-right-radius` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderTopRightRadius === '10px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 646dd8c79ec23463a3d0e356
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to work on the right inner ear. Using a class selector, give your `.cat-right-inner-ear` element a left and right border of `20px solid transparent`. Also, give it a bottom border of `40px solid #3b3b4f`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-right-inner-ear` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear'))
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 646dd9d9a729916460724f16
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the right inner ear into position with a `position` property set to `absolute`, a `top` of `22px` and a `left` of `-20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `top` property set to `22px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.top === '22px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `left` property set to `-20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.left === '-20px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 646ddab8afd73764f5241bbf
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you did for the left inner ear, remove the sharp edges of the right inner ear by setting a bottom-right and bottom-left border radius of `40%`, a top-left border radius of `90px`, and a top-right border radius of `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomRightRadius === '40%')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottomLeftRadius === '40%')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `border-top-left-radius` property set to `90px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopLeftRadius === '90px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-ear` selector should have a `border-top-right-radius` property set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderTopRightRadius === '10px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 646ddb61ff08366570cc5902
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes.
|
||||
|
||||
Create a `div` element with the class `cat-eyes`. Inside the `.cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element with the class `cat-eyes`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-eyes').length === 1);
|
||||
```
|
||||
|
||||
You should create two `div` elements inside the `.cat-eyes` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-eyes div').length === 2);
|
||||
```
|
||||
|
||||
The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye'));
|
||||
```
|
||||
|
||||
The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
id: 646ddd3f9f97a0667b964bdb
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create two `div` elements, one with the class `cat-left-inner-eye` inside the `.cat-left-eye` element and another with the class `cat-right-inner-eye` inside the `.cat-right-eye` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-left-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-left-eye').length === 1);
|
||||
```
|
||||
|
||||
You should not change the existing `div` element with the class `cat-right-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-right-eye').length === 1);
|
||||
```
|
||||
|
||||
You should have one `div` element inside your `.cat-left-eye` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-eye div').length === 1);
|
||||
```
|
||||
|
||||
You should have one `div` element inside your `.cat-right-eye` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-right-eye div').length === 1);
|
||||
```
|
||||
|
||||
The new `div` element inside `.cat-left-eye` should have the class `cat-left-inner-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-inner-eye'));
|
||||
```
|
||||
|
||||
The new `div` element inside `.cat-right-eye` should have the class `cat-right-inner-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-right-eye div')[0]?.classList.contains('cat-right-inner-eye'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
--fcc-editable-region--
|
||||
<div class="cat-left-eye">
|
||||
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 646dde7dc20dc167489faa69
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, give your `.cat-left-eye` element a `width` of `30px` and a `height` of `40px`. Also, give it a `background-color` of `#000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-left-eye` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye'))
|
||||
```
|
||||
|
||||
Your `.cat-left-eye` selector should have a `width` set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.width === '30px')
|
||||
```
|
||||
|
||||
Your `.cat-left-eye` selector should have a `height` set to `40px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.height === '40px')
|
||||
```
|
||||
|
||||
Your `.cat-left-eye` selector should have a `background-color` set to `#000`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.backgroundColor === 'rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 646ddf888632fa67f1180940
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the left eye into position with a `position` property of `absolute`, a `top` of `54px`, and a `left` of `39px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-eye` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-left-eye` selector should have a `top` property set to `54px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.top === '54px')
|
||||
```
|
||||
|
||||
Your `.cat-left-eye` selector should have a `left` property set to `39px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.left === '39px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 646de5dc8988076a1d992afd
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the left eye look like an eye, give it a border radius of `60%`. Also, using the `transform` property, rotate it at `25` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-eye` selector should have a `border-radius` property set to `60%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.borderRadius === '60%')
|
||||
```
|
||||
|
||||
Your `.cat-left-eye` selector should have a `transform` property set to `rotate(25deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-eye')?.transform === 'rotate(25deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
id: 646de6a97b50a86ac487de86
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will work on the right eye by using the same approach.
|
||||
|
||||
Using a class selector, give your `.cat-right-eye` element a width of `30px` and a height of `40px`. Also, give it a background color of `#000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-right-eye` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye'))
|
||||
```
|
||||
|
||||
Your `.cat-right-eye` selector should have a `width` set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.width === '30px')
|
||||
```
|
||||
|
||||
Your `.cat-right-eye` selector should have a `height` set to `40px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.height === '40px')
|
||||
```
|
||||
|
||||
Your `.cat-right-eye` selector should have a `background-color` set to `#000`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.backgroundColor === 'rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 646de7b64467e96b7d35b5cd
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the right eye into position with a `position` property of `absolute`, a `top` of `54px`, and a `left` of `134px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-eye` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-right-eye` selector should have a `top` property set to `54px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.top === '54px')
|
||||
```
|
||||
|
||||
Your `.cat-right-eye` selector should have a `left` property set to `134px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.left === '134px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 646de8478d6f796bfbdccfb2
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the right eye look like an eye, give it a border radius of `60%`. Also, using the `transform` property, rotate it at `-25` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-eye` selector should have a `border-radius` property set to `60%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.borderRadius === '60%')
|
||||
```
|
||||
|
||||
Your `.cat-right-eye` selector should have a `transform` property set to `rotate(-25deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-eye')?.transform === 'rotate(-25deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 646de8d204a3426c7d184372
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Those look like eyes, but you can still make them better. That's why you created two inner eyes `div` elements.
|
||||
|
||||
Using a class selector, give your `.cat-left-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-left-inner-eye` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye'))
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `width` set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.width === '10px')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `height` set to `20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.height === '20px')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `background-color` set to `#fff`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 646dea1c98c2426d43a705c3
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the left inner eye into position with a `position` property of `absolute`, a `top` of `8px`, and a `left` of `2px`. Also, give it a border radius of `60%` and rotate it at `10` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `top` property set to `8px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.top === '8px')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `left` property set to `2px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.left === '2px')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `border-radius` property set to `60%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.borderRadius === '60%')
|
||||
```
|
||||
|
||||
Your `.cat-left-inner-eye` selector should have a `transform` property set to `10deg`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-eye')?.transform === 'rotate(10deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 646deb169847f86df0f95bfc
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, give your `.cat-right-inner-eye` element a width of `10px` and a height of `20px`. Also, give it a background color of `#fff`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-right-inner-eye` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye'))
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `width` set to `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.width === '10px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `height` set to `20px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.height === '20px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `background-color` set to `#fff`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.backgroundColor === 'rgb(255, 255, 255)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
id: 646dec359bef3b7811fba5a6
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the right inner eye into position with a `position` of `absolute`, a `top` of `8px`, and a `left` of `18px`. Also, give it a border radius of `60%` and rotate it at `-5deg`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `top` property set to ` 8px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.top === '8px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `left` property set to `18px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.left === '18px')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `border-radius` property set to `60%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.borderRadius === '60%')
|
||||
```
|
||||
|
||||
Your `.cat-right-inner-eye` selector should have a `transform` property set to `-5deg`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-eye')?.transform === 'rotate(-5deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,186 @@
|
||||
---
|
||||
id: 646dedbcba062079128b2ecc
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to work on the nose. In your HTML, create a `div` element with the class `cat-nose`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 12)
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-nose`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')[11].classList.contains('cat-nose'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 646def5e863abf7a14501421
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, give your `.cat-nose` element a left and right border of `15px solid transparent` each. Also give it a bottom border of `20px solid #442c2c`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-nose` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose'))
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `border-left` property set to `15px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderLeft === '15px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `border-right` property set to `15px solid transparent`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderRight === '15px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `border-bottom` property set to `20px solid #442c2c`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottom === '20px solid rgb(68, 44, 44)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 646df03c8f79337ab46f148b
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the nose into position with a `position` property of `absolute`, a `top` of `108px`, and a `left` of `85px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-nose` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `top` property set to `108px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.top === '108px')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `left` property set to `85px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.left === '85px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 646df0cf26413a7b35e4b8b3
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the sharp edges of the nose with border radius of `50%` each on the top-left, bottom-right, and bottom-left corners. Also, rotate it at 180 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-nose` selector should have a `border-top-left-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderTopLeftRadius === '50%')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `border-bottom-right-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomRightRadius === '50%')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `border-bottom-left-radius` property set to `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.borderBottomLeftRadius === '50%')
|
||||
```
|
||||
|
||||
Your `.cat-nose` selector should have a `transform` property set to `rotate(180deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-nose')?.transform === 'rotate(180deg)')
|
||||
```
|
||||
|
||||
You should not have a `border-top-right-radius` property in your `.cat-nose` selector.
|
||||
|
||||
```js
|
||||
assert(/border-top-right-radius:\s*\d+%;/.test(code) === false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 646df1d1aa4ae57bdf1869c4
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will start working on the mouth. There will be a right line and left line for the mouth.
|
||||
|
||||
Create a `div` element with the class `cat-mouth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 13)
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-mouth`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')[12].classList.contains('cat-mouth'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,217 @@
|
||||
---
|
||||
id: 646dffd8ce9ac77ec1906f2e
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `.cat-mouth` element, create a `div` element with the class `cat-mouth-line-left` and another `div` with the class `cat-mouth-line-right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-mouth`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-mouth').length === 1);
|
||||
```
|
||||
|
||||
You should have two `div` elements inside your `.cat-mouth` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-mouth div').length === 2);
|
||||
```
|
||||
|
||||
The first `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-mouth div')[0]?.classList.contains('cat-mouth-line-left'));
|
||||
```
|
||||
|
||||
The second `div` element inside the `.cat-mouth` element should have the class `cat-mouth-line-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-mouth div')[1]?.classList.contains('cat-mouth-line-right'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
--fcc-editable-region--
|
||||
<div class="cat-mouth">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 646f0417322c0e04983a5149
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, give your `.cat-mouth-line-left` element a `position` of `absolute`, a `top` of `88px` and a `left` of `74px`. This would move it into the right position.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-mouth-line-left` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left'))
|
||||
```
|
||||
|
||||
Your `.cat-mouth-line-left` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-mouth-line-left` selector should have a `top` property set to `88px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.top === '88px')
|
||||
```
|
||||
|
||||
Your `.cat-mouth-line-left` selector should have a `left` property set to `74px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.left === '74px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,214 @@
|
||||
---
|
||||
id: 646f08293804a30685533c6f
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using the `transform` property, rotate the left mouth line at `170` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-mouth-line-left` selector should have a `transform` property set to `rotate(170deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-left')?.transform === 'rotate(170deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,234 @@
|
||||
---
|
||||
id: 646f09293eb3230723a62f77
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Access your `.cat-mouth-line-right` element with a class selector, then move it into the right position with a `position` of `absolute`, a `top` of `88px` and a `left` of `91px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-mouth-line-right` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right'))
|
||||
```
|
||||
|
||||
Your `.cat-mouth-line-right` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-mouth-line-right` selector should have a `top` property set to `88px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.top === '88px')
|
||||
```
|
||||
|
||||
Your `.cat-mouth-line-right` selector should have a `left` property set to `91px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.left === '91px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
id: 646f0c9a1e3360092d1bbd33
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the right mouth line at `165` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-mouth-line-right` selector should have a `transform` property set to `rotate(165deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth-line-right')?.transform === 'rotate(165deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 646f0ce5737243098ad6e494
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last thing you will work on is the whiskers. There are going to be 6 of them, meaning there will be three on each side.
|
||||
|
||||
Create a `div` element with the class `cat-whiskers`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 16)
|
||||
```
|
||||
|
||||
Your div element should have the class `cat-whiskers`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')[15].classList.contains('cat-whiskers'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,243 @@
|
||||
---
|
||||
id: 646f0ef13604420a8744f7d4
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `.cat-whiskers` element, create two `div` elements with the class `cat-whiskers-left` and `cat-whiskers-right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-whiskers`
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-whiskers').length === 1)
|
||||
```
|
||||
|
||||
You should have two `div` elements inside the `.cat-whiskers` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers div').length === 2)
|
||||
```
|
||||
|
||||
The first `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers div')[0].classList.contains('cat-whiskers-left'))
|
||||
```
|
||||
|
||||
The second `div` element inside the `.cat-whiskers` element should have the class `cat-whiskers-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers div')[1].classList.contains('cat-whiskers-right'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
--fcc-editable-region--
|
||||
<div class="cat-whiskers">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 646f0f7c5933560af8e7e380
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `.cat-whiskers-left` element, create three `div` elements with the classes `cat-whisker-left-top`, `cat-whisker-left-middle`, and `cat-whisker-left-bottom`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with class `cat-whiskers-left`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-whiskers-left').length === 1)
|
||||
```
|
||||
|
||||
You should create three `div` elements inside your `.cat-whiskers-left` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-left div').length === 3)
|
||||
```
|
||||
|
||||
The first `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-top`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-left div')[0].classList.contains('cat-whisker-left-top'))
|
||||
```
|
||||
|
||||
The second `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-middle`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-left div')[1].classList.contains('cat-whisker-left-middle'))
|
||||
```
|
||||
|
||||
The third `div` element inside the `.cat-whiskers-left` element should have the class `cat-whisker-left-bottom`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-left div')[2].classList.contains('cat-whisker-left-bottom'))
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
--fcc-editable-region--
|
||||
<div class="cat-whiskers-left">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="cat-whiskers-right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,256 @@
|
||||
---
|
||||
id: 646f102bf87b350b593baa72
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `.cat-whiskers-right` element, create 3 `div` elements with the class `cat-whisker-right-top`, `cat-whisker-right-middle`, and `cat-whisker-right-bottom`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with class `cat-whiskers-right`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-whiskers-right').length === 1)
|
||||
```
|
||||
|
||||
You should create three `div` elements inside your `.cat-whiskers-right` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-right div').length === 3)
|
||||
```
|
||||
|
||||
The first `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-top`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-right div')[0].classList.contains('cat-whisker-right-top'))
|
||||
```
|
||||
|
||||
The second `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-middle`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-right div')[1].classList.contains('cat-whisker-right-middle'))
|
||||
```
|
||||
|
||||
The third `div` element inside the `.cat-whiskers-right` element should have the class `cat-whisker-right-bottom`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-whiskers-right div')[2].classList.contains('cat-whisker-right-bottom'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="cat-whiskers-right">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 646f107abb89d00bb99f387a
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use a descendant selector to target the three `div` elements inside your `.cat-whiskers-left` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whiskers-left div` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div'))
|
||||
```
|
||||
|
||||
Your `.cat-whiskers-left div` selector should have a `width` set to `40px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.width === '40px')
|
||||
```
|
||||
|
||||
Your `.cat-whiskers-left div` selector should have a `height` set to `1px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.height === '1px')
|
||||
```
|
||||
|
||||
Your `.cat-whiskers-left div` selector should have a `background-color` set to `#000`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-left div')?.backgroundColor === 'rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,266 @@
|
||||
---
|
||||
id: 646f12da0b4c5d0ca162834a
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, move the `.cat-whisker-left-top` element into place with a `position` of `absolute`, a `top` of `120px`, and a `left` of `52px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whisker-left-top` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top'))
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-top` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-top` selector should have a `top` property set to `120px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.top === '120px')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-top` selector should have a `left` property set to `52px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.left === '52px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 646f135eab69d90d0c6d4e9b
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the left top whisker at `10` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-left-top` selector should have a `transform` property set to `rotate(10deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-top')?.transform === 'rotate(10deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,273 @@
|
||||
---
|
||||
id: 646f159b2cffb21150b927cb
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to target the `.cat-whisker-left-middle` element. Then move it into place with a `position` property set to `absolute`, a `top` of `127px`, and a `left` of `52px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whisker-left-middle` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle'))
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-middle` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-middle` selector should have a `top` property set to `127px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.top === '127px')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-middle` selector should have a `left` property set to `52px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.left === '52px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,260 @@
|
||||
---
|
||||
id: 646f164bf100dd11d226161f
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the left middle whisker at 3 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-left-middle` selector should have a `transform` property set to `rotate(3deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-middle')?.transform === 'rotate(3deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,280 @@
|
||||
---
|
||||
id: 646f1764e2f1d212ba9785a7
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a class selector, move the `.cat-whisker-left-bottom` into position with a `position` of `absolute`, a `top` of `134px`, and a `left` of `52px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whisker-left-bottom` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom'))
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,267 @@
|
||||
---
|
||||
id: 646f1802a09a171332e14630
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the left bottom whisker at `-3` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-left-bottom` selector should have a `transform` property set to `rotate(-3deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.transform === 'rotate(-3deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 646f4d6c42dc5f214f4e7444
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whisker-right-top` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top'))
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-top` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-top` selector should have a `top` property set to `120px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.top === '120px')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-top` selector should have a `left` property set to `109px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.left === '109px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,274 @@
|
||||
---
|
||||
id: 646f4e46e81f7021d5fd9c1d
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the top-right whisker at -10 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-10deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top')?.transform === 'rotate(-10deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 109px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,294 @@
|
||||
---
|
||||
id: 646f4f6a14e3c522d130a0d2
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to target the `.cat-whisker-right-middle` element, then move the right middle whisker into position with a `position` of `absolute`, a `top` of `127px`, and a `left` of `109px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whisker-right-middle` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle'))
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-middle` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-middle` selector should have a `top` property set to `127px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.top === '127px')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-middle` selector should have a `left` property set to `109px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.left === '109px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 109px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,281 @@
|
||||
---
|
||||
id: 646f4fe12b7985232bf475a5
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the right middle whisker at -3 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-right-middle` selector should have a `transform` property set to `rotate(-3deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-middle')?.transform === 'rotate(-3deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 109px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 109px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,302 @@
|
||||
---
|
||||
id: 646f507e4d1cd323f17db4fc
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use class selector to target the `.cat-whisker-right-bottom` element, then move it into place with a `position` of `absolute`, a `top` of `134px`, and a `left` of `109px`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whisker-right-bottom` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom'))
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-bottom` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-bottom` selector should have a `top` property set to `134px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.top === '134px')
|
||||
```
|
||||
|
||||
Your `.cat-whisker-right-bottom` selector should have a `left` property set to `109px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.left === '109px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 109px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 109px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,556 @@
|
||||
---
|
||||
id: 646f516dbfc1342495515625
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the bottom-right whisker at 3 degrees.
|
||||
|
||||
With this final step, your cat painting is now complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-right-bottom` selector should have a `transform` property set to `rotate(3deg)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-bottom')?.transform === 'rotate(3deg)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 109px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 109px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 109px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whiskers-right div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-whisker-left-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 52px;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 52px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-left-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 52px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-top {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
left: 109px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-middle {
|
||||
position: absolute;
|
||||
top: 127px;
|
||||
left: 109px;
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
.cat-whisker-right-bottom {
|
||||
position: absolute;
|
||||
top: 134px;
|
||||
left: 109px;
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 6476f5c17f99146071ee884c
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You could see that nothing happens. The `.cat-head` element did not move despite setting a `top` and `left` of `100px` each. But that's not the case with `relative` positioning.
|
||||
|
||||
When you use the `relative` value, the element is still positioned according to the normal flow of the document, but the `top`, `left`, `bottom`, and `right` values become active.
|
||||
|
||||
Instead of `static`, give your `.cat-head` a position of `relative`, and leave both `top` and `left` properties as they are.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-head` selector should have a `position` property set to `relative`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'relative')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
--fcc-editable-region--
|
||||
position: static;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 6476f7a4827bcc61682f2347
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When you use the `absolute` value for your `position` property, the element is taken out of the normal flow of the document, and then its position is determined by the `top`, `right`, `bottom`, and `left` properties.
|
||||
|
||||
Set the `position` property of your `.cat-head` element to `absolute`, then set `top` and `left` properties to any positive pixel value.
|
||||
|
||||
<!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `top` property set to any number in `px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px')
|
||||
assert.match(code, /top:\s*\d{1,4}px;/)
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `left` property set to any number in `px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px')
|
||||
assert.match(code, /left:\s*\d{1,4}px;/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
--fcc-editable-region--
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 6476fb7cbaafa36d65e9cf35
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page.
|
||||
|
||||
You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `div` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div').length === 2);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `box`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
top: 300px;
|
||||
left: 400px;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 6476fc5cf14b276e6d04e82a
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to give your `.box` element a width of `200px`, a height of `600px`, and a background color of `#000`. Also, give it a `position` of `absolute`, a `top` of `800px` and a `left` of `650px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.box` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box'))
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `width` property set to `200px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.width === '200px')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `height` property set to `600px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.height === '600px')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `background-color` property set to `#000`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor === 'rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `position` property set to `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `left` property set to `650px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.left === '650px')
|
||||
```
|
||||
|
||||
Your `.box` selector should have a `top` property set to `800px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.box')?.top === '800px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
<div class="box"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 6476fd4213318f6ee211028a
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are.
|
||||
|
||||
After that, scroll up and down to see how the `fixed` value works.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-head` selector should have a `position` property set to `fixed`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'fixed')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `top` property set to `100px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '100px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `left` property set to `100px`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '100px')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
<div class="box"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
--fcc-editable-region--
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 600px;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
left: 650px;
|
||||
top: 800px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 64770351e8586671ec0911f0
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`sticky` positioning is a hybrid of `relative` and `fixed` positioning. It allows an element to **stick** to a specific position within its containing element or viewport, based on the scroll position.
|
||||
|
||||
Change the value of the `position` property of `.cat-head` to `sticky`, set `top` to `0`, then remove `left` and its value.
|
||||
|
||||
**Note**: To see how `sticky` works, you have to place a couple of texts before and after your `.cat-head` `div` element. If you scroll down after that, you'll see that the `.cat-head` gets stuck to the top and remains there.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-head` selector should have a `position` property set to `sticky`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'sticky')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px')
|
||||
```
|
||||
|
||||
You should not have the `left` property and its value in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /left:\s*100px;?/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
<div class="box"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
--fcc-editable-region--
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 600px;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
left: 650px;
|
||||
top: 800px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 6477062778c85972eb648030
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You should now center the cat head.
|
||||
|
||||
Give the `.cat-head` element a `position` property set to `absolute`. Set a value of `0` for the `right`, `left`, `top`, `bottom` properties, then set its `margin` property on all sides to `auto`. That's one way to center an element vertically and horizontally using CSS positioning.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-head` selector should have a `position` property set to `absolute`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `top` property set to `0`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '0px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `left` property set to `0`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '0px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `right` property set to `0`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.right === '0px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `bottom` property set to `0`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.bottom === '0px')
|
||||
```
|
||||
|
||||
Your `.cat-head` selector should have a `margin` property set to `auto`. Make sure you add a semicolon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.margin === 'auto')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
<div class="box"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
--fcc-editable-region--
|
||||
position: sticky;
|
||||
top: 0;
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
left: 650px;
|
||||
top: 800px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 647d821de0d97b3283c72b36
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Also, remove the `.box` CSS rule and its declarations because you don't need them anymore.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `.box` css rule and all its values.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /\.box\s*\{\s*width:\s*400px;\s*height:\s*600px;\s*background-color:\s*#000;\s*position:\s*absolute;\s*left:\s*650px;\s*top:\s*800px;?\s*\}\s*/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.box {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
left: 650px;
|
||||
top: 800px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
id: 647d855ac12cd436059acd39
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the universal selector to add `box-sizing: border-box;` to your CSS. This ensures elements include padding and border in their specified width and height.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have the universal selector (`*`).
|
||||
|
||||
```js
|
||||
// assert.match(code, /\*\s*{\s*.*\s*}/)
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*'))
|
||||
```
|
||||
|
||||
Your universal selector should have a `box-sizing` property set to `border-box`.
|
||||
|
||||
```js
|
||||
// assert.match(code, /\*\s*{\s*box-sizing:\s*border-box;?\s*}/)
|
||||
assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 649353647c44ef4867ab4935
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the `div` element with class `box` because you don't need it anymore.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `div` element with class `box`
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /<div\s*class=('|")box\1><\/div>/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="box"></div>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
left: 650px;
|
||||
top: 800px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 64a2687ef267e5934a2f93e3
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-mouth div` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div'))
|
||||
```
|
||||
|
||||
Your `.cat-mouth div` selector should have a `width` property set to `30px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px')
|
||||
```
|
||||
|
||||
Your `.cat-mouth div` selector should have a `height` property set to `50px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px')
|
||||
```
|
||||
|
||||
Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,212 @@
|
||||
---
|
||||
id: 64a26ac5540c5493f4641f10
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You are going to make the two mouth lines into an elliptical shape. So, give the `.cat-mouth div` selector a border color of `black transparent transparent transparent` and a border radius of `190%/190px 150px 0 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-mouth div` selector should have a `border-color` property set to `black transparent transparent transparent`.
|
||||
|
||||
```js
|
||||
assert.match(code, /border-color:\s*black\s*(transparent)\s*\1\s*\1\s*;?/)
|
||||
```
|
||||
|
||||
Your `.cat-mouth div` selector should have a `border-radius` property set to `190%/190px 150px 0 0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /border-radius:\s*190%\/190px\s*150px\s*0\s*0\s*;?/)
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,260 @@
|
||||
---
|
||||
id: 64a3bcbc83e574b58c8ed048
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you did in the previous step, use a descendant selector to target the three `div` elements inside your `.cat-whiskers-right` element. Give it a `width` of `40px`, a `height` of `1px`, and a `background-color` of `#000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.cat-whiskers-right div` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div'))
|
||||
```
|
||||
|
||||
Your `.cat-whiskers-right div` selector should have a `width` set to `40px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.width === '40px')
|
||||
```
|
||||
|
||||
Your `.cat-whiskers-right div` selector should have a `height` set to `1px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.height === '1px')
|
||||
```
|
||||
|
||||
Your `.cat-whiskers-right div` selector should have a `background-color` set to `#000`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-whiskers-right div')?.backgroundColor === 'rgb(0, 0, 0)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-eyes">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
<div class="cat-right-eye">
|
||||
<div class="cat-right-inner-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cat-nose"></div>
|
||||
|
||||
<div class="cat-mouth">
|
||||
<div class="cat-mouth-line-left"></div>
|
||||
<div class="cat-mouth-line-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="cat-whiskers">
|
||||
<div class="cat-whiskers-left">
|
||||
<div class="cat-whisker-left-top"></div>
|
||||
<div class="cat-whisker-left-middle"></div>
|
||||
<div class="cat-whisker-left-bottom"></div>
|
||||
</div>
|
||||
<div class="cat-whiskers-right">
|
||||
<div class="cat-whisker-right-top"></div>
|
||||
<div class="cat-whisker-right-middle"></div>
|
||||
<div class="cat-whisker-right-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
.cat-left-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: -31px;
|
||||
z-index: 1;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-right-ear {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
left: 163px;
|
||||
z-index: 1;
|
||||
transform: rotate(45deg);
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 70px solid #5e5e5e;
|
||||
}
|
||||
|
||||
.cat-left-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-right-inner-ear {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
border-top-left-radius: 90px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 40%;
|
||||
border-bottom-left-radius: 40%;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-bottom: 40px solid #3b3b4f;
|
||||
}
|
||||
|
||||
.cat-left-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 39px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-right-eye {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 134px;
|
||||
border-radius: 60%;
|
||||
transform: rotate(-25deg);
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.cat-left-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 2px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
transform: rotate(10deg);
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-right-inner-eye {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 18px;
|
||||
transform: rotate(-5deg);
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 60%;
|
||||
}
|
||||
|
||||
.cat-nose {
|
||||
position: absolute;
|
||||
top: 108px;
|
||||
left: 85px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
transform: rotate(180deg);
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 20px solid #442c2c;
|
||||
}
|
||||
|
||||
.cat-mouth div {
|
||||
width: 30px;
|
||||
height: 50px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 190%/190px 150px 0 0;
|
||||
border-color: black transparent transparent transparent;
|
||||
}
|
||||
|
||||
.cat-mouth-line-left {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 74px;
|
||||
transform: rotate(170deg);
|
||||
}
|
||||
|
||||
.cat-mouth-line-right {
|
||||
position: absolute;
|
||||
top: 88px;
|
||||
left: 91px;
|
||||
transform: rotate(165deg);
|
||||
}
|
||||
|
||||
.cat-whiskers-left div {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 6676a8a8d9861319ee901a90
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can begin working on your cat's ears.
|
||||
|
||||
Clean up your review code by removing the `.cat-right-ear` selector and all of its properties.
|
||||
|
||||
Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Your `.cat-right-ear` selector should not have a `height` property.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should not have a `width` property.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width)
|
||||
```
|
||||
|
||||
|
||||
Your `.cat-right-ear` selector should not have a `border-left` property.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft)
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should not have a `border-right` property.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight)
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should not have a `border-top` property.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop)
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should not have a `border-bottom` property.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom)
|
||||
```
|
||||
|
||||
You should not have a `.cat-right-ear` selector.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
|
||||
```
|
||||
|
||||
You should have a `.cat-left-ear` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear'))
|
||||
```
|
||||
|
||||
Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent`
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent`
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cat-right-ear {
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-top: 35px solid transparent;
|
||||
border-bottom: 35px solid red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 6676a8b01e56ec1a1e07c202
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that you now have a white square with thick borders. The borders have diagonal edges which can be used to create triangles. You will need them to create your cat's ears.
|
||||
|
||||
Within the same class selector adjust `height` and `width` to `0`. Set the left, right and top border to `transparent`.
|
||||
|
||||
Remove the `background-color` property, and you should see a triangle.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
You should have a `.cat-right-ear` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `height` property set to `0`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height == '0px')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `width` property set to `0`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '0px')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid transparent`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid transparent')
|
||||
```
|
||||
|
||||
|
||||
Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
|
||||
```
|
||||
|
||||
Your `.cat-right-ear` selector should not have a `background-color` property.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="cat-head">
|
||||
<div class="cat-ears">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
<div class="cat-right-ear">
|
||||
<div class="cat-right-inner-ear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #c9d2fc;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.cat-right-ear {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: white;
|
||||
border-left: 35px solid blue;
|
||||
border-right: 35px solid blue;
|
||||
border-top: 35px solid red;
|
||||
border-bottom: 35px solid red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -587,7 +587,86 @@ const duplicatedProjectIds = [
|
||||
'6201a5258af7b398b030bfaf',
|
||||
'6201a59be346d399c21d10b1',
|
||||
// Cat Painting
|
||||
|
||||
'646c48df8674cf2b91020ecc',
|
||||
'647d855ac12cd436059acd39',
|
||||
'646c586be7180e40ddf74ff6',
|
||||
'646c59e942f35541923104bf',
|
||||
'646c5d7057c45f432fcdd46c',
|
||||
'646c5ace05e4be4211407935',
|
||||
'646c5e727e56e743c9aed4a1',
|
||||
'6476f5c17f99146071ee884c',
|
||||
'6476f7a4827bcc61682f2347',
|
||||
'6476fb7cbaafa36d65e9cf35',
|
||||
'6476fc5cf14b276e6d04e82a',
|
||||
'6476fd4213318f6ee211028a',
|
||||
'64770351e8586671ec0911f0',
|
||||
'6477062778c85972eb648030',
|
||||
'649353647c44ef4867ab4935',
|
||||
'647d821de0d97b3283c72b36',
|
||||
'646c5ffef5598d449b52ec12',
|
||||
'646ce8bb4b35544d501c7184',
|
||||
'646ce9d790d2a44de5f99e04',
|
||||
'646ceb843412c74edee27a79',
|
||||
'6676a8b01e56ec1a1e07c202',
|
||||
'6676a8a8d9861319ee901a90',
|
||||
'646cecc9eb5c4f4f73dafd07',
|
||||
'646cef0c2b98915094df7099',
|
||||
'646cf1206cac5f51804f49cf',
|
||||
'646cf2249f02ca5233d9af7c',
|
||||
'646cf48d8f8e1f535a1821d3',
|
||||
'646cf6cbca98e258da65c979',
|
||||
'646cf88aa884405a11ea5bcc',
|
||||
'646cfc2b8e6fe95c20a819d5',
|
||||
'646cfd853634255d02b64cc1',
|
||||
'646cfde6ac612e5d60391f50',
|
||||
'646dd556d524bc61c0139bd6',
|
||||
'646dd6f9caa862627dd87772',
|
||||
'646dd7cfd0cfac630c1dd520',
|
||||
'646dd8c79ec23463a3d0e356',
|
||||
'646dd9d9a729916460724f16',
|
||||
'646ddab8afd73764f5241bbf',
|
||||
'646ddb61ff08366570cc5902',
|
||||
'646ddd3f9f97a0667b964bdb',
|
||||
'646dde7dc20dc167489faa69',
|
||||
'646ddf888632fa67f1180940',
|
||||
'646de5dc8988076a1d992afd',
|
||||
'646de6a97b50a86ac487de86',
|
||||
'646de7b64467e96b7d35b5cd',
|
||||
'646de8478d6f796bfbdccfb2',
|
||||
'646de8d204a3426c7d184372',
|
||||
'646dea1c98c2426d43a705c3',
|
||||
'646deb169847f86df0f95bfc',
|
||||
'646dec359bef3b7811fba5a6',
|
||||
'646dedbcba062079128b2ecc',
|
||||
'646def5e863abf7a14501421',
|
||||
'646df03c8f79337ab46f148b',
|
||||
'646df0cf26413a7b35e4b8b3',
|
||||
'646df1d1aa4ae57bdf1869c4',
|
||||
'646dffd8ce9ac77ec1906f2e',
|
||||
'64a2687ef267e5934a2f93e3',
|
||||
'64a26ac5540c5493f4641f10',
|
||||
'646f0417322c0e04983a5149',
|
||||
'646f08293804a30685533c6f',
|
||||
'646f09293eb3230723a62f77',
|
||||
'646f0c9a1e3360092d1bbd33',
|
||||
'646f0ce5737243098ad6e494',
|
||||
'646f0ef13604420a8744f7d4',
|
||||
'646f0f7c5933560af8e7e380',
|
||||
'646f102bf87b350b593baa72',
|
||||
'646f107abb89d00bb99f387a',
|
||||
'64a3bcbc83e574b58c8ed048',
|
||||
'646f12da0b4c5d0ca162834a',
|
||||
'646f135eab69d90d0c6d4e9b',
|
||||
'646f159b2cffb21150b927cb',
|
||||
'646f164bf100dd11d226161f',
|
||||
'646f1764e2f1d212ba9785a7',
|
||||
'646f1802a09a171332e14630',
|
||||
'646f4d6c42dc5f214f4e7444',
|
||||
'646f4e46e81f7021d5fd9c1d',
|
||||
'646f4f6a14e3c522d130a0d2',
|
||||
'646f4fe12b7985232bf475a5',
|
||||
'646f507e4d1cd323f17db4fc',
|
||||
'646f516dbfc1342495515625',
|
||||
// Responsive Piano
|
||||
'612e78af05201622d4bab8aa',
|
||||
'612e7d1c29fb872d6384379c',
|
||||
|
||||
Reference in New Issue
Block a user