diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json index cc35c86d2f8..cc106dce1fe 100644 --- a/challenges/01-responsive-web-design/applied-visual-design.json +++ b/challenges/01-responsive-web-design/applied-visual-design.json @@ -2622,27 +2622,27 @@ "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 {
  content: \"\";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}
", - "For the :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.", + "One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the ::before and ::after pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a ::before pseudo-element is used to add a rectangle to an element with the class heart:", + "
.heart::before {
  content: \"\";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}
", + "For the ::before and ::after pseudo-elements to function properly, they must have a defined content property. This property is usually used to add things like a photo or text to the selected element. When the ::before and ::after pseudo-elements are used to make 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 pseudo-element 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.", "
", - "Transform the element on the screen to a heart. In the heart:after selector, change the background-color to pink and the border-radius to 50%.", + "Transform the element on the screen to a heart. In the 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." + "Finally, in the heart::before selector, set its content property to an empty string." ], "tests": [ { "text": - "The background-color property of the heart:after selector should be pink.", + "The background-color property of the heart::after selector should be pink.", "testString": - "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color\\s*?:\\s*?pink\\s*?;/gi), 'The background-color property of the heart:after selector should be pink.');" + "assert(code.match(/\\.heart::after\\s*?{\\s*?background-color\\s*?:\\s*?pink\\s*?;/gi), 'The background-color property of the heart::after selector should be pink.');" }, { "text": - "The border-radius of the heart:after selector should be 50%.", + "The border-radius of the heart::after selector should be 50%.", "testString": - "assert(code.match(/border-radius\\s*?:\\s*?50%/gi).length == 2, 'The border-radius of the heart:after selector should be 50%.');" + "assert(code.match(/border-radius\\s*?:\\s*?50%/gi).length == 2, 'The border-radius of the heart::after selector should be 50%.');" }, { "text": @@ -2652,9 +2652,9 @@ }, { "text": - "The content of the heart:before selector should be an empty string.", + "The content of the heart::before selector should be an empty string.", "testString": - "assert(code.match(/\\.heart:before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The content of the heart:before selector should be an empty string.');" + "assert(code.match(/\\.heart::before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The content of the heart::before selector should be an empty string.');" } ], "solutions": [], @@ -2681,7 +2681,7 @@ " width: 50px;", " transform: ;", "}", - ".heart:after {", + ".heart::after {", " background-color: blue;", " content: \"\";", " border-radius: 25%;", @@ -2691,7 +2691,7 @@ " top: 0px;", " left: 25px;", "}", - ".heart:before {", + ".heart::before {", " content: ;", " background-color: pink;", " border-radius: 50%;",