chore: resolve flagged Crowdin issues (#45442)
* chore: resolve bengali issues * chore: resolve french issues * chore: resolve hebrew issues * chore: resolve persian issues * chore: resolve portuguese brazilian issues * chore: resolve russian issues * chore: resolve spanish issues * chore: resolve japanese issues
This commit is contained in:
Naomi Carrigan
GitHub
@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
|
||||
The `box-shadow` property applies one or more shadows to an element.
|
||||
|
||||
The `box-shadow` property takes values for
|
||||
The `box-shadow` property takes the following values, in order:
|
||||
|
||||
<ul>
|
||||
<li><code>offset-x</code> (how far to push the shadow horizontally from the element),</li>
|
||||
<li><code>offset-y</code> (how far to push the shadow vertically from the element),</li>
|
||||
<li><code>blur-radius</code>,</li>
|
||||
<li><code>spread-radius</code> and</li>
|
||||
<li><code>color</code>, in that order.</li>
|
||||
<li><code>offset-x</code> (how far to push the shadow horizontally from the element)</li>
|
||||
<li><code>offset-y</code> (how far to push the shadow vertically from the element)</li>
|
||||
<li><code>blur-radius</code></li>
|
||||
<li><code>spread-radius</code></li>
|
||||
<li><code>color</code></li>
|
||||
</ul>
|
||||
|
||||
The `blur-radius` and `spread-radius` values are optional.
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: 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.
|
||||
Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` function 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.
|
||||
|
||||
@ -27,19 +27,19 @@ Change the `background-color` of each `div` element based on the class names (`g
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `green`.
|
||||
Your code should use the `hsl()` function to declare the color `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `cyan`.
|
||||
Your code should use the `hsl()` function to declare the color `cyan`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `blue`.
|
||||
Your code should use the `hsl()` function to declare the color `blue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
|
||||
@ -15,11 +15,11 @@ You will create a round, transparent object with a crisp shadow that is slightly
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Manipulate the square element in the editor to create the moon shape. First, change the `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`.
|
||||
Manipulate the square element in the editor to create the moon shape. First, change the `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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -35,7 +35,7 @@ The value of the `border-radius` property should be set to `50%`.
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
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.
|
||||
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`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -28,15 +28,15 @@ For the `::before` and `::after` pseudo-elements to function properly, they must
|
||||
|
||||
# --instructions--
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `background-color` property of the `heart::after` selector should be `pink`.
|
||||
The `background-color` property of the `.heart::after` selector should be `pink`.
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `border-radius` of the `heart::after` selector should be 50%.
|
||||
The `border-radius` of the `.heart::after` selector should be 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
@ -57,7 +57,7 @@ The `transform` property for the `heart` class should use a `rotate()` function
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
The `content` of the `heart::before` selector should be an empty string.
|
||||
The `content` of the `.heart::before` selector should be an empty string.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
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) is 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:
|
||||
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:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
|
||||
@ -47,7 +47,7 @@ The color stop at 0 pixels should be `yellow`.
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
One color stop at 40 pixels should be `yellow`.
|
||||
The first color stop at 40 pixels should be `yellow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area
|
||||
|
||||
When you create your variables in `:root` they will set the value of that variable for the whole page.
|
||||
|
||||
You can then over-write these variables by setting them again within a specific element.
|
||||
You can then over-write these variables by setting them again within a specific selector.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `penguin` class should not contain the `background-color` property
|
||||
The `penguin` class should not contain the `background-color` property.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -15,7 +15,7 @@ To create a CSS variable, you just need to give it a name with two hyphens in fr
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
|
||||
This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other properties to gray.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element should inherit the color green from your `body` element.
|
||||
Your `h1` element should inherit the color `green` from your `body` element.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@ -27,7 +27,7 @@ class="class1 class2"
|
||||
|
||||
**Note:** It doesn't matter which order the classes are listed in the HTML element.
|
||||
|
||||
However, the order of the `class` declarations in the `<style>` section is what is important. The second declaration will always take precedence over the first. Because `.blue-text` is declared second, it overrides the attributes of `.pink-text`
|
||||
However, the order of the `class` declarations in the `<style>` section is what is important. The second declaration will always take precedence over the first. Because `.blue-text` is declared second, it overrides the attributes of `.pink-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ For instance, when your screen is smaller or larger than your media query break
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `:root` selector of the `media query`, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action.
|
||||
In the `:root` selector of the media query, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ Your `h1` element with the text `I am red!` should be given the `color` red.
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color red should be used instead of the hex code `#FF0000`.
|
||||
The abbreviated hex code for the color red should be used instead of the hex code `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
@ -41,7 +41,7 @@ Your `h1` element with the text `I am green!` should be given the `color` green.
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color green should be used instead of the hex code `#00FF00`.
|
||||
The abbreviated hex code for the color green should be used instead of the hex code `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
@ -53,7 +53,7 @@ Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color cyan should be used instead of the hex code `#00FFFF`.
|
||||
The abbreviated hex code for the color cyan should be used instead of the hex code `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
@ -65,7 +65,7 @@ Your `h1` element with the text `I am fuchsia!` should be given the `color` fuch
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color fuchsia should be used instead of the hex code `#FF00FF`.
|
||||
The abbreviated hex code for the color fuchsia should be used instead of the hex code `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
|
||||
@ -27,13 +27,13 @@ Replace the word `black` in our `body` element's background-color with its hex c
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` element should have the background-color of black.
|
||||
Your `body` element should have the `background-color` of black.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color black should be used instead of the word `black`.
|
||||
The hex code for the color black should be used instead of the word `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
You can set a checkbox or radio button to be checked by default using the `checked` attribute.
|
||||
|
||||
To do this, just add the word `checked` to the inside of an input element. For example:
|
||||
To do this, just add the word `checked` to the inside of an `input` element. For example:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
|
||||
@ -43,7 +43,7 @@ Each of your comments should be closed with `-->`.
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
You should not change the order of the `h1` `h2` or `p` in the code.
|
||||
You should not change the order of the `h1`, `h2`, or `p` elements in the code.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
# --description--
|
||||
|
||||
`p` elements are the preferred element for paragraph text on websites. `p` is short for "paragraph".
|
||||
The `p` element is the preferred element for paragraph text on websites. `p` is short for "paragraph".
|
||||
|
||||
You can create a paragraph element like this:
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ Recall that setting a flex container as a row places the flex items side-by-side
|
||||
|
||||
There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include:
|
||||
|
||||
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no <code>justify-content</code> is specified.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container</li></ul>
|
||||
<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no <code>justify-content</code> is specified.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
|
||||
CSS flexbox has a feature to split a flex container into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
|
||||
|
||||
However, using the `flex-wrap` property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ After creating an area template for your grid container, as shown in the previou
|
||||
}
|
||||
```
|
||||
|
||||
This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the header area.
|
||||
This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the `header` area.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr, 100px, and 2fr`.
|
||||
Your `container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr`, `100px`, and `2fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user