feat: first draft of CSS Color Markers project
This commit is contained in:
Kris Koishigawa
@@ -66,11 +66,17 @@
|
||||
},
|
||||
"learn-html-by-building-a-cat-photo-app": {
|
||||
"title": "Learn HTML by Building a Cat Photo App",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-basic-css-by-building-a-cafe-menu": {
|
||||
"title": "Learn Basic CSS by Building a Cafe Menu",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-the-css-box-model-by-building-a-rothko-painting": {
|
||||
"title": "Learn the CSS Box Model by Building a Rothko Painting",
|
||||
@@ -81,12 +87,24 @@
|
||||
},
|
||||
"learn-css-variables-by-building-a-city-skyline": {
|
||||
"title": "Learn CSS Variables by Building a City Skyline",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-html-forms-by-building-a-registration-form": {
|
||||
"title": "Learn HTML Forms by Building a Registration Form",
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-html-forms-by-building-a-registration-form": { "title": "Learn HTML Forms by Building a Registration Form", "intro": ["", ""] },
|
||||
"learn-accessibility-by-building-a-quiz": {
|
||||
"title": "Learn Accessibility by Building a Quiz",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-intermediate-css-by-building-a-picasso-painting": {
|
||||
"title": "Learn Intermediate CSS by Building a Picasso Painting",
|
||||
@@ -95,16 +113,44 @@
|
||||
"In this course, you will use CSS to create your own painting in the style of Picasso. You will learn about FontAwesome SVG icons, CSS positioning, and reinforce the skills you have already been learning."
|
||||
]
|
||||
},
|
||||
"learn-responsive-web-design-by-building-a-piano": { "title": "Learn Responsive Web Design by Building a Piano", "intro": ["", ""] },
|
||||
"learn-css-flexbox-by-building-a-photo-gallery": { "title": "Learn CSS Flexbox by Building a Photo Gallery", "intro": ["", ""] },
|
||||
"learn-css-grid-by-building-a-magazine": { "title": "Learn CSS Grid by Building a Magazine", "intro": ["", ""] },
|
||||
"learn-responsive-web-design-by-building-a-piano": {
|
||||
"title": "Learn Responsive Web Design by Building a Piano",
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-css-flexbox-by-building-a-photo-gallery": {
|
||||
"title": "Learn CSS Flexbox by Building a Photo Gallery",
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-css-grid-by-building-a-magazine": {
|
||||
"title": "Learn CSS Grid by Building a Magazine",
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-typography-by-building-a-nutrition-label": {
|
||||
"title": "Learn Typography by Building a Nutrition Label",
|
||||
"intro": ["", ""]
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
},
|
||||
"learn-css-transforms-by-building-a-penguin": { "title": "Learn CSS Transforms by Building a Penguin", "intro": ["", ""] },
|
||||
"learn-css-animation-by-building-a-ferris-wheel": { "title": "Learn CSS Animation by Building a Ferris Wheel", "intro": ["", ""] },
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": ["", ""] }
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": { "title": "Learn More About CSS Pseudo Selectors By Building A Balance Sheet", "intro": ["", ""] },
|
||||
"learn-css-colors-by-building-a-colored-markers-set": {
|
||||
"title": "Learn CSS Colors by Building a Colored Markers Set",
|
||||
"intro": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"javascript-algorithms-and-data-structures": {
|
||||
@@ -190,15 +236,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": [
|
||||
"",
|
||||
""
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -298,7 +353,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": {
|
||||
@@ -563,4 +624,4 @@
|
||||
"expand": "Expand",
|
||||
"collapse": "Collapse"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Learn CSS Colors by Building a Color Markers Set
|
||||
block: learn-css-colors-by-building-a-color-markers-set
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Learn CSS Colors by Building a Color Markers Set
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@@ -85,5 +85,6 @@
|
||||
"learn-css-grid-by-building-a-magazine": "HTML-CSS",
|
||||
"learn-css-transforms-by-building-a-penguin": "HTML-CSS",
|
||||
"learn-typography-by-building-a-nutrition-label": "HTML-CSS",
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS"
|
||||
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": "HTML-CSS",
|
||||
"learn-css-colors-by-building-a-colored-markers-set": "HTML-CSS"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,391 @@
|
||||
{
|
||||
"name": "Learn CSS Colors by Building a Color Markers Set",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "learn-css-colors-by-building-a-color-markers-set",
|
||||
"order": 42,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"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,30 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,38 @@
|
||||
---
|
||||
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 with the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,39 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,43 @@
|
||||
---
|
||||
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 `style.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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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>
|
||||
<h1>CSS Color Markers</h1>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
```
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
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. Target the `h1` element, and use the `text-align` property to center it on 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 the `text-align` property to `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,47 @@
|
||||
---
|
||||
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` element, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,47 @@
|
||||
---
|
||||
id: 616d47bc9eedc4bc7f621bec
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, within the `container` `div`, add another `div` element and set its `class` to `marker`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,62 @@
|
||||
---
|
||||
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`.
|
||||
|
||||
Use a class selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`:
|
||||
|
||||
```css
|
||||
.freecodecamp {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Create a new CSS rule that targets the `marker` `class`, and set its `background-color` property to `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,56 @@
|
||||
---
|
||||
id: 616d50b93ba424d6282c99cf
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that your marker doesn't seem to have any color applied to it. The background color was actually applied, but since the `marker` 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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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's 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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,59 @@
|
||||
---
|
||||
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 with the `class` `marker`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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` 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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,65 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,62 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,64 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,68 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,78 @@
|
||||
---
|
||||
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 `container` `class` and set its `background-color` to black with `rgb(0, 0, 0)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,84 @@
|
||||
---
|
||||
id: 617b8b38f32bf2080a140675
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A function is a piece of code that can take input and perform a specific action. The CSS `rgb` function accepts a values, or arguments, 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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,78 @@
|
||||
---
|
||||
id: 617b8e0d93a8d10d9a90e720
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Notice that the `background-color` for `one` 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 do the same for the other colors. In the `two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green. And in the `three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,78 @@
|
||||
---
|
||||
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.
|
||||
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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 `one` so that red is at the max value, and set green to `128`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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 `two` so that green is at the max value, and set blue to `128`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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, 128, 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 `three` so that blue is at the max value, and set red to `128`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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, 128, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 128);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.three {
|
||||
background-color: rgb(255, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
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 `one` so that red is at `128`, and set green to the max value.
|
||||
|
||||
For azure, update the `rgb` function in `two` so that green is at `128` and blue is at the max value.
|
||||
|
||||
And for rose, which is sometimes called bright pink, update the `rgb` function in `three` so that green is at `128` and red is at the max value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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, 128, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 255, 128);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(128, 0, 255);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
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 `one`, `two`, and `three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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(128, 255, 0);
|
||||
}
|
||||
|
||||
.two {
|
||||
background-color: rgb(0, 128, 255);
|
||||
}
|
||||
|
||||
.three {
|
||||
background-color: rgb(255, 0, 128);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 618a0927005553b74bfa05ae
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A color wheel is a circle where similar colors, or hues, 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.
|
||||
|
||||
Set `one` and `two` to the complementary colors red and cyan. In the `rgb` function for `one` set the red value to the max of `255`. In the `rgb` function for two, set the values for green and blue to the max of `255`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,81 @@
|
||||
---
|
||||
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. But 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 color to bring attention to certain content on the page.
|
||||
|
||||
First, in the `h1` rule, use the `rbg` function to set the background color to cyan.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,78 @@
|
||||
---
|
||||
id: 618a1275e873dcc803c2d1aa
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, in `one`, use the `rgb` function to set the `background-color` to black. And in `two`, use the `rgb` function to set the `background-color` to red.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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 `two` to set the `background-color` to black.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,78 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,79 @@
|
||||
---
|
||||
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.
|
||||
|
||||
First, change the class of the first marker `div` element from `one` to `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,77 @@
|
||||
---
|
||||
id: 619b72a0db211f1c29afb906
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Update the `one` class selector to target the new `red` `class`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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 `red` so that the red value is at the max.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,77 @@
|
||||
---
|
||||
id: 619b7424f43ec9215e538afe
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, change the `class` of the second marker element from `two` to `green`, and the `class` of the third marker element from `three` to `blue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,77 @@
|
||||
---
|
||||
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 `three` so it targets `blue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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 blue, and the third pair represent green. 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 blue, and `00` green.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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, but 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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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 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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,79 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,79 @@
|
||||
---
|
||||
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` element, create a new `div` with the `class` `sleeve`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,82 @@
|
||||
---
|
||||
id: 61adc60b69cd4b87739d2174
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new CSS rule that targets the `sleeve` `class`.
|
||||
|
||||
Inside the `sleeve` rule, set the `width` property to `110px`, and the `height` property to `25px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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.
|
||||
|
||||
First, inside the `sleeve` rule, remove the `opacity` property and value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,86 @@
|
||||
---
|
||||
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` `div` to push the sleeve to the right.
|
||||
|
||||
In the red marker `div`, add a new `div` element with the `class` `cap` before the `sleeve` `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,87 @@
|
||||
---
|
||||
id: 61b0934c9e7fc020b43b1bb7
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new CSS rule to target the `cap` class. In the new rule, set the `width` property to `60px`, and the `height` to `25px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,98 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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 properties.
|
||||
|
||||
In the `red` CSS rule, add the `border-left-width` property with the value `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,105 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,97 @@
|
||||
---
|
||||
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.
|
||||
|
||||
In both green and blue marker `div` elements, nest new `cap` and `sleeve` `div` elements. You can just copy the ones from the red marker and paste them into the other two markers.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,104 @@
|
||||
---
|
||||
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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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,182 @@
|
||||
---
|
||||
id: 61b31cd7b0c76bfc076b4719
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, for the green 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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Test 1
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --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-colored-markers-set": "Learn CSS Colors by Building a Colored Markers Set",
|
||||
"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