mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-15 13:00:58 -04:00
chore(i18n,learn): processed translations (#51269)
This commit is contained in:
camperbot
@@ -0,0 +1,10 @@
|
||||
---
|
||||
id: 64afc4e8f3b37856e035b85f
|
||||
title: Upcoming Python Certification
|
||||
certification: upcoming-python-certification
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 64afc37bf3b37856e035b85e
|
||||
title: Upcoming Python Project
|
||||
@@ -15,7 +15,7 @@ ul {
|
||||
}
|
||||
```
|
||||
|
||||
Remove the default styling for the `.answers-list` items by settings its style to `none`, and remove the unordered list padding.
|
||||
Remove the default styling for the `.answers-list` items by setting its style to `none`, and remove the unordered list padding.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,18 +11,39 @@ dashedName: step-14
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إضافة أربعة عناصر `label`.
|
||||
There should be three `fieldset` elements in total.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.length, 4);
|
||||
assert.equal(document.querySelectorAll('fieldset')?.length, 3);
|
||||
```
|
||||
|
||||
يجب عليك إضافة عنصر `label` إلى الـ `fieldset` الاول.
|
||||
The `fieldset` elements should all be direct children of the `form` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
|
||||
assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
|
||||
```
|
||||
|
||||
The four `label` elements should all be direct children of the first `fieldset` element. Make sure you close the `label` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form fieldset:first-child > label')?.length, 4);
|
||||
```
|
||||
|
||||
The last two `fieldset` elements should be empty.
|
||||
|
||||
```js
|
||||
const LastTwoFieldsetElements = Array.from(document.querySelectorAll("form fieldset:not(fieldset:first-child)"));
|
||||
assert.isTrue(LastTwoFieldsetElements.filter((ele) => ele.innerHTML?.replace(/\s/g, ""))?.length === 0);
|
||||
```
|
||||
|
||||
Make sure you close the `label` elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelector('fieldset')?.innerHTML?.match(/<\/label>/g), 4)
|
||||
```
|
||||
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
@@ -26,28 +26,28 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
|
||||
يجب عليك إضافة أول `input` بعد نص الـ `label` الآتي `Enter Your First Name:`,، وقم بإدراج مسافه بعد الـ colon (:).
|
||||
|
||||
```js
|
||||
const query = /^Enter Your First Name:\s+<input>/
|
||||
const query = /^Enter Your First Name:\s+<input/
|
||||
assert.match(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), query);
|
||||
```
|
||||
|
||||
يجب عليك إضافة ثاني `input` بعد نص الـ `label` الآتي `Enter Your Last Name:`,، وقم بإدراج مسافه بعد الـ colon (:).
|
||||
|
||||
```js
|
||||
const query = /^Enter Your Last Name:\s+<input>/
|
||||
const query = /^Enter Your Last Name:\s+<input/
|
||||
assert.match(document.querySelectorAll('label')?.[1]?.innerHTML.trim(), query);
|
||||
```
|
||||
|
||||
يجب عليك إضافة ثالث `input` بعد نص الـ `label` الآتي `Enter Your Email:`,، وقم بإدراج مسافه بعد الـ colon (:).
|
||||
|
||||
```js
|
||||
const query = /^Enter Your Email:\s+<input>/
|
||||
const query = /^Enter Your Email:\s+<input/
|
||||
assert.match(document.querySelectorAll('label')?.[2]?.innerHTML.trim(), query);
|
||||
```
|
||||
|
||||
يجب عليك إضافة رابع `input` بعد نص الـ `label` الآتي `Create a New Password:`، وقم بإدراج مسافه بعد الـ colon (:).
|
||||
|
||||
```js
|
||||
const query = /^Create a New Password:\s+<input>/
|
||||
const query = /^Create a New Password:\s+<input/
|
||||
assert.match(document.querySelectorAll('label')?.[3]?.innerHTML.trim(), query);
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 646c47867800472a4ed5d2ea
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Begin with the basic HTML structure. Add a `DOCTYPE` reference of `html` and an `html` element with its `lang` attribute set to `en`. Also, add a `head` and a `body` element within the `html` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have the `DOCTYPE` declaration of `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE html>/i));
|
||||
```
|
||||
|
||||
Your `DOCTYPE` declaration should be at the beginning of your HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `html` tag with a `lang` attribute of `en`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
You should have a closing `html` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html>/i));
|
||||
```
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body>/i));
|
||||
```
|
||||
|
||||
Your `body` element should come after the `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*<\/head>\s*<body>\s*<\/body>/i));
|
||||
```
|
||||
|
||||
Your `head` and `body` elements should be inside the `html` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<head>\s*<\/head>\s*<body>\s*<\/body>\s*<\/html>/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 646c48df8674cf2b91020ecb
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within your `head` element, add a `meta` tag with the `charset` attribute of `utf-8`. Also add a `title` element with the text `fCC Cat Painting`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a single `meta` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('meta').length === 1);
|
||||
```
|
||||
|
||||
Your `meta` element should have a `charset` attribute set to `utf-8`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
```
|
||||
|
||||
You should add a single `title` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('title').length === 1);
|
||||
```
|
||||
|
||||
Your `title` element should have the text `fCC Cat Painting`. Note that spelling and casing matter.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('title')?.innerText === 'fCC Cat Painting');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
id: 646c48df8674cf2b91020ecc
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add 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.match(code, /<link/)
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute set to `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link\s+rel=("|'|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `./styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link\s+rel=("|'|`)stylesheet\1\s+href=\1\.\/styles\.css\1\s*\/?>/)
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>fCC Cat Painting</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 646c586be7180e40ddf74ff6
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --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 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --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,79 @@
|
||||
---
|
||||
id: 646c5ace05e4be4211407935
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --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
|
||||
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/)
|
||||
```
|
||||
|
||||
Your `linear-gradient` function should set the second color to be `#45454f` at `100%`.
|
||||
|
||||
```js
|
||||
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+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;
|
||||
}
|
||||
|
||||
.cat-head {
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 646c5d7057c45f432fcdd46c
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --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,78 @@
|
||||
---
|
||||
id: 646c5e727e56e743c9aed4a1
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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--
|
||||
|
||||
--fcc-editable-region--
|
||||
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
|
||||
width: 205px;
|
||||
height: 180px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 46%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 646c5ffef5598d449b52ec12
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --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 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --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 `car-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,83 @@
|
||||
---
|
||||
id: 646ce9d790d2a44de5f99e04
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `.cat-left-ear` element, create another `div` element with the class `cat-left-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 have a `div` element inside your `.cat-left-ear` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-ear div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-left-inner-ear`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-ear div')[0]?.classList.contains('cat-left-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>
|
||||
--fcc-editable-region--
|
||||
<div class="cat-right-ear"></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%;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 646ceae4d57c214e6b03576c
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `.cat-right-ear` element, create another `div` element with the class `cat-right-inner-ear`.
|
||||
|
||||
# --hints--
|
||||
|
||||
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 a `div` element inside your `.cat-right-ear` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-right-ear div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element 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">
|
||||
<div class="cat-left-ear">
|
||||
<div class="cat-left-inner-ear"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<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,95 @@
|
||||
---
|
||||
id: 646ceb843412c74edee27a79
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You are going to make each ear look like a triangle.
|
||||
|
||||
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--
|
||||
|
||||
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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 646cecc9eb5c4f4f73dafd07
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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%;
|
||||
}
|
||||
|
||||
.cat-left-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,89 @@
|
||||
---
|
||||
id: 646cef0c2b98915094df7099
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --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 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --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 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you did for the left ear, rotate the right ear at 45 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon.
|
||||
|
||||
```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 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --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 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --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 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --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 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --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 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --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 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --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 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --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,144 @@
|
||||
---
|
||||
id: 646ddd3f9f97a0667b964bdb
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `.cat-left-eye` element, create another `div` element with the class `cat-left-inner-eye`.
|
||||
|
||||
# --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 have a `div` element inside your `.cat-left-eye` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-eye div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element should have the class `cat-left-inner-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-left-eye div')[0]?.classList.contains('cat-left-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>
|
||||
--fcc-editable-region--
|
||||
<div class="cat-right-eye"></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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 646dddfb3a301c66ec513c56
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `.cat-right-eye` element, create another `div` element with the class `cat-right-inner-eye`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the existing `div` element with the class `cat-left-eye`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('div.cat-right-eye').length === 1);
|
||||
```
|
||||
|
||||
You should have a `div` element inside your `.cat-right-eye` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.cat-right-eye div').length === 1);
|
||||
```
|
||||
|
||||
Your `div` element 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">
|
||||
<div class="cat-left-eye">
|
||||
<div class="cat-left-inner-eye"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<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 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --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 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --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 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --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 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --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 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --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 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --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 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --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 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --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 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --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 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --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 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --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 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --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 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --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 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --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 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --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 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --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 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --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 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using the `transform` property, rotate the left mouth line at `170` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-mouth-line-left` property 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 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --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 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the right mouth line at `165` degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-mouth-line-left` property 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 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --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 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --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 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --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 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --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 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --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 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --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 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --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 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --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 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --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 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --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 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --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 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --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 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the top-right whisker at -10 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.cat-whisker-right-top` selector should have a `transform` property set to `rotate(-1deg)`.
|
||||
|
||||
```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 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --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 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --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 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --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 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --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 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --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 you `.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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The next position property is `absolute`. 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 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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --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 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --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 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last position property value is `sticky`. `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 up 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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 semi-colon.
|
||||
|
||||
```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 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --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 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --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 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --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 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --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 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --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 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --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--
|
||||
```
|
||||
@@ -29,7 +29,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
|
||||
```
|
||||
|
||||
يجب أن يغلف عنصر `span` النص `Sodium 360mg`.
|
||||
A `span` element should wrap the text `Sodium 160mg`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
يجب أن ينحاز النص `* Daily Value %` إلى اليمين. أنشئ منتقي `.right` وأضف خاصية `justify-content`.
|
||||
The text `% Daily Value *` should be aligned to the right. أنشئ منتقي `.right` وأضف خاصية `justify-content`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-25
|
||||
|
||||
# --description--
|
||||
|
||||
To keep track of all of your spreadsheet's functions, delcare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object.
|
||||
To keep track of all of your spreadsheet's functions, declare a `spreadsheetFunctions` object. Using destructuring syntax, set `sum`, `average`, and `median` as properties and values on the `spreadsheetFunctions` object.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ Inside the callback function, add a `console.log` with the value of `e.target.va
|
||||
|
||||
Open the console, and make a selection from the teammates dropdown menu. You should see the value of that selection in the console.
|
||||
|
||||
`e.target.value` represents the value property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play.
|
||||
`e.target.value` represents the `value` property from the `playersDropdownList` element. In future steps, you will use this value to show player cards based on the position they play.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,16 +15,16 @@ The website will consist of a main index page which will have links to a few rec
|
||||
1. Your recipe page should include an `html` element with a `head` and `body` element as children.
|
||||
1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
|
||||
1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
|
||||
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
|
||||
1. You should see a related image with an `alt` attribute.
|
||||
1. There should be an `h2` element with the text `Description` under the image.
|
||||
1. You should see a couple of paragraphs under `Description` that describe the recipe.
|
||||
1. There should be an `h2` element with the text `Ingredients`
|
||||
1. There should be an `h2` element with the text `Ingredients`.
|
||||
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
|
||||
1. Under the list of ingredients add another heading called `Steps`.
|
||||
1. You should see an ordered list with a couple of steps needed to complete the recipe.
|
||||
1. Under the steps there should be an `h2` element with the text `More Recipes`
|
||||
1. Under the steps there should be an `h2` element with the text `More Recipes`.
|
||||
1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
|
||||
1. These anchor elements should have `href` attribute with the value set to `#`
|
||||
1. These anchor elements should have `href` attribute with the value set to `#`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -56,12 +56,12 @@ You should have a `h1` element within your `body` element that contains the text
|
||||
assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
|
||||
```
|
||||
|
||||
You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
|
||||
You should have an image with an `alt` attribute.
|
||||
|
||||
```js
|
||||
const img = document.querySelectorAll('IMG')[0];
|
||||
|
||||
assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
|
||||
assert(img && img.alt !='' && img.src != '')
|
||||
```
|
||||
|
||||
You should have an `h2` element with the text `Description`.
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 637f4e0e72c65bc8e73dfe1e
|
||||
videoId: LGQuIIv2RVA
|
||||
title: HTML Foundations Question A
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-a
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
|
||||
|
||||
Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `<p>`.
|
||||
|
||||
Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
|
||||
|
||||
A full paragraph element looks like this:
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/90b1a362af0bb8635af9593cd8911c9aefb68569/foundations/html_css/html-foundations/imgs/00.png" alt="element diagram" />
|
||||
|
||||
You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
|
||||
|
||||
There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
|
||||
|
||||
HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
|
||||
|
||||
Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
|
||||
|
||||
# --question--
|
||||
|
||||
## --assignment--
|
||||
|
||||
Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-)
|
||||
|
||||
## --text--
|
||||
|
||||
What are HTML tags?
|
||||
|
||||
## --answers--
|
||||
|
||||
HTML tags tell the browser what content an element contains.
|
||||
|
||||
---
|
||||
|
||||
HTML tags tell the browser when to load its content.
|
||||
|
||||
---
|
||||
|
||||
HTML tags tell the browser what content the next element contains.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
id: 637f4e1672c65bc8e73dfe1f
|
||||
title: HTML Foundations Question B
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-b
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags.
|
||||
|
||||
Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `<p>`.
|
||||
|
||||
Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `</p>`.
|
||||
|
||||
A full paragraph element looks like this:
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/90b1a362af0bb8635af9593cd8911c9aefb68569/foundations/html_css/html-foundations/imgs/00.png" alt="element diagram" />
|
||||
|
||||
You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
|
||||
|
||||
There are some HTML elements that do not have a closing tag. These elements often look like this: `<br />` or `<img/>`, but some can also be used without the closing forward slash such as `<br>` or `<img>`. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags.
|
||||
|
||||
HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet.
|
||||
|
||||
Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What are the three parts of most HTML elements?
|
||||
|
||||
## --answers--
|
||||
|
||||
An opening tag, self closing tag, and content.
|
||||
|
||||
---
|
||||
|
||||
An opening tag, closing tag, and content.
|
||||
|
||||
---
|
||||
|
||||
An opening tag, closing tag, and attribute.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 637f4e1c72c65bc8e73dfe20
|
||||
title: HTML Foundations Question C
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-c
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To demonstrate an HTML boilerplate, you first need an HTML file to work with.
|
||||
|
||||
Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`.
|
||||
|
||||
You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files.
|
||||
|
||||
To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file.
|
||||
|
||||
It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems.
|
||||
|
||||
## The DOCTYPE
|
||||
|
||||
Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply `<!DOCTYPE html>`.
|
||||
|
||||
The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4:
|
||||
|
||||
```html
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
```
|
||||
|
||||
However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use `<!DOCTYPE html>`.
|
||||
|
||||
Open the `index.html` file created earlier in your text editor and add `<!DOCTYPE html>` to the very first line.
|
||||
|
||||
# --question--
|
||||
## --text--
|
||||
|
||||
What is the purpose of the `DOCTYPE` declaration?
|
||||
|
||||
## --answers--
|
||||
|
||||
It tells the browser which version of HTML to use to render the document.
|
||||
|
||||
---
|
||||
|
||||
It tells the browser that this document uses JavaScript.
|
||||
|
||||
---
|
||||
|
||||
It tells the browser the title of the document.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 637f4e2872c65bc8e73dfe21
|
||||
title: HTML Foundations Question D
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-d
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After you declare the doctype, you need to provide an `<html>` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it.
|
||||
|
||||
This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document.
|
||||
|
||||
Back in the `index.html` file, let’s add the `<html>` element by typing out its opening and closing tags, like so:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
</html>
|
||||
```
|
||||
|
||||
## What is the lang attribute?
|
||||
`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the `html` element?
|
||||
|
||||
## --answers--
|
||||
|
||||
It is the root element in the document and tells the browser which version of HTML it should use.
|
||||
|
||||
---
|
||||
|
||||
It is the root element in the document and all other elements should descend from it.
|
||||
|
||||
---
|
||||
|
||||
It is the root element in the document and all other elements should come after it.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
id: 6374f208de18c50e48ba767b
|
||||
title: HTML Foundations Question E
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-e
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
|
||||
|
||||
Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
|
||||
|
||||
# --question--
|
||||
|
||||
## --assignment--
|
||||
|
||||
Read <a href="https://brytdesigns.com/html-css-javascript-whats-the-difference#What_is_HTML" target="_blank">the HTML vs CSS vs JavaScript article</a>. It is a quick overview of the relationships between HTML, CSS, and JavaScript.
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following statements is true?
|
||||
|
||||
## --answers--
|
||||
|
||||
CSS is used to create the basic structure of a webpage, and HTML is used to add style.
|
||||
|
||||
---
|
||||
|
||||
HTML is used to create the basic structure of a webpage, and CSS is used to add style.
|
||||
|
||||
---
|
||||
|
||||
HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 637f4e2f72c65bc8e73dfe22
|
||||
title: HTML Foundations Question F
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-f
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `<head>` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the `<head>`, you should not use any element that displays content on the webpage.
|
||||
|
||||
## The Charset Meta Element
|
||||
You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: `<meta charset="utf-8">`.
|
||||
|
||||
Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser.
|
||||
|
||||
## Title Element
|
||||
Another element you should always include in the head of an HTML document is the `title` element:
|
||||
|
||||
```html
|
||||
<title>My First Webpage</title>
|
||||
```
|
||||
|
||||
The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab.
|
||||
|
||||
If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open.
|
||||
|
||||
There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum.
|
||||
|
||||
Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `<html>` tag:
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>My First Webpage</title>
|
||||
</head>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of the `head` element?
|
||||
|
||||
## --answers--
|
||||
|
||||
The `head` element is used to display all elements that are displayed on the webpage.
|
||||
|
||||
---
|
||||
|
||||
The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements.
|
||||
|
||||
---
|
||||
|
||||
The `head` element is used to display the header content on top of the webpage.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
id: 637f4e3672c65bc8e73dfe23
|
||||
videoId: V8UAEoOvqFg
|
||||
title: HTML Foundations Question G
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-g
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The final element needed to complete the HTML boilerplate is the `<body>` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on.
|
||||
|
||||
To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so:
|
||||
|
||||
# --question--
|
||||
|
||||
## --assignment--
|
||||
|
||||
Watch and follow along to Kevin Powell’s brilliant Building your first web page video above.
|
||||
|
||||
---
|
||||
|
||||
Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory.
|
||||
|
||||
---
|
||||
|
||||
Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML.
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of the `body` element?
|
||||
|
||||
## --answers--
|
||||
|
||||
This is where all important information about the webpage is displayed such as the `title` and `meta` tags.
|
||||
|
||||
---
|
||||
|
||||
This is where you tell the browser how to render the webpage correctly.
|
||||
|
||||
---
|
||||
|
||||
This is where all content will be displayed on the page such images, text, and links.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
id: 6376327e2724a688c04636e3
|
||||
title: HTML Foundations Question H
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-h
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
|
||||
HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
|
||||
|
||||
Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Between HTML and CSS, which should you use to add paragraphs of text on a webpage?
|
||||
|
||||
## --answers--
|
||||
|
||||
CSS
|
||||
|
||||
---
|
||||
|
||||
JavaScript
|
||||
|
||||
---
|
||||
|
||||
HTML
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
id: 637633162724a688c04636e4
|
||||
title: HTML Foundations Question I
|
||||
challengeType: 15
|
||||
dashedName: html-foundations-question-i
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!
|
||||
|
||||
Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content.
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Between HTML and CSS, which should you use to change the font and background color of a button?
|
||||
|
||||
## --answers--
|
||||
|
||||
You should use CSS to change the background color and font of a button.
|
||||
|
||||
---
|
||||
|
||||
You should use JavaScript to change the background color and font of a button.
|
||||
|
||||
---
|
||||
|
||||
You should use HTML to change the background color and font of a button.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user