diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json index efe30a8463..80b63b2a70 100644 --- a/challenges/01-responsive-web-design/applied-visual-design.json +++ b/challenges/01-responsive-web-design/applied-visual-design.json @@ -2079,10 +2079,10 @@ "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: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
", + "Here's an example of changing the width of an image on hover:", + "
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
}

@keyframes width {
100% {
width: 40px;
}
}
</style>

<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
", "
", - "Note that ms stands for milliseconds, which are 1/1000 of a second.", + "Note that ms stands for milliseconds, where 1000ms is equal to 1s.", "Use CSS @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": [ @@ -2093,6 +2093,7 @@ " background-color: #0F5897;", " padding: 5px 10px 8px 10px;", " }", + " ", " button:hover {", " animation-name: background-color;", " animation-duration: 500ms;", @@ -2100,6 +2101,7 @@ " ", " ", "", + " ", "" ], "tests": [