gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): demistify cat ear triangle Cat Painting step 22 (#55290)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: sembauke <semboot699@gmail.com>
Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
This commit is contained in:
Supravisor
2024-07-02 19:33:16 +12:00
committed by GitHub
parent 3e10eec5a5
commit 1c1b08498c
62 changed files with 501 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/_meta/learn-intermediate-css-by-building-a-cat-painting/meta.json
+66 -58
View File
@@ -96,236 +96,244 @@
"title": "Step 22"
},
{
"id": "646cecc9eb5c4f4f73dafd07",
"id": "6676a8b01e56ec1a1e07c202",
"title": "Step 23"
},
{
"id": "646cef0c2b98915094df7099",
"id": "6676a8a8d9861319ee901a90",
"title": "Step 24"
},
{
"id": "646cf1206cac5f51804f49cf",
"id": "646cecc9eb5c4f4f73dafd07",
"title": "Step 25"
},
{
"id": "646cf2249f02ca5233d9af7c",
"id": "646cef0c2b98915094df7099",
"title": "Step 26"
},
{
"id": "646cf48d8f8e1f535a1821d3",
"id": "646cf1206cac5f51804f49cf",
"title": "Step 27"
},
{
"id": "646cf6cbca98e258da65c979",
"id": "646cf2249f02ca5233d9af7c",
"title": "Step 28"
},
{
"id": "646cf88aa884405a11ea5bcc",
"id": "646cf48d8f8e1f535a1821d3",
"title": "Step 29"
},
{
"id": "646cfc2b8e6fe95c20a819d5",
"id": "646cf6cbca98e258da65c979",
"title": "Step 30"
},
{
"id": "646cfd853634255d02b64cc1",
"id": "646cf88aa884405a11ea5bcc",
"title": "Step 31"
},
{
"id": "646cfde6ac612e5d60391f50",
"id": "646cfc2b8e6fe95c20a819d5",
"title": "Step 32"
},
{
"id": "646dd556d524bc61c0139bd6",
"id": "646cfd853634255d02b64cc1",
"title": "Step 33"
},
{
"id": "646dd6f9caa862627dd87772",
"id": "646cfde6ac612e5d60391f50",
"title": "Step 34"
},
{
"id": "646dd7cfd0cfac630c1dd520",
"id": "646dd556d524bc61c0139bd6",
"title": "Step 35"
},
{
"id": "646dd8c79ec23463a3d0e356",
"id": "646dd6f9caa862627dd87772",
"title": "Step 36"
},
{
"id": "646dd9d9a729916460724f16",
"id": "646dd7cfd0cfac630c1dd520",
"title": "Step 37"
},
{
"id": "646ddab8afd73764f5241bbf",
"id": "646dd8c79ec23463a3d0e356",
"title": "Step 38"
},
{
"id": "646ddb61ff08366570cc5902",
"id": "646dd9d9a729916460724f16",
"title": "Step 39"
},
{
"id": "646ddd3f9f97a0667b964bdb",
"id": "646ddab8afd73764f5241bbf",
"title": "Step 40"
},
{
"id": "646dde7dc20dc167489faa69",
"id": "646ddb61ff08366570cc5902",
"title": "Step 41"
},
{
"id": "646ddf888632fa67f1180940",
"id": "646ddd3f9f97a0667b964bdb",
"title": "Step 42"
},
{
"id": "646de5dc8988076a1d992afd",
"id": "646dde7dc20dc167489faa69",
"title": "Step 43"
},
{
"id": "646de6a97b50a86ac487de86",
"id": "646ddf888632fa67f1180940",
"title": "Step 44"
},
{
"id": "646de7b64467e96b7d35b5cd",
"id": "646de5dc8988076a1d992afd",
"title": "Step 45"
},
{
"id": "646de8478d6f796bfbdccfb2",
"id": "646de6a97b50a86ac487de86",
"title": "Step 46"
},
{
"id": "646de8d204a3426c7d184372",
"id": "646de7b64467e96b7d35b5cd",
"title": "Step 47"
},
{
"id": "646dea1c98c2426d43a705c3",
"id": "646de8478d6f796bfbdccfb2",
"title": "Step 48"
},
{
"id": "646deb169847f86df0f95bfc",
"id": "646de8d204a3426c7d184372",
"title": "Step 49"
},
{
"id": "646dec359bef3b7811fba5a6",
"id": "646dea1c98c2426d43a705c3",
"title": "Step 50"
},
{
"id": "646dedbcba062079128b2ecc",
"id": "646deb169847f86df0f95bfc",
"title": "Step 51"
},
{
"id": "646def5e863abf7a14501421",
"id": "646dec359bef3b7811fba5a6",
"title": "Step 52"
},
{
"id": "646df03c8f79337ab46f148b",
"id": "646dedbcba062079128b2ecc",
"title": "Step 53"
},
{
"id": "646df0cf26413a7b35e4b8b3",
"id": "646def5e863abf7a14501421",
"title": "Step 54"
},
{
"id": "646df1d1aa4ae57bdf1869c4",
"id": "646df03c8f79337ab46f148b",
"title": "Step 55"
},
{
"id": "646dffd8ce9ac77ec1906f2e",
"id": "646df0cf26413a7b35e4b8b3",
"title": "Step 56"
},
{
"id": "64a2687ef267e5934a2f93e3",
"id": "646df1d1aa4ae57bdf1869c4",
"title": "Step 57"
},
{
"id": "64a26ac5540c5493f4641f10",
"id": "646dffd8ce9ac77ec1906f2e",
"title": "Step 58"
},
{
"id": "646f0417322c0e04983a5149",
"id": "64a2687ef267e5934a2f93e3",
"title": "Step 59"
},
{
"id": "646f08293804a30685533c6f",
"id": "64a26ac5540c5493f4641f10",
"title": "Step 60"
},
{
"id": "646f09293eb3230723a62f77",
"id": "646f0417322c0e04983a5149",
"title": "Step 61"
},
{
"id": "646f0c9a1e3360092d1bbd33",
"id": "646f08293804a30685533c6f",
"title": "Step 62"
},
{
"id": "646f0ce5737243098ad6e494",
"id": "646f09293eb3230723a62f77",
"title": "Step 63"
},
{
"id": "646f0ef13604420a8744f7d4",
"id": "646f0c9a1e3360092d1bbd33",
"title": "Step 64"
},
{
"id": "646f0f7c5933560af8e7e380",
"id": "646f0ce5737243098ad6e494",
"title": "Step 65"
},
{
"id": "646f102bf87b350b593baa72",
"id": "646f0ef13604420a8744f7d4",
"title": "Step 66"
},
{
"id": "646f107abb89d00bb99f387a",
"id": "646f0f7c5933560af8e7e380",
"title": "Step 67"
},
{
"id": "64a3bcbc83e574b58c8ed048",
"id": "646f102bf87b350b593baa72",
"title": "Step 68"
},
{
"id": "646f12da0b4c5d0ca162834a",
"id": "646f107abb89d00bb99f387a",
"title": "Step 69"
},
{
"id": "646f135eab69d90d0c6d4e9b",
"id": "64a3bcbc83e574b58c8ed048",
"title": "Step 70"
},
{
"id": "646f159b2cffb21150b927cb",
"id": "646f12da0b4c5d0ca162834a",
"title": "Step 71"
},
{
"id": "646f164bf100dd11d226161f",
"id": "646f135eab69d90d0c6d4e9b",
"title": "Step 72"
},
{
"id": "646f1764e2f1d212ba9785a7",
"id": "646f159b2cffb21150b927cb",
"title": "Step 73"
},
{
"id": "646f1802a09a171332e14630",
"id": "646f164bf100dd11d226161f",
"title": "Step 74"
},
{
"id": "646f4d6c42dc5f214f4e7444",
"id": "646f1764e2f1d212ba9785a7",
"title": "Step 75"
},
{
"id": "646f4e46e81f7021d5fd9c1d",
"id": "646f1802a09a171332e14630",
"title": "Step 76"
},
{
"id": "646f4f6a14e3c522d130a0d2",
"id": "646f4d6c42dc5f214f4e7444",
"title": "Step 77"
},
{
"id": "646f4fe12b7985232bf475a5",
"id": "646f4e46e81f7021d5fd9c1d",
"title": "Step 78"
},
{
"id": "646f507e4d1cd323f17db4fc",
"id": "646f4f6a14e3c522d130a0d2",
"title": "Step 79"
},
{
"id": "646f516dbfc1342495515625",
"id": "646f4fe12b7985232bf475a5",
"title": "Step 80"
},
{
"id": "646f507e4d1cd323f17db4fc",
"title": "Step 81"
},
{
"id": "646f516dbfc1342495515625",
"title": "Step 82"
}
],
"helpCategory": "HTML-CSS"
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+40 -14
View File
@@ -7,34 +7,60 @@ dashedName: step-22
# --description--
You are going to make each ear look like a triangle.
Now you will learn a CSS trick to draw triangles.
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`.
This will be used to draw ears on the cat.
Using a class selector, give the `.cat-right-ear` element `height` and `width` properties set to `100px`. Set the `background-color` to white. Set the left and right borders to `35px solid blue`. Set the top and bottom borders to `35px solid red`.
# --hints--
You should have a `.cat-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`
You should have a `.cat-right-ear` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent')
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
```
Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent`
Your `.cat-right-ear` selector should have a `height` property set to `100px`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent')
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height === '100px')
```
Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`
Your `.cat-right-ear` selector should have a `width` property set to `100px`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '100px')
```
Your `.cat-right-ear` selector should have a `background-color` property set to `white`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor === 'white')
```
Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid blue`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid blue')
```
Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid blue`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid blue')
```
Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid red`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid red')
```
Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
```
# --seed--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cecc9eb5c4f4f73dafd07.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cecc9eb5c4f4f73dafd07
title: Step 23
title: Step 25
challengeType: 0
dashedName: step-23
dashedName: step-25
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cef0c2b98915094df7099.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cef0c2b98915094df7099
title: Step 24
title: Step 26
challengeType: 0
dashedName: step-24
dashedName: step-26
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf1206cac5f51804f49cf.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cf1206cac5f51804f49cf
title: Step 25
title: Step 27
challengeType: 0
dashedName: step-25
dashedName: step-27
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf2249f02ca5233d9af7c.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cf2249f02ca5233d9af7c
title: Step 26
title: Step 28
challengeType: 0
dashedName: step-26
dashedName: step-28
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf48d8f8e1f535a1821d3.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cf48d8f8e1f535a1821d3
title: Step 27
title: Step 29
challengeType: 0
dashedName: step-27
dashedName: step-29
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cf6cbca98e258da65c979
title: Step 28
title: Step 30
challengeType: 0
dashedName: step-28
dashedName: step-30
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf88aa884405a11ea5bcc.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cf88aa884405a11ea5bcc
title: Step 29
title: Step 31
challengeType: 0
dashedName: step-29
dashedName: step-31
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfc2b8e6fe95c20a819d5.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cfc2b8e6fe95c20a819d5
title: Step 30
title: Step 32
challengeType: 0
dashedName: step-30
dashedName: step-32
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfd853634255d02b64cc1.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cfd853634255d02b64cc1
title: Step 31
title: Step 33
challengeType: 0
dashedName: step-31
dashedName: step-33
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646cfde6ac612e5d60391f50
title: Step 32
title: Step 34
challengeType: 0
dashedName: step-32
dashedName: step-34
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd556d524bc61c0139bd6.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dd556d524bc61c0139bd6
title: Step 33
title: Step 35
challengeType: 0
dashedName: step-33
dashedName: step-35
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd6f9caa862627dd87772.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dd6f9caa862627dd87772
title: Step 34
title: Step 36
challengeType: 0
dashedName: step-34
dashedName: step-36
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dd7cfd0cfac630c1dd520
title: Step 35
title: Step 37
challengeType: 0
dashedName: step-35
dashedName: step-37
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dd8c79ec23463a3d0e356
title: Step 36
title: Step 38
challengeType: 0
dashedName: step-36
dashedName: step-38
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd9d9a729916460724f16.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dd9d9a729916460724f16
title: Step 37
title: Step 39
challengeType: 0
dashedName: step-37
dashedName: step-39
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddab8afd73764f5241bbf.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646ddab8afd73764f5241bbf
title: Step 38
title: Step 40
challengeType: 0
dashedName: step-38
dashedName: step-40
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646ddb61ff08366570cc5902
title: Step 39
title: Step 41
challengeType: 0
dashedName: step-39
dashedName: step-41
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddd3f9f97a0667b964bdb.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646ddd3f9f97a0667b964bdb
title: Step 40
title: Step 42
challengeType: 0
dashedName: step-40
dashedName: step-42
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dde7dc20dc167489faa69.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dde7dc20dc167489faa69
title: Step 41
title: Step 43
challengeType: 0
dashedName: step-41
dashedName: step-43
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddf888632fa67f1180940.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646ddf888632fa67f1180940
title: Step 42
title: Step 44
challengeType: 0
dashedName: step-42
dashedName: step-44
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de5dc8988076a1d992afd.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646de5dc8988076a1d992afd
title: Step 43
title: Step 45
challengeType: 0
dashedName: step-43
dashedName: step-45
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de6a97b50a86ac487de86.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646de6a97b50a86ac487de86
title: Step 44
title: Step 46
challengeType: 0
dashedName: step-44
dashedName: step-46
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de7b64467e96b7d35b5cd.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646de7b64467e96b7d35b5cd
title: Step 45
title: Step 47
challengeType: 0
dashedName: step-45
dashedName: step-47
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8478d6f796bfbdccfb2.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646de8478d6f796bfbdccfb2
title: Step 46
title: Step 48
challengeType: 0
dashedName: step-46
dashedName: step-48
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646de8d204a3426c7d184372.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646de8d204a3426c7d184372
title: Step 47
title: Step 49
challengeType: 0
dashedName: step-47
dashedName: step-49
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dea1c98c2426d43a705c3.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dea1c98c2426d43a705c3
title: Step 48
title: Step 50
challengeType: 0
dashedName: step-48
dashedName: step-50
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646deb169847f86df0f95bfc.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646deb169847f86df0f95bfc
title: Step 49
title: Step 51
challengeType: 0
dashedName: step-49
dashedName: step-51
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dec359bef3b7811fba5a6.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dec359bef3b7811fba5a6
title: Step 50
title: Step 52
challengeType: 0
dashedName: step-50
dashedName: step-52
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dedbcba062079128b2ecc.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dedbcba062079128b2ecc
title: Step 51
title: Step 53
challengeType: 0
dashedName: step-51
dashedName: step-53
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646def5e863abf7a14501421.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646def5e863abf7a14501421
title: Step 52
title: Step 54
challengeType: 0
dashedName: step-52
dashedName: step-54
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df03c8f79337ab46f148b.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646df03c8f79337ab46f148b
title: Step 53
title: Step 55
challengeType: 0
dashedName: step-53
dashedName: step-55
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df0cf26413a7b35e4b8b3.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646df0cf26413a7b35e4b8b3
title: Step 54
title: Step 56
challengeType: 0
dashedName: step-54
dashedName: step-56
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646df1d1aa4ae57bdf1869c4.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646df1d1aa4ae57bdf1869c4
title: Step 55
title: Step 57
challengeType: 0
dashedName: step-55
dashedName: step-57
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dffd8ce9ac77ec1906f2e.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646dffd8ce9ac77ec1906f2e
title: Step 56
title: Step 58
challengeType: 0
dashedName: step-56
dashedName: step-58
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0417322c0e04983a5149.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f0417322c0e04983a5149
title: Step 59
title: Step 61
challengeType: 0
dashedName: step-59
dashedName: step-61
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f08293804a30685533c6f.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f08293804a30685533c6f
title: Step 60
title: Step 62
challengeType: 0
dashedName: step-60
dashedName: step-62
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f09293eb3230723a62f77.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f09293eb3230723a62f77
title: Step 61
title: Step 63
challengeType: 0
dashedName: step-61
dashedName: step-63
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0c9a1e3360092d1bbd33.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f0c9a1e3360092d1bbd33
title: Step 62
title: Step 64
challengeType: 0
dashedName: step-62
dashedName: step-64
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ce5737243098ad6e494.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f0ce5737243098ad6e494
title: Step 63
title: Step 65
challengeType: 0
dashedName: step-63
dashedName: step-65
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0ef13604420a8744f7d4.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f0ef13604420a8744f7d4
title: Step 64
title: Step 66
challengeType: 0
dashedName: step-64
dashedName: step-66
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f0f7c5933560af8e7e380.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f0f7c5933560af8e7e380
title: Step 65
title: Step 67
challengeType: 0
dashedName: step-65
dashedName: step-67
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f102bf87b350b593baa72
title: Step 66
title: Step 68
challengeType: 0
dashedName: step-66
dashedName: step-68
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f107abb89d00bb99f387a.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f107abb89d00bb99f387a
title: Step 67
title: Step 69
challengeType: 0
dashedName: step-67
dashedName: step-69
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f12da0b4c5d0ca162834a.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f12da0b4c5d0ca162834a
title: Step 69
title: Step 71
challengeType: 0
dashedName: step-69
dashedName: step-71
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f135eab69d90d0c6d4e9b.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f135eab69d90d0c6d4e9b
title: Step 70
title: Step 72
challengeType: 0
dashedName: step-70
dashedName: step-72
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f159b2cffb21150b927cb.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f159b2cffb21150b927cb
title: Step 71
title: Step 73
challengeType: 0
dashedName: step-71
dashedName: step-73
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f164bf100dd11d226161f.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f164bf100dd11d226161f
title: Step 72
title: Step 74
challengeType: 0
dashedName: step-72
dashedName: step-74
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f1764e2f1d212ba9785a7
title: Step 73
title: Step 75
challengeType: 0
dashedName: step-73
dashedName: step-75
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1802a09a171332e14630.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f1802a09a171332e14630
title: Step 74
title: Step 76
challengeType: 0
dashedName: step-74
dashedName: step-76
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f4d6c42dc5f214f4e7444
title: Step 75
title: Step 77
challengeType: 0
dashedName: step-75
dashedName: step-77
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4e46e81f7021d5fd9c1d.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f4e46e81f7021d5fd9c1d
title: Step 76
title: Step 78
challengeType: 0
dashedName: step-76
dashedName: step-78
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4f6a14e3c522d130a0d2.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f4f6a14e3c522d130a0d2
title: Step 77
title: Step 79
challengeType: 0
dashedName: step-77
dashedName: step-79
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4fe12b7985232bf475a5.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f4fe12b7985232bf475a5
title: Step 78
title: Step 80
challengeType: 0
dashedName: step-78
dashedName: step-80
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f507e4d1cd323f17db4fc.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f507e4d1cd323f17db4fc
title: Step 79
title: Step 81
challengeType: 0
dashedName: step-79
dashedName: step-81
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f516dbfc1342495515625.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 646f516dbfc1342495515625
title: Step 80
title: Step 82
challengeType: 0
dashedName: step-80
dashedName: step-82
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 64a2687ef267e5934a2f93e3
title: Step 57
title: Step 59
challengeType: 0
dashedName: step-57
dashedName: step-59
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a26ac5540c5493f4641f10.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 64a26ac5540c5493f4641f10
title: Step 58
title: Step 60
challengeType: 0
dashedName: step-58
dashedName: step-60
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a3bcbc83e574b58c8ed048.md
+2 -2
View File
@@ -1,8 +1,8 @@
---
id: 64a3bcbc83e574b58c8ed048
title: Step 68
title: Step 70
challengeType: 0
dashedName: step-68
dashedName: step-70
---
# --description--
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8a8d9861319ee901a90.md
+148
View File
@@ -0,0 +1,148 @@
---
id: 6676a8a8d9861319ee901a90
title: Step 24
challengeType: 0
dashedName: step-24
---
# --description--
Now you can begin working on your cat's ears.
Clean up your review code by removing the `.cat-right-ear` selector and all of its properties.
Using a class selector, give the `.cat-left-ear` element a left and right border of `35px solid transparent` each. Also, set the bottom border to `70px solid #5e5e5e`.
# --hints--
Your `.cat-right-ear` selector not should have a `height` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height)
```
Your `.cat-right-ear` selector should not have a `width` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width)
```
Your `.cat-right-ear` selector should not have a `border-left` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft)
```
Your `.cat-right-ear` selector should not have a `border-right` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight)
```
Your `.cat-right-ear` selector should not have a `border-top` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop)
```
Your `.cat-right-ear` selector should not have a `border-bottom` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom)
```
You should not have a `.cat-right-ear` selector.
```js
assert(!new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
```
You should have a `.cat-left-ear` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear'))
```
Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent`
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent')
```
Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent`
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent')
```
Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fCC Cat Painting</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<div class="cat-head">
<div class="cat-ears">
<div class="cat-left-ear">
<div class="cat-left-inner-ear"></div>
</div>
<div class="cat-right-ear">
<div class="cat-right-inner-ear"></div>
</div>
</div>
</div>
</main>
</body>
</html>
```
```css
* {
box-sizing: border-box;
}
body {
background-color: #c9d2fc;
}
.cat-head {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
width: 205px;
height: 180px;
border: 1px solid #000;
border-radius: 46%;
}
--fcc-editable-region--
.cat-right-ear {
height: 0;
width: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid transparent;
border-bottom: 35px solid red;
}
--fcc-editable-region--
```
curriculum/challenges/english/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6676a8b01e56ec1a1e07c202.md
+131
View File
@@ -0,0 +1,131 @@
---
id: 6676a8b01e56ec1a1e07c202
title: Step 23
challengeType: 0
dashedName: step-23
---
# --description--
Notice that you now have a white square with thick borders. The borders have diagonal edges which can be used to create triangles.
Within the same class selector adjust `height` and `width` to `0`. Set the left, right and top border to `transparent`.
Remove the `background-color` property, and you should see a triangle.
# --hints--
You should have a `.cat-right-ear` selector.
```js
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-right-ear'))
```
Your `.cat-right-ear` selector should have a `height` property set to `0`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.height == '0px')
```
Your `.cat-right-ear` selector should have a `width` property set to `0`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.width === '0px')
```
Your `.cat-right-ear` selector should have a `border-left` property set to `35px solid transparent`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderLeft === '35px solid transparent')
```
Your `.cat-right-ear` selector should have a `border-right` property set to `35px solid transparent`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderRight === '35px solid transparent')
```
Your `.cat-right-ear` selector should have a `border-top` property set to `35px solid transparent`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderTop === '35px solid transparent')
```
Your `.cat-right-ear` selector should have a `border-bottom` property set to `35px solid red`. Don't forget to add a semi-colon.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.borderBottom === '35px solid red')
```
Your `.cat-right-ear` selector should not have a `background-color` property.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.backgroundColor)
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fCC Cat Painting</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<div class="cat-head">
<div class="cat-ears">
<div class="cat-left-ear">
<div class="cat-left-inner-ear"></div>
</div>
<div class="cat-right-ear">
<div class="cat-right-inner-ear"></div>
</div>
</div>
</div>
</main>
</body>
</html>
```
```css
* {
box-sizing: border-box;
}
body {
background-color: #c9d2fc;
}
.cat-head {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
width: 205px;
height: 180px;
border: 1px solid #000;
border-radius: 46%;
}
--fcc-editable-region--
.cat-right-ear {
height: 100px;
width: 100px;
background-color: white;
border-left: 35px solid blue;
border-right: 35px solid blue;
border-top: 35px solid red;
border-bottom: 35px solid red;
}
--fcc-editable-region--
```