diff --git a/seed/challenges/01-responsive-web-design/applied-visual-design.json b/seed/challenges/01-responsive-web-design/applied-visual-design.json
index e64d9dec60..1746aa4c70 100644
--- a/seed/challenges/01-responsive-web-design/applied-visual-design.json
+++ b/seed/challenges/01-responsive-web-design/applied-visual-design.json
@@ -1633,7 +1633,7 @@
"Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.",
"Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.",
"Here are a few examples of using hsl()
with fully-saturated, normal lightness colors:",
- "
/* Red */", + "
hsl(0, 100%, 50%) (Red can also have a hue of 360)
/* Yellow */
hsl(60, 100%, 50%)
/* Green */
hsl(120, 100%, 50%)
/* Cyan */
hsl(180, 100%, 50%)
/* Blue */
hsl(240, 100%, 50%)
/* Magenta */
hsl(300, 100%, 50%)
Color | HSL |
---|---|
red | hsl(0, 100%, 50%) |
yellow | hsl(60, 100%, 50%) |
green | hsl(120, 100%, 50%) |
cyan | hsl(180, 100%, 50%) |
blue | hsl(240, 100%, 50%) |
magenta | hsl(300, 100%, 50%) |
background-color
of each div
element based on the class names (green
, cyan
, or blue
) using hsl()
. All three should have full saturation and normal lightness."
],
@@ -1642,22 +1642,26 @@
" body {",
" background-color: #FFFFFF;",
" }",
+ " ",
" .green {",
" background-color: #000000;",
" }",
+ " ",
" .cyan {",
" background-color: #000000;",
" }",
+ " ",
" .blue {",
" background-color: #000000;",
" }",
- "",
+ " ",
" div {",
" display: inline-block;",
" height: 100px;",
" width: 100px;",
" }",
"",
+ " ",
"",
"",
""
@@ -1668,7 +1672,7 @@
"assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the hsl()
property to declare the color blue.');",
"assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'message: The div
element with class green
should have a background-color
of green.');",
"assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'message: The div
element with class cyan
should have a background-color
of cyan.');",
- "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The div
element with class blue
should have a background-color
blue.');"
+ "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The div
element with class blue
should have a background-color
of blue.');"
],
"solutions": [],
"hints": [],
@@ -1683,34 +1687,40 @@
"description": [
"The hsl()
option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of hsl()
stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.",
"background-color
from the header
element. Starting with that color as a base, add a background-color
to the nav
element so it uses the same teal hue, but has 80% saturation and 25% lightness values to change its tone and shade."
+ "The navigation bar on this site currently inherits its background-color
from the header
element. Starting with that color as a base, add a background-color
to the nav
element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade."
],
"challengeSeed": [
"",
+ " ",
"nav
element should have a background-color
of the adjusted teal and make sure to use the hsl()
property.');"
+ "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'message: The nav
element should have a background-color
of the adjusted cyan tone using the hsl()
property.');"
],
"solutions": [],
"hints": [],