text-align property.",
"h4 tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded. Finally, align the two anchor tags to the left by using the links class selector.",
"NoteGoogle was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "h4 tag to set it to center.');",
"assert($('p').css('text-align') == 'justify', 'message: Your code should use the text-align property on the p tag to set it to justify.');",
"assert($('.links').css('text-align') == 'left', 'message: Your code should use the text-align property on the a tags by accessing their class links to set it to left.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d7791367417b2b2512ab4",
"title": "Adjust the Width of an Element Using the Width Property",
"description": [
"You can specify the width of an element using the width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
"img {", "
width: 220px;
}
width property to the entire card and set it to an absolute value of 245px. Use the fullCard class to select the element."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "width property of the card to 245 pixels by using the fullCard class selector.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d7791367417b2b2512ab5",
"title": "Adjust the Height of an Element Using the Height Property",
"description": [
"You can specify the height of an element using the height property in CSS, similar to the width property. Here's an example that changes the height of an image to 20px:",
"img {", "
height: 20px;
}
height property to the h4 tag and set it to 40px."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "h4 height property to a value of 40 pixels.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d7791367417b2b2512ab6",
"title": "Create Visual Balance with the Height of an Element",
"description": [
"This challenge changes the layout of the links by stacking them to look more like a list.",
"To keep everything balanced, you can make sure every element's width and height makes sense in that context.",
"height of the h4 tag to 25px to make the card more compact and a little cleaner."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "h4 height value to 25 pixels.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781a367417b2b2512ab7",
"title": "Use the Strong Tag to Make Text Bold",
"description": [
"To make text bold, you can use the strong tag. This is often used to draw attention to text and symbolize that it is important. With the strong tag, the browser applies the CSS of font-weight: bold; to the element.",
"strong tag around the entire h4 element and its contents."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "strong tag to the markup.');",
"assert($('strong').children('h4').length == 1, 'message: The strong tag should wrap around the h4 tag and its contents.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781a367417b2b2512ab8",
"title": "Use the u Tag to Underline Text",
"description": [
"To underline text, you can use the u tag. This is often used to signify that a section of text is important, or something to remember. With the u tag, the browser applies the CSS of text-decoration: underline; to the element.",
"u tag around the two anchor tags. It should not include the parent div that has the class of cardLinks.",
"Noteu tag when it could be confused for a link. Anchor tags also have a default underlined formatting."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "u tag to the markup.');",
"assert($('u').children('a').length == 2, 'message: The u tag should wrap around and contain the two a tags.');",
"assert($('u').children('div').length == 0, 'message: The u tag should not wrap around the parent div tag.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781a367417b2b2512ab9",
"title": "Use the em Tag to Italicize Text",
"description": [
"To emphasize text, you can use the em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element.",
"em tag around the paragraph tag to give it emphasis."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "em tag to the markup.');",
"assert($('em').children('p').length == 1, 'message: The em tag should wrap around the p tag and its contents.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781b367417b2b2512aba",
"title": "Use the del Tag to Strikethrough Text",
"description": [
"To strikethrough text, which is when a horizontal line cuts across the characters, you can use the del tag. It shows that a section of text is no longer valid. With the del tag, the browser applies the CSS of text-decoration: line-through; to the element.",
"del tag around \"Google\" inside the h4 tag and then add the word Alphabet beside it, which should not have the strikethrough formatting."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "del tag to the markup.');",
"assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'message: A del tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.');",
"assert($('h4').html().match(/Alphabet/gi), 'message: Include the word Alphabet in the h4 tag, without strikethrough formatting.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781b367417b2b2512abb",
"title": "Create a Horizontal Line Using the hr Element",
"description": [
"You can use the hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.",
"hr tag underneath the h4 which contains the card title.",
"Notehr is a self-closing tag, and therefore doesn't need a separate closing tag."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "hr tag to the markup.');",
"assert(code.match(/<\\/strong>\\s*?hr tag should come between the title and the paragraph.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781b367417b2b2512abc",
"title": "Adjust the Background-color Property of Text",
"description": [
"Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color to the element holding the text you want to emphasize. This challenge uses rgba() instead of hex codes or normal rgb().",
"rgba stands for:", "The rgb values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear.
r = red
g = green
b = blue
a = alpha/level of opacity
rgba() is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.",
"You'll use background-color: rgba(45, 45, 45, 0.1) for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.",
"background-color of the h4 element to the given rgba() value.",
"Also for the h4, remove the height property and add padding of 10px."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "background-color property to the h4 element set to rgba(45, 45, 45, 0.1).');",
"assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'message: Your code should add a padding property to the h4 element and set it to 10 pixels.');",
"assert(!($('h4').css('height') == '25px'), 'message: The height property on the h4 element should be removed.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781b367417b2b2512abd",
"title": "Adjust the Size of a Header Versus a Paragraph Tag",
"description": [
"The font size of header tags (h1 through h6) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size property to adjust the size of the text in an element.",
"font-size of the h4 tag to 27 pixels."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "font-size property to the h4 element set to 27 pixels.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781b367417b2b2512abe",
"title": "Add a Box-shadow to a Card-like Element",
"description": [
"The box-shadow property applies one or more shadows to an element. This technique can be used on any state of an element, but here you'll apply it on hover.",
"The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.",
"Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:",
"box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);", "
box-shadow on the card. The element now has an id of thumbnail, use this selector to place the shadows for the hover state."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "box-shadow property for the thumbnail id on its hover state.');",
"assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'message: You should use the given CSS for the box-shadow value.');"
],
"solutions": [],
"hints": [
"Remember to use the appropriate pseudo-class selector to place the box-shadows only on the hover state."
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781c367417b2b2512abf",
"title": "Decrease the Opacity of an Element",
"description": [
"The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.",
"A value of 1 is opaque, which isn't transparent at all.", "The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.", "
A value of 0.5 is half see-through.
A value of 0 is completely transparent.
opacity of the anchor tags to 0.7 using links class to select them."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "opacity property to 0.7 on the anchor tags by selecting the class of links.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781c367417b2b2512ac0",
"title": "Use the Text-transform Property to Make Text Uppercase",
"description": [
"The text-transform property in CSS is used to set text to uppercase.",
"Noteh4 tag to be uppercase using the text-transform property."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "h4 text should be uppercase.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781c367417b2b2512ac1",
"title": "Use a Google Font",
"required": [
{
"link": "https://fonts.googleapis.com/css?family=Open+Sans",
"raw": true
}
],
"description": [
"Google Fonts is a great way to find free fonts to use in a project.",
"Once you have selected the preferred font, copy the link tag that is provided and insert it into the head of your page.",
"The Open Sans font is already added for you behind the scenes, but the code to include it in your own project is the following:",
"<link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\">",
"Once the link is in place, the font is available to include in your CSS by using the pattern font-family: 'FONT', FAMILY_NAME;.",
"In this example, \"FONT\" would be 'Open Sans' and \"FAMILY_NAME\" would be sans-serif. The quotes around 'Open Sans' are required because it has a space in its name. Also, capitalization of the font name matters.",
"font-family of the body to \"Open Sans\"."
],
"challengeSeed": [
"",
"Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
", "body tag should have the font of \"Open Sans\".');"
],
"solutions": [],
"hints": [
"Remember to include both the font and the family-name."
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781c367417b2b2512ac2",
"title": "Set the Font-size for Multiple Heading Elements",
"description": [
"The font-size property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1 through h6 tags to balance the heading sizes.",
"font-size of the h1 tag to 68px.font-size of the h2 tag to 52px.font-size of the h3 tag to 40px.font-size of the h4 tag to 32px.font-size of the h5 tag to 21px.font-size of the h6 tag to 14px.font-size property for the h1 tag to 68 pixels.');",
"assert($('h2').css('font-size') == '52px', 'message: Your code should set the font-size property for the h2 tag to 52 pixels.');",
"assert($('h3').css('font-size') == '40px', 'message: Your code should set the font-size property for the h3 tag to 40 pixels.');",
"assert($('h4').css('font-size') == '32px', 'message: Your code should set the font-size property for the h4 tag to 32 pixels.');",
"assert($('h5').css('font-size') == '21px', 'message: Your code should set the font-size property for the h5 tag to 21 pixels.');",
"assert($('h6').css('font-size') == '14px', 'message: Your code should set the font-size property for the h6 tag to 14 pixels.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781c367417b2b2512ac3",
"title": "Set the Font-weight for Multiple Heading Elements",
"description": [
"You set the font-size of each heading tag in the last challenge, here you'll adjust the font-weight.",
"The font-weight property sets how thick or thin characters are in a section of text.",
"font-weight of the h1 tag to 800.font-weight of the h2 tag to 600.font-weight of the h3 tag to 500.font-weight of the h4 tag to 400.font-weight of the h5 tag to 300.font-weight of the h6 tag to 200.font-weight property for the h1 tag to 800.');",
"assert($('h2').css('font-weight') == '600', 'message: Your code should set the font-weight property for the h2 tag to 600.');",
"assert($('h3').css('font-weight') == '500', 'message: Your code should set the font-weight property for the h3 tag to 500.');",
"assert($('h4').css('font-weight') == '400', 'message: Your code should set the font-weight property for the h4 tag to 400.');",
"assert($('h5').css('font-weight') == '300', 'message: Your code should set the font-weight property for the h5 tag to 300.');",
"assert($('h6').css('font-weight') == '200', 'message: Your code should set the font-weight property for the h6 tag to 200.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781c367417b2b2512ac4",
"title": "Set the Font-size of Paragraph Text",
"description": [
"The font-size property in CSS is not limited to headings, it can be applied to any element containing text.",
"font-size property for the paragraph to 16px to make it more visible."
],
"challengeSeed": [
"",
"", " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "
" ], "tests": [ "assert($('p').css('font-size') == '16px', 'message: Yourp tag should have a font-size of 16 pixels.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781d367417b2b2512ac5",
"title": "Set the Line-height of Paragraphs",
"description": [
"CSS offers the line-height property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.",
"line-height property to the p tag and set it to 25px."
],
"challengeSeed": [
"",
"", " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "
" ], "tests": [ "assert($('p').css('line-height') == '25px', 'message: Your code should set theline-height of the p tag to 25 pixels.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781d367417b2b2512ac7",
"title": "Adjust the Color of an Anchor Tag",
"description": [
"You can adjust the text color of any text in an element with the color property.",
"color property of the anchor (a) tag to #000 (black)."
],
"challengeSeed": [
"",
"CatPhotoApp"
],
"tests": [
"assert($('a').css('color') == 'rgb(0, 0, 0)', 'message: The color of the anchor tag text should be black.')"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781d367417b2b2512ac8",
"title": "Adjust the Hover State of an Anchor Tag",
"description": [
"Following from the previous challenge, the styling of the anchor tag can be changed for its hover state using the :hover pseudo-class selector.",
"a tag's CSS so when the user hovers over it, the color is blue and the underline is removed.",
"Notetext-decoration property set to none."
],
"challengeSeed": [
"",
"CatPhotoApp"
],
"tests": [
"assert($('a').css('color') == 'rgb(0, 0, 0)', 'message: The anchor tag color should remain black, only add CSS rules for the :hover state.');",
"assert(code.match(/(?:a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?text-decoration:\\s*?none;\\s*?}|a:hover\\s*?{\\s*?text-decoration:\\s*?none;\\s*?color:\\s*?blue;\\s*?})/gi), 'message: The anchor tag should have a color of blue and no underline on hover.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781e367417b2b2512ac9",
"title": "Change an Element's Relative Position",
"description": [
"CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers the position property to override it.",
"When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:",
"p {", "Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.", "Note
position: relative;
bottom: 10px;
}
position of the h2 to relative, and use a CSS offset to move it 15 pixels away from the top of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements."
],
"challengeSeed": [
" ",
"",
" I still think the h2 is where it normally sits.
", "" ], "tests": [ "assert($('h2').css('position') == 'relative', 'message: Theh2 element should have a position property set to relative.');",
"assert($('h2').css('top') == '15px', 'message: Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781e367417b2b2512aca",
"title": "Move a Relatively Positioned Element with CSS Offsets",
"description": [
"The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. This can be slightly confusing, because you're offsetting an element away from a given spot, which effectively moves it towards the opposite direction. As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset effectively moves an item to the right.",
"h2 15 pixels to the right and 10 pixels up."
],
"challengeSeed": [
"",
" ",
"",
"",
" I still think the h2 is where it normally sits.
", "" ], "tests": [ "assert($('h2').css('bottom') == '10px', 'message: Your code should use a CSS offset to relatively position theh2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.');",
"assert($('h2').css('left') == '15px', 'message: Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781e367417b2b2512acb",
"title": "Lock an Element to its Parent with Absolute Positioning",
"description": [
"The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.",
"One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag.",
"#searchbar element to the top-right of its section parent by declaring its position as absolute. Give it top and right offsets of 0 pixels each."
],
"challengeSeed": [
"",
"",
" #searchbar element should have a position set to absolute.');",
"assert($('#searchbar').css('top') == '0px', 'message: Your code should use the top CSS offset of 0 pixels on the #searchbar element.');",
"assert($('#searchbar').css('right') == '0px', 'message: Your code should use the right CSS offset of 0 pixels on the #searchbar element.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d781e367417b2b2512acc",
"title": "Lock an Element to the Browser Window with Fixed Positioning",
"description": [
"The next layout scheme that CSS offers is the fixed position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer \"realize\" where it is positioned, which may require some layout adjustments elsewhere.",
"One key difference from the absolute position is that the element won't move when the user scrolls.",
"navbar. Change its position to fixed, and offset it 0 pixels from the top and 0 pixels from the left. Notice the (lack of) impact to the h1 position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately."
],
"challengeSeed": [
"",
"",
" I shift up when the #navbar is fixed to the browser window.
", "" ], "tests": [ "assert($('#navbar').css('position') == 'fixed', 'message: The#navbar element should have a position set to fixed.');",
"assert($('#navbar').css('top') == '0px', 'message: Your code should use the top CSS offset of 0 pixels on the #navbar element.');",
"assert($('#navbar').css('left') == '0px', 'message: Your code should use the left CSS offset of 0 pixels on the #navbar element.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a3367417b2b2512ace",
"title": "Push Elements Left or Right with the Float Property",
"description": [
"The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires.",
"section and aside elements next to each other. Give the #left item a float of left and the #right item a float of right."
],
"challengeSeed": [
"",
" ",
"",
"",
" Good stuff
", "left should have a float value of left.');",
"assert($('#right').css('float') == 'right', 'message: The element with id right should have a float value of right.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a3367417b2b2512acf",
"title": "Change the Position of Overlapping Elements with the Z-index Property",
"description": [
"When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the z-index property of an element move it higher in the stack than those with lower values.",
"z-index property to the element with the class name of first (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle)."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert($('.first').css('z-index') == '2', 'message: The element with class first should have a z-index value of 2.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a3367417b2b2512ad0",
"title": "Center an Element Horizontally Using Margin",
"description": [
"Another positioning technique is to center a block element horizontally. One way to do this is to set its margin to a value of auto.",
"This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block.",
"div on the page by adding a margin property with a value of auto."
],
"challengeSeed": [
"",
""
],
"tests": [
"assert(code.match(/margin:\\s*?auto;/g), 'message: The div should have a margin set to auto.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a3367417b2b2512ad1",
"title": "Learn about Complementary Colors",
"description": [
"Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content.",
"The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they \"cancel\" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.",
"Some examples of complementary colors with their hex codes are:",
"red (#FF0000) and cyan (#00FFFF)", "There are many color picking tools available online that have an option to find the complement of a color.", "Note
green (#00FF00) and magenta (#FF00FF)
blue (#0000FF) and yellow (#FFFF00)
background-color property of the blue and yellow classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The div element with class blue should have a background-color of blue.');",
"assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'message: The div element with class yellow should have a background-color of yellow.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a4367417b2b2512ad2",
"title": "Learn about Tertiary Colors",
"description": [
"Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B), and yellow (R + G). You saw in these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.",
"Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, red (primary) and yellow (secondary) make orange. This adds six more colors to a simple color wheel for a total of twelve.",
"There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. It starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but is more subtle than using two complementary colors.",
"Here are three colors using the split-complement scheme:",
"cyan (#00FFFF)", "
orange (#FF7D00)
raspberry (#FF007D)
background-color property of the orange, cyan, and raspberry classes to their respective colors. Make sure to use the hex codes because the orange and raspberry in the example above are not browser-recognized color names."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'message: The div element with class orange should have a background-color of orange.');",
"assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'message: The div element with class cyan should have a background-color of cyan.');",
"assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'message: The div element with class raspberry should have a background-color of raspberry.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a4367417b2b2512ad3",
"title": "Adjusting the Color of Various Elements to Complementary Colors",
"description": [
"The complementary colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.",
"#09A7A1) as the dominant color, and its orange (#FF790E) complement to visually highlight the sign-up buttons. Change the background-color of both the header and footer from black to the teal color. Then change the h2 text color to teal as well. Finally, change the background-color of the button to the orange color."
],
"challengeSeed": [
"",
"Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like fetch Pringles.
This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.
", " ", "header element should have a background-color of #09A7A1.');",
"assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'message: The footer element should have a background-color of #09A7A1.');",
"assert($('h2').css('color') == 'rgb(9, 167, 161)', 'message: The h2 element should have a color of #09A7A1.');",
"assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'message: The button element should have a background-color of #FF790E.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a4367417b2b2512ad4",
"title": "Adjust the Hue of a Color",
"description": [
"Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl() property as an alternative way to pick a color by directly stating these characteristics.",
"Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.",
"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%)
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."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the hsl() property to declare the color green.');",
"assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the hsl() property to declare the color cyan.');",
"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.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a4367417b2b2512ad5",
"title": "Adjust the Tone of a Color",
"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."
],
"challengeSeed": [
"",
"nav element should have a background-color of the adjusted teal and make sure to use the hsl() property.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a5367417b2b2512ad6",
"title": "Create a Gradual CSS Linear Gradient",
"description": [
"Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the background property's linear-gradient() function. Here is the general syntax:",
"background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);",
"The fist argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient.",
"Example:",
"background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));",
"linear-gradient() for the div element's background, and set it from a direction of 35 degrees to change the color from #CCFFFF to #FFCCCC."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?#CCFFFF,\\s*?#FFCCCC\\);/gi), 'message: The div element should have a linear-gradient background with the specified direction and colors.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a5367417b2b2512ad7",
"title": "Use a CSS Linear Gradient to Create a Striped Element",
"description": [
"The repeating-linear-gradient() function is very similar to linear-gradient() with the major difference that it repeats the specified gradient pattern. repeating-linear-gradient() accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.",
"The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.",
"In the example demonstrated in the code editor, the gradient starts with the color yellow at 0 pixels which blends into the second color blue at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color green, which itself blends into the fourth color value red as that is 80 pixels away from the beginning of the gradient.",
"For this example, it helps to think about the color stops as pairs where every two colors blend together.",
"0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px",
"If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.",
"repeating-linear-gradient() to use a gradient angle of 45deg, then set the first two color stops to yellow, and finally the second two color stops to black."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'message: The angle of the repeating-linear-gradient() should be 45deg.');",
"assert(!code.match(/90deg/gi), 'message: The angle of the repeating-linear-gradient() should no longer be 90deg');",
"assert(code.match(/yellow\\s+?0px/gi), 'message: The color stop at 0 pixels should be yellow.');",
"assert(code.match(/yellow\\s+?40px/gi), 'message: One color stop at 40 pixels should be yellow.');",
"assert(code.match(/yellow\\s+?40px,\\s*?black\\s+?40px/gi), 'message: The second color stop at 40 pixels should be black.');",
"assert(code.match(/black\\s+?80px/gi), 'message: The last color stop at 80 pixels should be black.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a5367417b2b2512ad8",
"title": "Create Texture by Adding a Subtle Pattern as a Background Image",
"description": [
"One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background property supports the url() function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.",
"https://i.imgur.com/MJAkxbh.png, set the background of the whole page with the body selector."
],
"challengeSeed": [
""
],
"tests": [
"assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'message: Your body element should have a background property set to a url() with the given link.');"
],
"solutions": [],
"hints": [
"Remember to wrap the address in quotes within the url() function."
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a5367417b2b2512ad9",
"title": "Use the CSS Transform Scale Property to Change the Size of an Element",
"description": [
"To change the scale of an element, CSS has the transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page:",
"p {", "
transform:scale(2);
}
ball2 to 1.5 times its original size."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);/gi), 'message: Set the transform property for #ball2 to scale it 1.5 times its size.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a5367417b2b2512ada",
"title": "Use the CSS Transform Property to Scale an Element on Hover",
"description": [
"The transform property has a verity of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements.",
"Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:",
"p:hover {", "
transform: scale(2.1);}
}
hover state of the div and use the transform property to scale the div element to 1.1 times its original size when a user hovers over it."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'message: The size of the div element should scale 1.1 times when the user hovers over it.');"
],
"solutions": [],
"hints": [
"Make sure to apply the CSS rule to the hover state of the div, using div:hover"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a6367417b2b2512adb",
"title": "Use the CSS Transform Property SkewX",
"description": [
"The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.",
"The following code skews the paragraph element by -32 degrees along the X axis.",
"p {", "
transform: skewX(-32deg);
}
bottom by 24 degrees along the X axis by using the transform property."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'message: The element with id bottom should be skewed by 24 degrees along its X axis.');"
],
"solutions": [],
"hints": [
"Notice that there is no space between the number and \"deg\" (-32deg) when declaring the degrees value."
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a6367417b2b2512adc",
"title": "Use the CSS Transform Property SkewY",
"description": [
"Given that the skewX() function skews the selected element along the X axis by a given degree, it is no surprise that the skewY() property skews an element along the Y (vertical) axis.",
"top -10 degrees along the Y axis by using the transform property."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'message: The element with id top should be skewed by -10 degrees along its Y axis.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a6367417b2b2512add",
"title": "Create a Graphic Using CSS",
"description": [
"By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow property that sets the shadow of an element, along with the border-radius property that controls the roundness of the element's corners.",
"You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.",
"In order to create a round object, the border-radius property should be set to a value of 50%.",
"You may recall from an earlier challenge that the box-shadow property takes values for offset-x, offset-y, blur-radius, spread-radius and a color value in that order. The blur-radius and spread-radius values are optional.",
"background-color to transparent, then set the border-radius property to 50% to make the circular shape. Finally, change the box-shadow property to set the offset-x to 25px, the offset-y to 10px, blur-radius to 0, spread-radius to 0, and color to blue."
],
"challengeSeed": [
"",
""
],
"tests": [
"assert(code.match(/background-color:\\s*?transparent;/gi), 'message: The value of the background-color property should be set to transparent.');",
"assert(code.match(/border-radius:\\s*?50%;/gi), 'message: The value of the border-radius property should be set to 50%.');",
"assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'message: The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a6367417b2b2512ade",
"title": "Create a More Complex Shape Using CSS and HTML",
"description": [
"One of the most popular shapes in the world is the heart shape and this challenge creates it with raw CSS. But first, you need to understand the :before and :after selectors. These selectors are used to add something before or after a selected element. In the following example, a :before selector is used to add a rectangle to an element with the class heart:",
".heart:before {", "For the
content: \"\";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
:before and :after selectors to function properly, they must have a defined content property. It usually has content such as a photo or text. When the :before and :after selectors add shapes, the content property is still required, but it's set to an empty string.",
"In the above example, the element with the class of heart has a :before selector that produces a yellow rectangle with height and width of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left and 50px above the top of the element.",
"heart:after selector, change the background-color to pink and the border-radius to 50%.",
"Next, target the element with the class heart (just heart) and fill in the transform property. Use the rotate() function with -45 degrees. (rotate() works the same way that skewX() and skewY() do).",
"Finally, in the heart:before selector, set its content property to an empty string."
],
"challengeSeed": [
"",
""
],
"tests": [
"assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'message: The background-color property of the heart:after selector should be pink.');",
"assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'message: The border-radius of the heart:after selector should be 50%.');",
"assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'message: The transform property for the heart class should use a rotate() function set to -45 degrees.');",
"assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'message: The content of the heart:before selector should be an empty string.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a7367417b2b2512adf",
"title": "Learn How CSS Keyframes and Animation Properties Work",
"description": [
"To animate an element, you need to know about the animation properties and the @keyframes rule. The animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation. There are eight animation properties in total, this challenge will keep it simple and cover the two most important ones first:",
"animation-name sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations.",
"animation-duration sets the length of time for the animation.",
"@keyframes is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of @keyframes and the animate properties:",
"#anim {", "For the element with the
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
anim id, the code snippet above sets the animation-name to colorful and sets the animation-duration to 3 seconds. Then the @keyframes rule links to the animation properties with the name colorful. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.",
"rect, by setting the animation-name to rainbow and the animation-duration to 4 seconds. Next, declare a @keyframes rule, and set the background-color at the beginning of the animation (0%) to blue, the middle of the animation (50%) to green, and the end of the animation (100%) to yellow."
],
"challengeSeed": [
"",
""
],
"tests": [
"assert($('#rect').css('animation-name') == 'rainbow', 'message: The element with id of rect should have an animation-name property with a value of rainbow.');",
"assert($('#rect').css('animation-duration') == '4s', 'message: The element with id of rect should have an animation-duration property with a value of 4s.');",
"assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'message: The @keyframes rule should use the animation-name of rainbow.');",
"assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'message: The @keyframes rule for rainbow should use a background-color of blue at 0%.');",
"assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'message: The @keyframes rule for rainbow should use a background-color of green at 50%.');",
"assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'message: The @keyframes rule for rainbow should use a background-color of yellow at 100%.');"
],
"solutions": [],
"hints": [
"Make sure the @keyframes rule links to the animation-name."
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a7367417b2b2512ae0",
"title": "Use CSS Animation to Change the Hover State of a Button",
"description": [
"You can use CSS @keyframes to change the color of a button in its hover state.",
"Here's an example of changing the height of an image on hover:",
"<style>", "
img:hover {
animation-name: width;
animation-duration: 4s;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
@keyframes to change the background-color of the button element so it becomes #4791d0 when a user hovers over it. The @keyframes rule should only have an entry for 100%."
],
"challengeSeed": [
"",
""
],
"tests": [
"assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'message: The @keyframes rule should use the animation-name background-color.');",
"assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'message: There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a7367417b2b2512ae1",
"title": "Create Movement Using CSS Animation",
"description": [
"When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement.",
"As shown in the example below, you can push the item downwards then upwards by setting the top property of the 50% keyframe to 50px, but having it set to 0px for the first (0%) and the last (100%) keyframe.",
"@keyframes rainbow {", "
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'message: The @keyframes rule for 0% should use the left offset of 0px.');",
"assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?top:\\s*?50px;\\s*?left:\\s*?25px;\\s*?}/gi), 'message: The @keyframes rule for 50% should use the left offset of 25px.');",
"assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'message: The @keyframes rule for 100% should use the left offset of -25px.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a7367417b2b2512ae2",
"title": "Create Visual Direction by Fading an Element from Left to Right",
"description": [
"For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen.",
"In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes rule.",
"ball and add the opacity property set to 0.1 at 50% so the element fades as it moves to the right."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert(code.match(/opacity:\\s*?0?\\.1;/gi), 'message: The keyframes rule for fade should set the opacity property to 0.1 at 50%.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a8367417b2b2512ae3",
"title": "Animate Elements Continually Using an Infinite Animation Count",
"description": [
"The previous challenges covered how to use some of the animation properties and the @keyframes rule. Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example:",
"animation-iteration-count: 3;",
"The above animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.",
"animation-iteration-count property to infinite."
],
"challengeSeed": [
"",
""
],
"tests": [
"assert($('#ball').css('animation-iteration-count') == 'infinite', 'message: The animation-iteration-count property should have a value of infinite.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a8367417b2b2512ae4",
"title": "Make a CSS Heartbeat using an Infinite Animation Count",
"description": [
"Here's one more continuous animation example with the animation-iteration-count property that uses the heart you designed in a previous challenge.",
"The one second long heartbeat animation consists of two animated pieces. The heart elements (including the :before and :after pieces) are animated to change size using the transform property, and the background div is animated to change its color using the background property.",
"animation-iteration-count property for both the back class and the heart class and setting the value to infinite. The heart:before and heart:after selectors do not need any animation properties."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert($('.heart').css('animation-iteration-count') == 'infinite', 'message: The animation-iteration-count property for the heart class should have a value of infinite.');",
"assert($('.back').css('animation-iteration-count') == 'infinite', 'message: The animation-iteration-count property for the back class should have a value of infinite.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a8367417b2b2512ae5",
"title": "Animate Elements at Variable Rates",
"description": [
"There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an animation-iteration-count property and setting @keyframes rules.",
"To illustrate, the animation on the right consists of two \"stars\" that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the twinkle animation. You can change the @keyframes rule for one of the elements so the stars twinkle at different rates.",
"star-1 by changing its @keyframes rule to 50%."
],
"challengeSeed": [
"",
"",
"",
"",
""
],
"tests": [
"assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'message: The @keyframes rule for the star-1 class should be 50%.');"
],
"solutions": [],
"hints": [
"Check the animation-name declared in the star-1 class to find the right @keyframes rule to change."
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a8367417b2b2512ae6",
"title": "Animate Multiple Elements at Variable Rates",
"description": [
"In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules. You can achieve the same goal by manipulating the animation-duration of multiple elements.",
"In the animation running in the code editor, there are three \"stars\" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration property to different values for each element.",
"animation-duration of the elements with the classes star-1, star-2, and star-3 to 1s, 0.9s, and 1.1s, respectively."
],
"challengeSeed": [
"",
"",
"",
"",
"",
""
],
"tests": [
"assert($('.star-1').css('animation-duration') == '1s', 'message: The animation-duration property for the star with class star-1 should remain at 1s.');",
"assert($('.star-2').css('animation-duration') == '0.9s', 'message: The animation-duration property for the star with class star-2 should be 0.9s.');",
"assert($('.star-3').css('animation-duration') == '1.1s', 'message: The animation-duration property for the star with class star-3 should be 1.1s.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a8367417b2b2512ae7",
"title": "Change Animation Timing with Keywords",
"description": [
"In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive.",
"There are a number of predefined keywords available for popular options. For example, the default value is linear, which applies a constant animation speed throughout. Other options include ease-out, which is quick in the beginning then slows down, or ease-in, which is slow in the beginning, then speeds up at the end.",
"ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert($('#ball1').css('animation-timing-function') == 'linear', 'message: The value of the animation-timing-function property for the element with the id ball1 should be linear.');",
"assert($('#ball2').css('animation-timing-function') == 'ease-out', 'message: The value of the animation-timing-function property for the element with the id ball2 should be ease-out.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a9367417b2b2512ae8",
"title": "Learn How Bezier Curves Work",
"description": [
"The last challenge introduced the animation-timing-function property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.",
"In CSS animations, Bezier curves are used with the cubic-bezier function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y axis is the change in the animation.",
"The cubic-bezier function consists of four main points that sit on this 1 by 1 grid: p0, p1, p2, and p3. p0 and p3 are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the p1 and p2 \"anchor\" points in the form: (x1, y1, x2, y2). Pulling it all together, here's an example of a Bezier curve in CSS code:",
"animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);",
"In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the linear keyword. In other words, it changes at a constant speed.",
"ball1, change the value of the animation-timing-function property from linear to its equivalent cubic-bezier function value. Use the point values given in the example above."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'message: The value of the animation-timing-function property for the element with the id ball1 should be the linear-equivalent cubic-bezier function.');",
"assert($('#ball2').css('animation-timing-function') == 'ease-out', 'message: The value of the animation-timing-function property for the element with the id ball2 should not change.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a9367417b2b2512ae9",
"title": "Use a Bezier Curve to Move a Graphic",
"description": [
"A previous challenge discussed the ease-out keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the ease-out keyword (for the blue element) and linear keyword (for the red element) are demonstrated. Similar animation progressions to the ease-out keyword can be achieved by using a custom cubic Bezier curve function.",
"In general, changing the p1 and p2 anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:",
"animation-timing-function: cubic-bezier(0, 0, 0.58, 1);",
"Remember that all cubic-bezier functions start with p0 at (0, 0) and end with p3 at (1, 1). In this example, the curve moves faster through the Y axis (starts at 0, goes to p1 y value of 0, then goes to p2 y value of 1) than it moves through the X axis (0 to start, then 0 for p1, up to 0.58 for p2). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.",
"animation-timing-function of the element with id of red to a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly."
],
"challengeSeed": [
"",
"",
""
],
"tests": [
"assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'message: The value of the animation-timing-function property of the element with the id red should be a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .');",
"assert($('#red').css('animation-timing-function') !== 'linear', 'message: The element with the id red should no longer have the animation-timing-function property of linear.');",
"assert($('#blue').css('animation-timing-function') == 'ease-out', 'message: The value of the animation-timing-function property for the element with the id blue should not change.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
},
{
"id": "587d78a9367417b2b2512aea",
"title": "Make Motion More Natural Using a Bezier Curve",
"description": [
"This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the linear and ease-out cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.",
"The animation-timing-function automatically loops at every keyframe when the animation-iteration-count is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at 50%), it results in two identical animation progressions at the upward and downward movement of the ball.",
"The following cubic Bezier curve simulates a juggling movement:",
"cubic-bezier(0.3, 0.4, 0.5, 1.6); ",
"Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on an 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.",
"animation-timing-function of the element with the id of green to a cubic-bezier function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649."
],
"challengeSeed": [
"",
"",
"",
""
],
"tests": [
"assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'message: The value of the animation-timing-function property for the element with the id green should be a cubic-bezier function with x1, y1, x2, y2 values as specified.');"
],
"solutions": [],
"hints": [],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [],
"title": ""
},
"fr": {
"description": [],
"title": ""
},
"pt-br": {
"description": [],
"title": ""
},
"ru": {
"description": [],
"title": ""
}
}
}
]
}