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%)
", + "
ColorHSL
redhsl(0, 100%, 50%)
yellowhsl(60, 100%, 50%)
greenhsl(120, 100%, 50%)
cyanhsl(180, 100%, 50%)
bluehsl(240, 100%, 50%)
magentahsl(300, 100%, 50%)
", "
", "Change the 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.", "
", - "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 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": [ "", + " ", "
", "

Cooking with FCC!

", "
" ], "tests": [ - "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(178,\\s*?80%,\\s*?25%\\)/gi), 'message: The 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": [],