feat: add CSS Color Markers project (#44459)
* feat: first draft of CSS Color Markers project * Update client/i18n/locales/english/intro.json Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-007.md Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-046.md Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-079.md Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * feat: begin adding tests * feat: add more tests, fix wording and some CSS values * feat: add more steps, fix wording * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * feat: add more tests, simplify some regex tests, fix wording * fix: preformatted block names and help category map * feat: finish first draft of color marker tests * fix: simplify text involving classes * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-004.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-054.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-089.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * Update curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-094.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add outro message to final CSS color markers step * fix: make most regex tests case insensitive, add note about casing for filename * correct double key from rebase * remove jQuery for betterness * move project to new superblock * adjust meta to match others * fix: add new to helper call * regex-ise funny lessons * unnecessary: add -22 superblock * fix: make linter happy * regex-ise missed challenges...oops * Revert "fix: make linter happy" This reverts commit6e6e3cf503. * Revert "unnecessary: add -22 superblock" This reverts commita58045607e. * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-005.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-010.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-052.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-053.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-054.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-055.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-056.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-057.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-058.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-059.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-062.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-063.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-064.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-065.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-068.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-069.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-color-markers-set/step-082.md Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * fix: rename project to "Learn CSS Colors by Building a Set of Colored Markers" * Update curriculum/challenges/english/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/step-010.md Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * adjust superblock to include `2022/` Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Kristofer Koishigawa
committed by
GitHub
GitHub
parent
ff566d441a
commit
e878b3ee57
@ -95,6 +95,10 @@
|
||||
"title": "Build a Technical Documentation Page Project",
|
||||
"intro": ["placeholder", "holder of place"]
|
||||
},
|
||||
"learn-css-colors-by-building-a-set-of-colored-markers": {
|
||||
"title": "Learn CSS Colors by Building a Set of Colored Markers",
|
||||
"intro": ["placeholder", "holder of place"]
|
||||
},
|
||||
"learn-html-by-building-a-cat-photo-app": {
|
||||
"title": "Learn HTML by Building a Cat Photo App",
|
||||
"intro": [
|
||||
@ -262,15 +266,24 @@
|
||||
},
|
||||
"basic-javascript-rpg-game": {
|
||||
"title": "Basic JavaScript RPG Game",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"intermediate-javascript-calorie-counter": {
|
||||
"title": "Intermediate JavaScript Calorie Counter",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"functional-programming-spreadsheet": {
|
||||
"title": "Functional Programming Spreadsheet",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -370,7 +383,13 @@
|
||||
"In these projects, you'll need to fetch data and parse a dataset, then use D3 to create different data visualizations. Finish them all to earn your Data Visualization certification."
|
||||
]
|
||||
},
|
||||
"d3-dashboard": { "title": "D3 Dashboard", "intro": ["", ""] }
|
||||
"d3-dashboard": {
|
||||
"title": "D3 Dashboard",
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"relational-databases": {
|
||||
@ -637,4 +656,4 @@
|
||||
"legacy-header": "Legacy Courses",
|
||||
"legacy-desc": "These courses are no longer part of the certification path, but are still available for you to further your learning."
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Learn CSS Colors by Building a Set of Colored Markers Project
|
||||
block: learn-css-colors-by-building-a-set-of-colored-markers
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn CSS Colors by Building a Set of Colored Markers Project
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -79,6 +79,7 @@
|
||||
"learn-github-by-building-a-list-of-inspirational-quotes": "Relational Databases",
|
||||
"number-guessing-game": "Relational Databases",
|
||||
"learn-accessibility-by-building-a-quiz": "HTML-CSS",
|
||||
"learn-css-colors-by-building-a-set-of-colored-markers": "HTML-CSS",
|
||||
"learn-html-forms-by-building-a-registration-form": "HTML-CSS",
|
||||
"learn-css-animation-by-building-a-ferris-wheel": "HTML-CSS",
|
||||
"learn-css-flexbox-by-building-a-photo-gallery": "HTML-CSS",
|
||||
|
||||
@ -0,0 +1,390 @@
|
||||
{
|
||||
"name": "Learn CSS Colors by Building a Set of Colored Markers",
|
||||
"isUpcomingChange": false,
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true,
|
||||
"dashedName": "learn-css-colors-by-building-a-set-of-colored-markers",
|
||||
"order": 2,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "2022/responsive-web-design",
|
||||
"challengeOrder": [
|
||||
[
|
||||
"61695197ac34f0407e339882",
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"61695ab9f6ffe951c16d03dd",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"61695c4aad56f95497c19583",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"61695d1fbc003856628bf561",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"616965351e74d4689eb6de30",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"616968c2c94c8071b349c146",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"61696ef7ac756c829f9e4048",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"616971b3cd990186b66c99a1",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"616d3a67ccf800ad94ec89ae",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"616d47bc9eedc4bc7f621bec",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"616d4a84b756d9c4b8255093",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"616d50b93ba424d6282c99cf",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"616d525007b8c5d8b3308b1c",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"616d55bd160a95e22453a081",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"616d595270d902f0e7086e18",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"61764c602bee6974e7790f35",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"61764f23ea21477b76f3b80f",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"61764f7e5240eb7ccc7f6a0a",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"61764fdda535587e1fefb3aa",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"6176519636a76b810ab1219a",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"617b65579ce424bf5f02ca73",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"617b8b38f32bf2080a140675",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"617b8e0d93a8d10d9a90e720",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"617b92b9de349513466f6156",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"617b954d9f4f6217a749380e",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"617b97abd9f3f61d1590b815",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"617b9ad735109e217284e095",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"617bb5624a75e86463b7e638",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"617bb77353188166af43f3ac",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"617bb9fdef27bc6aa0470ac2",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"617bbb6b97a83f6d1f7d6e38",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"617bc3386dc7d07d6469bf20",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"617bc4824e233180553a8069",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"617bd6ec666b1da2587e4e37",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"618a00ed1ca871a2b3aca0cb",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"618a0927005553b74bfa05ae",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"618a0b2befb143baefab632b",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"618a1275e873dcc803c2d1aa",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"618a132676346ac9f7fd59dd",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"618a16873520a8d088ffdf44",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"618a16d21bd3dad1bb3aa8ef",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"619b72a0db211f1c29afb906",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"619b7396e57b771f903be90d",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"619b7424f43ec9215e538afe",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"619b74fa777a2b2473c94f82",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"619b761916dac02643940022",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"619b7c3c83de403126b69c1e",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"619b7fd56aa2253778bcf5f7",
|
||||
"Step 48"
|
||||
],
|
||||
[
|
||||
"61a489b8579e87364b2d2cdb",
|
||||
"Step 49"
|
||||
],
|
||||
[
|
||||
"61a493ead935c148d2b76312",
|
||||
"Step 50"
|
||||
],
|
||||
[
|
||||
"61b095989e7fc020b43b1bb9",
|
||||
"Step 51"
|
||||
],
|
||||
[
|
||||
"61b095a79e7fc020b43b1bba",
|
||||
"Step 52"
|
||||
],
|
||||
[
|
||||
"61a498399534644f59cff05e",
|
||||
"Step 53"
|
||||
],
|
||||
[
|
||||
"61a49d15bdbb5e57cc6fd280",
|
||||
"Step 54"
|
||||
],
|
||||
[
|
||||
"61a4a53c4459446dc134a1c6",
|
||||
"Step 55"
|
||||
],
|
||||
[
|
||||
"61a4a6e908bc34725b4c25ac",
|
||||
"Step 56"
|
||||
],
|
||||
[
|
||||
"61a4a7877da33a73a1c1723e",
|
||||
"Step 57"
|
||||
],
|
||||
[
|
||||
"61a4ac092eb21e7dbfe61c33",
|
||||
"Step 58"
|
||||
],
|
||||
[
|
||||
"61a4acbb5587197f68544d00",
|
||||
"Step 59"
|
||||
],
|
||||
[
|
||||
"61a4ada3aabeec822b2975d9",
|
||||
"Step 60"
|
||||
],
|
||||
[
|
||||
"61a4ae5f29eb5584187201c3",
|
||||
"Step 61"
|
||||
],
|
||||
[
|
||||
"61b095c79e7fc020b43b1bbb",
|
||||
"Step 62"
|
||||
],
|
||||
[
|
||||
"61a5be9833e7dc178de2af10",
|
||||
"Step 63"
|
||||
],
|
||||
[
|
||||
"61a5bfe091060f1d6a629dd0",
|
||||
"Step 64"
|
||||
],
|
||||
[
|
||||
"61a5c906ab73313316e342f0",
|
||||
"Step 65"
|
||||
],
|
||||
[
|
||||
"61a5ca57f50ded36d33eef96",
|
||||
"Step 66"
|
||||
],
|
||||
[
|
||||
"61a5d594b887335228ee6533",
|
||||
"Step 67"
|
||||
],
|
||||
[
|
||||
"61a5d6701ee08953ca375243",
|
||||
"Step 68"
|
||||
],
|
||||
[
|
||||
"61a5d79c858bef560e26c685",
|
||||
"Step 69"
|
||||
],
|
||||
[
|
||||
"61a5d7ef1cfcf45764df07a2",
|
||||
"Step 70"
|
||||
],
|
||||
[
|
||||
"61adc60b69cd4b87739d2174",
|
||||
"Step 71"
|
||||
],
|
||||
[
|
||||
"61b092eb9e7fc020b43b1bb2",
|
||||
"Step 72"
|
||||
],
|
||||
[
|
||||
"61b093179e7fc020b43b1bb3",
|
||||
"Step 73"
|
||||
],
|
||||
[
|
||||
"61b093219e7fc020b43b1bb4",
|
||||
"Step 74"
|
||||
],
|
||||
[
|
||||
"61b093329e7fc020b43b1bb5",
|
||||
"Step 75"
|
||||
],
|
||||
[
|
||||
"61b093429e7fc020b43b1bb6",
|
||||
"Step 76"
|
||||
],
|
||||
[
|
||||
"61b0934c9e7fc020b43b1bb7",
|
||||
"Step 77"
|
||||
],
|
||||
[
|
||||
"61b0936d9e7fc020b43b1bb8",
|
||||
"Step 78"
|
||||
],
|
||||
[
|
||||
"61adc91467b5d59328b9f781",
|
||||
"Step 79"
|
||||
],
|
||||
[
|
||||
"61add79e739a5faee9d96080",
|
||||
"Step 80"
|
||||
],
|
||||
[
|
||||
"61add929e41980b1edbdba7e",
|
||||
"Step 81"
|
||||
],
|
||||
[
|
||||
"61addaf7e83988b59a7d18ff",
|
||||
"Step 82"
|
||||
],
|
||||
[
|
||||
"61ade49b2dad60c076cbd32d",
|
||||
"Step 83"
|
||||
],
|
||||
[
|
||||
"61b09f739aa6572d2064f9b8",
|
||||
"Step 84"
|
||||
],
|
||||
[
|
||||
"61b0a1b2af494934b7ec1a72",
|
||||
"Step 85"
|
||||
],
|
||||
[
|
||||
"61b0a44a6b865738ba49b9fb",
|
||||
"Step 86"
|
||||
],
|
||||
[
|
||||
"61b306305810f1c9040ce5a2",
|
||||
"Step 87"
|
||||
],
|
||||
[
|
||||
"61b30995968123ceb6b76167",
|
||||
"Step 88"
|
||||
],
|
||||
[
|
||||
"61b30a286c228bd0c493c09a",
|
||||
"Step 89"
|
||||
],
|
||||
[
|
||||
"61b31287fb580ae75a486047",
|
||||
"Step 90"
|
||||
],
|
||||
[
|
||||
"61b315e76a63b3ecbbb11b75",
|
||||
"Step 91"
|
||||
],
|
||||
[
|
||||
"61b3183655ec10efd8c0bb07",
|
||||
"Step 92"
|
||||
],
|
||||
[
|
||||
"61b31a451057fff645ec09be",
|
||||
"Step 93"
|
||||
],
|
||||
[
|
||||
"61b31cd7b0c76bfc076b4719",
|
||||
"Step 94"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 61695197ac34f0407e339882
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you've seen in the previous projects, webpages should start with a `DOCTYPE html` declaration, followed by an `html` element.
|
||||
|
||||
Add a `DOCTYPE html` declaration at the top of the document, and an `html` element after that.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 61695ab9f6ffe951c16d03dd
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nest a `head` element within the `html` element. Just after the `head` element, add a `body` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
Your `head` and `body` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
Your `head` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
Your `body` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 61695c4aad56f95497c19583
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remember that the `title` element gives search engines extra information about the page. It also tells browsers what text to display in the title bar when the page is open, and on the tab for the page.
|
||||
|
||||
Within the `head` element, nest a `title` element with the text `CSS Color Markers`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `title` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<title\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `title` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/title\s*>/i));
|
||||
```
|
||||
|
||||
Your project should have the title `CSS Color Markers`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'css color markers')
|
||||
```
|
||||
|
||||
Remember, casing and spelling matter for the title text.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'CSS Color Markers');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 61695d1fbc003856628bf561
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To tell browsers how to encode characters on your page, set the `charset` to `utf-8`. `utf-8` is a universal character set that includes almost every character from all human languages.
|
||||
|
||||
Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing, and do not need a closing tag.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have one `meta` element.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 1);
|
||||
```
|
||||
|
||||
Your `meta` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
```
|
||||
|
||||
Your `meta` element should have a `charset` attribute set to `utf-8`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<title>CSS Color Markers</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: 616965351e74d4689eb6de30
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, use a `viewport` `<meta>` tag to make sure your page looks the same on all devices.
|
||||
|
||||
Nest a self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `meta` elements.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
Your new `meta` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
```
|
||||
|
||||
Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0');
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Markers</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 616968c2c94c8071b349c146
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you're ready to start adding content to the page.
|
||||
|
||||
Within the `body`, nest an `h1` element with the text `CSS Color Markers`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have an `h1` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('h1');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
You should have an opening `h1` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `h1` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1\s*>/i));
|
||||
```
|
||||
|
||||
Your `h1` element should be within the `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1')?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `CSS Color Markers`.
|
||||
|
||||
```js
|
||||
const h1 = document.querySelector('h1');
|
||||
assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matter for the `h1` text.
|
||||
|
||||
```js
|
||||
const h1 = document.querySelector('h1');
|
||||
assert.equal(h1?.textContent?.trim(), 'CSS Color Markers');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 61696ef7ac756c829f9e4048
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this project you'll work with an external CSS file to style the page. We've already created a `styles.css` file for you. But before you can use it, you'll need to link it to the page.
|
||||
|
||||
Nest a `link` element within the `head`. Give it a `rel` attribute set to `stylesheet`, a `type` attribute set to `text/css`, and an `href` attribute set to `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have one `link` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link/i)?.length === 1);
|
||||
```
|
||||
|
||||
Your `link` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/link>/i) === null);
|
||||
```
|
||||
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
const head = code.match(/<head>(.|\r|\n)*<\/head>/i)?.[0];
|
||||
assert(head.match(/<link/i)?.length === 1)
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\s\S]*?rel=('|"|`)stylesheet\1/gi)?.length === 1);
|
||||
```
|
||||
|
||||
Your `link` element should have a `type` attribute with the value `text/css`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\s\S]*?type=('|"|`)text\/css\1/gi)?.length === 1);
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`. Remember, casing matters when you link to an external file.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
```
|
||||
@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 616971b3cd990186b66c99a1
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your external CSS file is set up, you can start styling the page.
|
||||
|
||||
As a reminder, here's how to target a paragraph element and align it to the right:
|
||||
|
||||
```css
|
||||
p {
|
||||
text-align: right;
|
||||
}
|
||||
```
|
||||
|
||||
Create a new CSS rule that targets the `h1` element, and set its `text-align` property to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `h1` selector.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
Your `h1` CSS rule should have a `text-align` property set to `center`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 616d3a67ccf800ad94ec89ae
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll add some elements that you'll eventually style into color markers.
|
||||
|
||||
First, within the `body`, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `div` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div.*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `div` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/div\s*>/i));
|
||||
```
|
||||
|
||||
Your `div` element should be within your `body` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
Your `div` element should be after the `h1` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('h1 + div'));
|
||||
```
|
||||
|
||||
Your `div` element should have a `class` attribute set to `container`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.classList?.contains('container'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 616d47bc9eedc4bc7f621bec
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, within the `div`, add another `div` element and give it a class of `marker`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your new `div` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert([...code.matchAll(/<div.*?>/gi)][1]);
|
||||
```
|
||||
|
||||
Your new `div` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert([...code.matchAll(/<\/div\s*>/gi)][1]);
|
||||
```
|
||||
|
||||
You should nest your new `div` element within the `div` with the class `container`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.container')?.children[0]?.localName === 'div');
|
||||
```
|
||||
|
||||
You should give your new `div` element a class of `marker`.
|
||||
|
||||
```js
|
||||
const containerChildren = [...document.querySelector('.container')?.children];
|
||||
assert(containerChildren.every(child => child.classList?.contains('marker')));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
</div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 616d4a84b756d9c4b8255093
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to add some color to the page. Remember that one way to add color to an element is to use a <dfn>color keyword</dfn> like `black`, `cyan`, or `yellow`.
|
||||
|
||||
As a reminder, here's how to target the class `freecodecamp`:
|
||||
|
||||
```css
|
||||
.freecodecamp {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Create a new CSS rule that targets the class `marker`, and set its `background-color` property to `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a class selector to target the `marker` class.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.marker'));
|
||||
```
|
||||
|
||||
Your `.marker` CSS rule should have a `background-color` property set to `red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 616d50b93ba424d6282c99cf
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the marker `div` element is empty, it doesn't have any width or height by default.
|
||||
|
||||
In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.marker` CSS rule should have a `width` property set to `200px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px');
|
||||
```
|
||||
|
||||
Your `.marker` CSS rule should have a `height` property set to `25px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 616d525007b8c5d8b3308b1c
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your marker would look better if it was centered on the page. An easy way to do that is with the `margin` <dfn>shorthand property</dfn>.
|
||||
|
||||
In the last project, you set the margin area of elements separately with properties like `margin-top` and `margin-left`. The `margin` shorthand property makes it easy to set multiple margin areas at the same time.
|
||||
|
||||
To center your marker on the page, set its `margin` property to `auto`. This sets `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` all to `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.marker` CSS rule should have a `margin` property set to `auto`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 616d55bd160a95e22453a081
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've got one marker centered with color, it's time to add the other markers.
|
||||
|
||||
In the `container` `div`, add two more `div` elements and give them each a class of `marker`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first new `div` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert([...code.matchAll(/<div.*?>/gi)][2]);
|
||||
```
|
||||
|
||||
Your first new `div` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert([...code.matchAll(/<\/div\s*>/gi)][2]);
|
||||
```
|
||||
|
||||
Your second new `div` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert([...code.matchAll(/<div.*?>/gi)][3]);
|
||||
```
|
||||
|
||||
Your second new `div` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert([...code.matchAll(/<\/div\s*>/gi)][3]);
|
||||
```
|
||||
|
||||
Your new `div` elements should be within the `div` with the class `container`.
|
||||
|
||||
```js
|
||||
const containerChildren = [...document.querySelector('.container')?.children];
|
||||
assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3);
|
||||
```
|
||||
|
||||
Your new `div` elements should both have a class of `marker`.
|
||||
|
||||
```js
|
||||
const containerChildren = [...document.querySelector('.container')?.children];
|
||||
assert(containerChildren.every(child => child?.classList?.contains('marker')));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
--fcc-editable-region--
|
||||
<div class="container">
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: red;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 616d595270d902f0e7086e18
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
While you have three separate marker `div` elements, they look like one big rectangle. You should add some space between them to make it easier to see each element.
|
||||
|
||||
When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value.
|
||||
|
||||
In your `.marker` CSS rule, set the `margin` property to `10px auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.marker` CSS rule should have a `margin` property set to `10px auto`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: red;
|
||||
margin: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 61764c602bee6974e7790f35
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In school, you might have learned that red, yellow, and blue are primary colors, and learned how to create new colors by mixing those. However, this is an outdated model.
|
||||
|
||||
These days, there are two main color models: the <dfn>additive</dfn> RGB (red, green, blue) model used in electronic devices, and the <dfn>subtractive</dfn> CMYK (cyan, magenta, yellow, black) model used in print. In this project you'll work with the RGB model.
|
||||
|
||||
First, add the `class` `one` to the first marker `div` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `one` to the first marker `div` element.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
Your first marker `div` should have the classes `marker` and `one`.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: red;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 61764f23ea21477b76f3b80f
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, remove the `background-color` property and its value from the `.marker` CSS rule.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.marker` CSS rule should not have a `background-color` property and value.
|
||||
|
||||
```js
|
||||
assert(!code.includes('background-color') && !new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: red;
|
||||
margin: 10px auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 61764f7e5240eb7ccc7f6a0a
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Then, create a new CSS rule that targets the class `one` and set its `background-color` property to `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a class selector to target the class `one`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one'));
|
||||
```
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 61764fdda535587e1fefb3aa
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the class `two` to the second marker `div`, and the class `three` to the third marker `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `two` to the second marker `div` element in the `container` `div`.
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('two'));
|
||||
```
|
||||
|
||||
Your second marker `div` should have the classes `marker` and `two`.
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two'));
|
||||
```
|
||||
|
||||
You should add the class `three` to the third marker `div` element in the `container` `div`.
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
Your third marker `div` should have the classes `marker` and `three`.
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
<div class="marker">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 6176519636a76b810ab1219a
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a CSS rule that targets the class `two` and set its `background-color` property to `green`.
|
||||
|
||||
Also, create a separate CSS rule that targets the class `three` and set its `background-color` to `blue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a class selector to target the class `two`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two'));
|
||||
```
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `green`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green');
|
||||
```
|
||||
|
||||
You should use a class selector to target the class `three`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three'));
|
||||
```
|
||||
|
||||
Your `.three` CSS rule should have a `background-color` property set to `blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 617b65579ce424bf5f02ca73
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Earlier you learned that the RGB color model is additive. This means that colors begin as black, and change as different levels of red, green, and blue are introduced.
|
||||
|
||||
An easy way to see this is with the CSS `rgb` function.
|
||||
|
||||
Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a class selector to target the class `container`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container'));
|
||||
```
|
||||
|
||||
Your `.container` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 617b8b38f32bf2080a140675
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A function is a piece of code that can take an input and perform a specific action. The CSS `rgb` function accepts a values, or <dfn>arguments</dfn>, for red, green, and blue, and produces a color:
|
||||
|
||||
```css
|
||||
rgb(red, green, blue);
|
||||
```
|
||||
|
||||
Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color.
|
||||
|
||||
In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.one` CSS rule should not use the `red` color keyword to set the `background-color` property.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red');
|
||||
```
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.two {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 617b8e0d93a8d10d9a90e720
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that the `background-color` for your marker is still red. This is because you set the red value of the `rgb` function to the max of `255`, or 100% red, and set both the green and blue values to `0`.
|
||||
|
||||
Now use the `rgb` function to set the other colors.
|
||||
|
||||
In the `.two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green, and `0` for the other values. And in the `.three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue, and `0` for the other values.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.two` CSS rule should not use the `green` color keyword to set the `background-color` property.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green');
|
||||
```
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
Your `.three` CSS rule should not use the `blue` color keyword to set the `background-color` property.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue');
|
||||
```
|
||||
|
||||
Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: blue;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 617b92b9de349513466f6156
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green.
|
||||
|
||||
In the `two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 617b954d9f4f6217a749380e
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now add a little more vertical space between your markers and the edge of the `container` element they're in.
|
||||
|
||||
In the `.container` CSS rule, use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not remove the `background-color` property and its value from the `.container` CSS rule.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.container` CSS rule should have a `padding` property set to `10px 0`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 127, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617b97abd9f3f61d1590b815
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the additive RGB color model, <dfn>primary colors</dfn> are colors that, when combined, create pure white. But for this to happen, each color needs to be at its highest intensity.
|
||||
|
||||
Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `.two` CSS rule, set green back to the max value of `255`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 127, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617b9ad735109e217284e095
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have the primary RGB colors, it's time to combine them.
|
||||
|
||||
For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.container {
|
||||
background-color: rgb(0, 0, 0);
|
||||
padding: 10px 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617bb5624a75e86463b7e638
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>Secondary colors</dfn> are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values.
|
||||
|
||||
To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 617bb77353188166af43f3ac
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To create the next secondary color, cyan, update the `rgb` function in the `.two` CSS rule to combine pure green and pure blue.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 617bb9fdef27bc6aa0470ac2
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To create the final secondary color, magenta, update the `rgb` function in the `.three` CSS rule to combine pure blue and pure red.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.three {
|
||||
background-color: rgb(0, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617bbb6b97a83f6d1f7d6e38
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you're familiar with secondary colors, you'll learn how to create <dfn>tertiary colors</dfn>. Tertiary colors are created by combining a primary with a nearby secondary color.
|
||||
|
||||
To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule so that red is at the max value, and set green to `127`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 127, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 255, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 617bc3386dc7d07d6469bf20
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. This is because orange is the combination of red and yellow, and falls between the two colors on the color wheel.
|
||||
|
||||
To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in the `.two` CSS rule so that green is at the max value, and set blue to `127`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 127)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 617bc4824e233180553a8069
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in the `.three` CSS rule so that blue is at the max value, and set red to `127`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.three` CSS rule should have a `background-color` property set to `rgb(127, 0, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 127);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 617bd6ec666b1da2587e4e37
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta).
|
||||
|
||||
To create chartreuse green, update the `rgb` function in the `.one` rule so that red is at `127`, and set green to the max value.
|
||||
|
||||
For azure, update the `rgb` function in the `.two` rule so that green is at `127` and blue is at the max value.
|
||||
|
||||
And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` rule so that blue is at `127` and red is at the max value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `rgb(127, 255, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)');
|
||||
```
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)');
|
||||
```
|
||||
|
||||
Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 127, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 127);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(127, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 618a00ed1ca871a2b3aca0cb
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design.
|
||||
|
||||
First, in the rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. Remember that the `rgb` function uses the additive color model, where colors start as black and change as the values of red, green, and blue increase.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(127, 255, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 127, 255);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 127);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 618a0927005553b74bfa05ae
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A color wheel is a circle where similar colors, or <dfn>hues</dfn>, are near each other, and different ones are further apart. For example, pure red is between the hues rose and orange.
|
||||
|
||||
Two colors that are opposite from each other on the color wheel are called <dfn>complementary colors</dfn>. If two complementary colors are combined, they produce gray. But when they are placed side-by-side, these colors produce strong visual contrast and appear brighter.
|
||||
|
||||
In the `rgb` function for the `.one` CSS rule, set the red value to the max of `255` to produce pure red. In the `rgb` function for `.two` CSS rule, set the values for green and blue to the max of `255` to produce cyan.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 618a0b2befb143baefab632b
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background.
|
||||
|
||||
It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page.
|
||||
|
||||
First, in the `h1` rule, use the `rbg` function to set its background color to cyan.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not remove or modify the `text-align` property or its value.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
|
||||
```
|
||||
|
||||
Your `h1` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 618a1275e873dcc803c2d1aa
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, in the `.one` rule, use the `rgb` function to set the `background-color` to black. And in the `.two` rule, use the `rgb` function to set the `background-color` to red.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.one` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 618a132676346ac9f7fd59dd
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice how your eyes are naturally drawn to the red color in the center? When designing a site, you can use this effect to draw attention to important headings, buttons, or links.
|
||||
|
||||
There are several other important color combinations outside of complementary colors, but you'll learn those a bit later.
|
||||
|
||||
For now, use the `rgb` function in the `.two` rule to set the `background-color` to black.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.two {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 618a16873520a8d088ffdf44
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
And in the `h1` rule, remove the `background-color` property and value to go back to the default white color.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` CSS rule should not have a `background-color` property or value.
|
||||
|
||||
```js
|
||||
const backgroundColorInstances = code.match(/background-color:.*;/gi);
|
||||
assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
text-align: center;
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 618a16d21bd3dad1bb3aa8ef
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now it's time time to add other details to the markers, starting with the first one.
|
||||
|
||||
In the first marker `div` element, change the class `one` to `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first marker `div` should not have the class `one`.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(!containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
Your first marker `div` should have the classes `marker` and `red`.
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker one">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 619b72a0db211f1c29afb906
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Update the `.one` class selector to target the new `red` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should no longer have a `.one` class selector.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.one'));
|
||||
```
|
||||
|
||||
You should use a class selector to target the class `red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red'));
|
||||
```
|
||||
|
||||
Your `.red` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.one {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 619b7396e57b771f903be90d
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
And update the `rgb` function in the `.red` rule so that the red value is at the max.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 619b7424f43ec9215e538afe
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your second marker `div` should not have the class `two`.
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(!containerSecondChild?.classList?.contains('two'));
|
||||
```
|
||||
|
||||
Your second marker `div` should have the classes `marker` and `green`.
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green'));
|
||||
```
|
||||
|
||||
Your third marker `div` should not have the class `three`.
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(!containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
Your third marker `div` should have the classes `marker` and `blue`.
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker two">
|
||||
</div>
|
||||
<div class="marker three">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 619b74fa777a2b2473c94f82
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Update the CSS class selector `.two` so it targets the new `green` class. And update the `.three` selector so it targets the new `blue` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should no longer have a `.two` class selector.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.two'));
|
||||
```
|
||||
|
||||
You should use a class selector to target the class `green`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green'));
|
||||
```
|
||||
|
||||
Your `.green` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your code should no longer have a `.three` class selector.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.three'));
|
||||
```
|
||||
|
||||
You should use a class selector to target the class `blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue'));
|
||||
```
|
||||
|
||||
Your `.blue` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 619b761916dac02643940022
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A very common way to apply color to an element with CSS is with <dfn>hexadecimal</dfn> or hex values. While hex values sound complicated, they're really just another form of RGB values.
|
||||
|
||||
Hex color values start with a `#` character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represent green, and the third pair represent blue. For example, `#4B5320`.
|
||||
|
||||
In the `.green` CSS rule, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `background-color` property set to `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 619b7c3c83de403126b69c1e
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You may already be familiar with decimal, or base 10 values, which go from 0 - 10. Hexadecimal, or base 16 values, go from 0 - 9, then A - F:
|
||||
|
||||
```
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
|
||||
```
|
||||
|
||||
With hex colors, `00` is 0% of that color, and `FF` is 100%. So `#00FF00` translates to 0% red, 100% green, and 0% blue, and is the same as `rgb(0, 255, 0)`.
|
||||
|
||||
Lower the intensity of green by setting green value of the hex color to `7F`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `background-color` property set to `#007F00`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: #00FF00;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 619b7fd56aa2253778bcf5f7
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The <dfn>HSL</dfn> color model, or hue, saturation, and lightness, is another way to represent colors.
|
||||
|
||||
The CSS `hsl` function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.
|
||||
|
||||
If you imagine a color wheel, the hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees.
|
||||
|
||||
Saturation is the intensity of a color from 0%, or gray, to 100% for pure color.
|
||||
|
||||
Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral.
|
||||
|
||||
In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.blue` CSS rule should have a `background-color` property set to `hsl(240, 100%, 50%)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 61a489b8579e87364b2d2cdb
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You've learned a few ways to set flat colors in CSS, but you can also use a color transition, or <dfn>gradient</dfn>, on an element.
|
||||
|
||||
A gradient is when one color transitions into another. The CSS `linear-gradient` function lets you control the direction of the transition along a line, and which colors are used.
|
||||
|
||||
One thing to remember is that the `linear-gradient` function actually creates an `image` element, and is usually paired with the `background` property which can accept an image as a value.
|
||||
|
||||
In the `.red` CSS rule, change the `background-color` property to `background`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property with the value `rgb(255, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red').cssText === 'background: rgb(255, 0, 0);');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background-color: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 61a493ead935c148d2b76312
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `linear-gradient` function is very flexible -- here is the basic syntax you'll use in this tutorial:
|
||||
|
||||
```css
|
||||
linear-gradient(gradientDirection, color1, color2, ...);
|
||||
```
|
||||
|
||||
`gradientDirection` is the direction of the line used for the transition. `color1` and `color2` are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, `rgb`, or `hsl`.
|
||||
|
||||
Now you'll apply a red-to-green gradient along a 90 degree line to the first marker.
|
||||
|
||||
First, in the `.red` CSS rule, set the `background` property to `linear-gradient()`, and pass it the value `90deg` as the `gradientDirection`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`.
|
||||
|
||||
```js
|
||||
assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: rgb(255, 0, 0);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61b095989e7fc020b43b1bb9
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You'll use the `rgb` function for the colors of this gradient.
|
||||
|
||||
In the `linear-gradient` function, use the `rgb` function to set the first color argument to pure red.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`.
|
||||
|
||||
```js
|
||||
assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61b095a79e7fc020b43b1bba
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You won't see gradient yet because the `linear-gradient` function needs at least two color arguments to work.
|
||||
|
||||
In the same `linear-gradient` function, use the `rgb` function to set the second color argument to pure green.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a498399534644f59cff05e
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you can see, the `linear-gradient` function produced a smooth red-green gradient. While the `linear-gradient` function needs a minimum of two color arguments to work, it can accept many color arguments.
|
||||
|
||||
Use the `rgb` function to add pure blue as the third color argument to the `linear-gradient` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 61a49d15bdbb5e57cc6fd280
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Color-stops allow you to fine-tune where colors are placed along the gradient line. They are a length unit like `px` or percentages that follow a color in the `linear-gradient` function.
|
||||
|
||||
For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space:
|
||||
|
||||
```css
|
||||
linear-gradient(90deg, red 90%, black);
|
||||
```
|
||||
|
||||
In the `linear-gradient` function, add a `75%` color stop after the first red color argument. Do not add color stops to the other colors arguments.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a4a53c4459446dc134a1c6
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you know the basics of how the `linear-gradient` function and color-stops work, you can use them to make the markers look more realistic.
|
||||
|
||||
In the `linear-gradient` function, set `gradientDirection` to `180deg`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 61a4a6e908bc34725b4c25ac
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, set the color-stop for red to `0%`, the color-stop for green to `50%`, and the color-stop for blue to `100%`;
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a4a7877da33a73a1c1723e
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the color-stops are set, you'll apply different shades of red to each color argument in the `linear-gradient` function. The shades on the top and bottom edges of the marker will be darker, while the one in the middle will be lighter, as if there's a light above it.
|
||||
|
||||
For the first color argument, which is currently pure red, update the `rgb` function so the value for red is `122`, the value for green is `74`, and the value for blue is `14`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a4ac092eb21e7dbfe61c33
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now modify the second color argument in the `linear-gradient` function, which is currently pure green.
|
||||
|
||||
Update the `rgb` function so the value for red is `245`, the value of green is `62`, and the value of blue is `113`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a4acbb5587197f68544d00
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, modify the third color argument in the `linear-gradient` function, which is currently pure blue.
|
||||
|
||||
Update the `rgb` function so the value for red is `162`, the value of green is `27`, and the value of blue is `27`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a4ada3aabeec822b2975d9
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The red marker is looking much more realistic. Now you'll do the same for the green marker, using a combination of the `linear-gradient` function and hex colors.
|
||||
|
||||
In the `.green` CSS rule, change the `background-color` property to `background`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `background` property with the value `#007F00`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background-color: #007F00;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a4ae5f29eb5584187201c3
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For this marker, you'll use hex color codes for your gradient.
|
||||
|
||||
Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And for the first color argument, use a hex color code with the values `55` for red, `68` for green, and `0D` for blue.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`.
|
||||
|
||||
```js
|
||||
assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: #007F00;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 61b095c79e7fc020b43b1bbb
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the second color argument, use a hex color code with the values `71` for red, `F5` for green, and `3E` for blue.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(180deg, #55680D);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a5be9833e7dc178de2af10
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That's looking better, but the bottom edge of the green marker needs to be darker to add a little more dimension.
|
||||
|
||||
In the same `linear-gradient` function, add a hex color code with the values `11` for red, `6C` for green, and `31` for blue as the third color argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(180deg, #55680D, #71F53E);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 61a5bfe091060f1d6a629dd0
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Even without the color-stops, you might have noticed that the colors for the green marker transition at the same points as the red marker. The first color is at the start (0%), the second is in the middle (50%), and the last is at the end (100%) of the gradient line.
|
||||
|
||||
The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default.
|
||||
|
||||
In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 61a5c906ab73313316e342f0
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If no `gradientDirection` argument is provided to the `linear-gradient` function, it arranges colors from top to bottom, or along a 180 degree line, by default.
|
||||
|
||||
Clean up your code a little more by removing the `gradientDirection` argument from both `linear-gradient` functions.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules.
|
||||
|
||||
```js
|
||||
assert(!code.match(/linear-gradient\s*\(\s*180deg/gi));
|
||||
```
|
||||
|
||||
Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 61a5ca57f50ded36d33eef96
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments.
|
||||
|
||||
In the `.blue` CSS rule, change the `background-color` property to `background`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue').cssText === 'background: rgb(0, 0, 255);');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 61a5d594b887335228ee6533
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `linear-gradient` function, and pass in the `hsl` function with the values `186` for hue, `76%` for saturation, and `16%` for lightness as the first color argument.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`.
|
||||
|
||||
```js
|
||||
assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: hsl(240, 100%, 50%);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 61a5d6701ee08953ca375243
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As the second color argument, pass in the `hsl` function with the values `223` for hue, `90%` for saturation, and `60%` for lightness.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 61a5d79c858bef560e26c685
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
And as the third color argument, pass in the `hsl` function with the values `240` for hue, `56%` for saturation, and `42%` for lightness.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`.
|
||||
|
||||
```js
|
||||
assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 61a5d7ef1cfcf45764df07a2
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker.
|
||||
|
||||
Inside the red marker `div`, create a new `div` and give it a class of `sleeve`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your new `div` element should be within the red marker's `div` element.
|
||||
|
||||
```js
|
||||
const redMarkerChildren = [...document.querySelector('.red')?.children];
|
||||
assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1);
|
||||
```
|
||||
|
||||
Your new `div` element should have a class of `sleeve`.
|
||||
|
||||
```js
|
||||
const redMarkerChild = [...document.querySelector('.red')?.children][0];
|
||||
assert(redMarkerChild?.classList?.contains('sleeve'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 61adc60b69cd4b87739d2174
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a class selector to target class `sleeve`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve'));
|
||||
```
|
||||
|
||||
Your `.sleeve` CSS rule should have a `width` property set to `110px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px');
|
||||
```
|
||||
|
||||
Your `.sleeve` CSS rule should have a `height` property set to `25px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 61b092eb9e7fc020b43b1bb2
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the marker look more realistic, give the sleeve a transparent white color.
|
||||
|
||||
First, set the sleeve element's `background-color` to `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `background-color` property set to `white`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 61b093179e7fc020b43b1bb3
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>Opacity</dfn> describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side.
|
||||
|
||||
With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value `0`, or 0%, the element will be completely transparent, and at `1.0`, or 100%, the element will be completely opaque like it is by default.
|
||||
|
||||
In the `.sleeve` CSS rule, set the `opacity` property to `0.5`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 61b093219e7fc020b43b1bb4
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Another way to set the opacity for an element is with the <dfn>alpha channel</dfn>. Similar to the `opacity` property, the alpha channel controls how transparent or opaque a color is.
|
||||
|
||||
You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties.
|
||||
|
||||
Inside the `.sleeve` rule, remove the `opacity` property and value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should not have an `opacity` property and value.
|
||||
|
||||
```js
|
||||
assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 61b093329e7fc020b43b1bb5
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead.
|
||||
|
||||
The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel:
|
||||
|
||||
```css
|
||||
rgba(redValue, greenValue, blueValue, alphaValue);
|
||||
```
|
||||
|
||||
In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 61b093429e7fc020b43b1bb6
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the sleeve to push it to the right.
|
||||
|
||||
Add a new `div` with the class `cap` before the sleeve `div` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your new `div` element should be within the red marker `div`.
|
||||
|
||||
```js
|
||||
const redMarkerChildren = [...document.querySelector('div.red')?.children];
|
||||
assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
Your new `div` element should have a class of `cap`.
|
||||
|
||||
```js
|
||||
const redMarkerChildren = [...document.querySelector('div.red')?.children];
|
||||
assert(redMarkerChildren.some(child => child?.classList?.contains('cap')));
|
||||
```
|
||||
|
||||
Your cap `div` should be before the sleeve `div`.
|
||||
|
||||
```js
|
||||
const redMarkerChildren = [...document.querySelector('div.red')?.children];
|
||||
const cap = document.querySelector('div.cap');
|
||||
const sleeve = document.querySelector('div.sleeve');
|
||||
assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 61b0934c9e7fc020b43b1bb7
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a class selector to target the class `cap`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cap'));
|
||||
```
|
||||
|
||||
Your `.cap` CSS rule should have a `width` property set to `60px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px');
|
||||
```
|
||||
|
||||
Your `.cap` CSS rule should have a `height` property set to `25px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61b0936d9e7fc020b43b1bb8
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line.
|
||||
|
||||
This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other.
|
||||
|
||||
To position two `div` elements on the same line, set their `display` properties to `inline-block`.
|
||||
|
||||
Create a new rule to target both the `cap` and `sleeve` classes, and set `display` to `inline-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a class selector to target both the `cap` and `sleeve` classes.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap'));
|
||||
```
|
||||
|
||||
Your CSS rule should have a `display` property set to `inline-block`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 61adc91467b5d59328b9f781
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the last project, you learned a little bit about borders and the `border-color` property.
|
||||
|
||||
All HTML elements have borders, though they're usually set to `none` by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style.
|
||||
|
||||
In the `.sleeve` CSS rule, add the `border-left-width` property with the value `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `border-left-width` property and with the value `10px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 61add79e739a5faee9d96080
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Borders have several styles to choose from. You can make your border a solid line, but can also go with a dashed or dotted line if you prefer. Solid border lines are probably the most common.
|
||||
|
||||
In the `.sleeve` CSS rule, add the `border-left-style` property with the value `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `border-left-style` property and with the value `solid`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left-width: 10px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 61add929e41980b1edbdba7e
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your border should be visible now. If no color is set, black is used by default.
|
||||
|
||||
But to make your code more readable, it's better to set the border color explicitly.
|
||||
|
||||
In the `.sleeve` CSS rule, add the `border-left-color` property with the value `black`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `border-left-color` property and with the value `black`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left-width: 10px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 61addaf7e83988b59a7d18ff
|
||||
title: Step 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `border-left` shorthand property lets you to set the left border's width, style, and color at the same time.
|
||||
|
||||
Here is the syntax:
|
||||
|
||||
```css
|
||||
border-left: width style color;
|
||||
```
|
||||
|
||||
In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should not have a `border-left-width` property and value.
|
||||
|
||||
```js
|
||||
assert(!/border-left-width/g.test(code));
|
||||
```
|
||||
|
||||
Your `.sleeve` CSS rule should not have a `border-left-style` property and value.
|
||||
|
||||
```js
|
||||
assert(!/border-left-style/g.test(code));
|
||||
```
|
||||
|
||||
Your `.sleeve` CSS rule should not have a `border-left-color` property and value.
|
||||
|
||||
```js
|
||||
assert(!/border-left-color/g.test(code));
|
||||
```
|
||||
|
||||
Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px solid black`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left-width: 10px;
|
||||
border-left-style: solid;
|
||||
border-left-color: black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 61ade49b2dad60c076cbd32d
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your marker is looking good. But to make it look even more realistic, you can change the border style to double solid borders.
|
||||
|
||||
For the `border-left` shorthand property, change the border style value from `solid` to `double`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double black`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px solid black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 61b09f739aa6572d2064f9b8
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The black color of your border looks pretty harsh against the more transparent sleeve. You can use an alpha channel to lower the opacity of the black border.
|
||||
|
||||
For the `border-left` shorthand property, use the `rgba` function to set the color value to pure black with 75% opacity.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 61b0a1b2af494934b7ec1a72
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers.
|
||||
|
||||
Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your green marker `div` should contain two `div` elements.
|
||||
|
||||
```js
|
||||
const greenMarkerChildren = [...document.querySelector('.green')?.children];
|
||||
assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
Your green marker's cap `div` element should be before the sleeve `div` element.
|
||||
|
||||
```js
|
||||
const greenMarkerChildren = [...document.querySelector('.green')?.children];
|
||||
const greenMarkerCap = document.querySelector('.green .cap');
|
||||
const greenMarkerSleeve = document.querySelector('.green .sleeve');
|
||||
assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve));
|
||||
```
|
||||
|
||||
Your blue marker `div` should contain two `div` elements.
|
||||
|
||||
```js
|
||||
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2);
|
||||
```
|
||||
|
||||
Your green marker's cap `div` element should be before the sleeve `div` element.
|
||||
|
||||
```js
|
||||
const blueMarkerChildren = [...document.querySelector('.blue')?.children];
|
||||
const blueMarkerCap = document.querySelector('.blue .cap');
|
||||
const blueMarkerSleeve = document.querySelector('.blue .sleeve');
|
||||
assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
--fcc-editable-region--
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 61b0a44a6b865738ba49b9fb
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The last thing you'll do is add a slight shadow to each marker to make them look even more realistic.
|
||||
|
||||
The `box-shadow` property lets you apply one or more shadows around an element. Here is basic syntax:
|
||||
|
||||
```css
|
||||
box-shadow: offsetX offsetY color;
|
||||
```
|
||||
|
||||
Start by adding a simple shadow to the red marker.
|
||||
|
||||
In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61b306305810f1c9040ce5a2
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As you can see, you added a simple red shadow around your marker that's 5 pixels to the right, and 5 pixels down.
|
||||
|
||||
But what if you wanted to position your shadow on the opposite side? You can do that by using negative values for `offsetX` and `offsetY`.
|
||||
|
||||
Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, and `offsetY` to `-5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 5px 5px red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 61b30995968123ceb6b76167
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that the edges of the shadow are sharp. This is because there is an optional `blurRadius` value for the `box-shadow` property:
|
||||
|
||||
```css
|
||||
box-shadow: offsetX offsetY blurRadius color;
|
||||
```
|
||||
|
||||
If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is.
|
||||
|
||||
In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px`, for `blurRadius`, and `green` for `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px 5px green`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 61b30a286c228bd0c493c09a
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
But what if you wanted to expand the shadow out further? You can do that with the optional `spreadRadius` value:
|
||||
|
||||
```css
|
||||
box-shadow: offsetX offsetY blurRadius spreadRadius color;
|
||||
```
|
||||
|
||||
Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included.
|
||||
|
||||
Practice by adding a 5 pixel shadow directly around the blue marker.
|
||||
|
||||
In the `.blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0`, for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 0 5px blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61b31287fb580ae75a486047
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker.
|
||||
|
||||
In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: -5px -5px red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 0 5px blue;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 61b315e76a63b3ecbbb11b75
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, update the `color` value of the red marker's `box-shadow` property.
|
||||
|
||||
Replace the named color with the `rgba` function. Use the values `83` for red, `14` for green, `14` for `blue` and `0.8` for the alpha channel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 0 5px blue;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 61b3183655ec10efd8c0bb07
|
||||
title: Step 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors.
|
||||
|
||||
In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 5px 5px 5px green;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 0 5px blue;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 61b31a451057fff645ec09be
|
||||
title: Step 93
|
||||
challengeType: 0
|
||||
dashedName: step-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the green marker's `box-shadow` property, replace the named color with a hex color code. Use the values `3B` for red, `7E` for green, `20` for blue, and `CC` for the alpha channel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 #3B7E20CC`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 0 0 20px 0 green;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 20px 0 blue;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 61b31cd7b0c76bfc076b4719
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, for the blue marker's `box-shadow` property, replace the named color with the `hsla` function. Use the values `223` for hue, `59%` for saturation, `31%` for lightness, and `0.8` for the alpha channel.
|
||||
|
||||
And with that, your set of colored markers is complete! Well done.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 0 0 20px 0 #3B7E20CC;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 20px 0 blue;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CSS Color Markers</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>CSS Color Markers</h1>
|
||||
<div class="container">
|
||||
<div class="marker red">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker green">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
<div class="marker blue">
|
||||
<div class="cap"></div>
|
||||
<div class="sleeve"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.marker {
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.cap {
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.sleeve {
|
||||
width: 110px;
|
||||
height: 25px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-left: 10px double rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.cap, .sleeve {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
|
||||
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
|
||||
}
|
||||
|
||||
.green {
|
||||
background: linear-gradient(#55680D, #71F53E, #116C31);
|
||||
box-shadow: 0 0 20px 0 #3B7E20CC;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
|
||||
box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
|
||||
}
|
||||
|
||||
```
|
||||
@ -30,6 +30,7 @@
|
||||
"learn-responsive-web-design-by-building-a-piano": "Learn Responsive Web Design by Building a Piano",
|
||||
"learn-the-css-box-model-by-building-a-rothko-painting": "Learn the CSS Box Model by Building a Rothko Painting",
|
||||
"learn-typography-by-building-a-nutrition-label": "Learn Typography by Building a Nutrition Label",
|
||||
"learn-css-colors-by-building-a-set-of-colored-markers": "Learn CSS Colors by Building a Set of Colored Markers",
|
||||
"machine-learning-with-python": "Machine Learning with Python",
|
||||
"mongodb-and-mongoose": "MongoDB and Mongoose",
|
||||
"scientific-computing-with-python": "Scientific Computing with Python",
|
||||
|
||||
Reference in New Issue
Block a user