fix(curriculum): Replace single-line blocks with multi-line blocks for Responsive Web Design (#41519)

* fix(curriculum) replace single-line block with multi-line blocks

* fix(curriculum) replace single-line block with multi-line blocks (missed blocks)

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md

@@ -11,7 +11,9 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
 
 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;`
+```css
+animation-iteration-count: 3;
+```
 
 In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`.
 

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md

@@ -11,13 +11,17 @@ dashedName: create-a-gradual-css-linear-gradient
 
 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, ...);`
+```css
+background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
+```
 
 The first argument specifies the direction from which color transition starts - it can be stated as a degree, where `90deg` makes a horizontal gradient (from left to right) and `45deg` makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient.
 
 Example:
 
-`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
+```css
+background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
+```
 
 # --instructions--
 

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md

@@ -15,7 +15,9 @@ In CSS animations, Bezier curves are used with the `cubic-bezier` function. The
 
 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);`
+```css
+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.
 

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md

@@ -15,7 +15,9 @@ The `animation-timing-function` automatically loops at every keyframe when the `
 
 The following cubic Bezier curve simulates a juggling movement:
 
-`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
+```css
+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 a 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.
 

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md

@@ -13,7 +13,9 @@ That's great, but it doesn't work right yet. Notice how the animation resets aft
 
 This can be done by setting the `animation-fill-mode` property to `forwards`. The `animation-fill-mode` specifies the style applied to an element when the animation has finished. You can set it like so:
 
-`animation-fill-mode: forwards;`
+```css
+animation-fill-mode: forwards;
+```
 
 # --instructions--
 

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md

@@ -13,7 +13,9 @@ A previous challenge discussed the `ease-out` keyword that describes an animatio
 
 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);`
+```css
+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.
 

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md

@@ -17,7 +17,9 @@ In the example demonstrated in the code editor, the gradient starts with the col
 
 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`
+```css
+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.