Responsive Web Design: Added hint to Attach a Fallback Value to a CSS Variable (#19594)
Added hint to Attach a Fallback Value to a CSS Variable (https://guide.freecodecamp.org/certifications/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable/)
This commit is contained in:
@ -3,8 +3,37 @@ title: Attach a Fallback value to a CSS Variable
|
|||||||
---
|
---
|
||||||
## Attach a Fallback value to a CSS Variable
|
## Attach a Fallback value to a CSS Variable
|
||||||
|
|
||||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
|
||||||
|
|
||||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
|
||||||
|
|
||||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||||
|
We need to add a fallback value of ```black``` to the ```background``` property of the ```.penguin-top``` and ```.penguin-bottom``` classes.
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Add a fallback value of ```black``` to the ```background``` property of the ```.penguin-bottom``` class:
|
||||||
|
|
||||||
|
```js
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
/* change code below */
|
||||||
|
background: var(--pengiun-skin,black);
|
||||||
|
/* change code above */
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Add a fallback value of ```black``` to the ```background``` property of the ```.penguin-top``` class:
|
||||||
|
|
||||||
|
```js
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
/* change code below */
|
||||||
|
background: var(--pengiun-skin,black);
|
||||||
|
/* change code above */
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
Reference in New Issue
Block a user