Hi there, how can i apply --penguin-skin variable to the background property of the penguin-top, penguin-bottom, right-hand and left-hand classes. I gave it gray background but its errroring

.penguin {
–penguin-skin: gray;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}

.penguin-top {
top: 10%;
left: 25%;

/* change code below */
background: gray;
/* change code above */

width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;

}

.penguin-bottom {
top: 40%;
left: 23.5%;

/* change code below */
background: gray;
/* change code above */

width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;

}

.right-hand {
top: 0%;
left: -5%;

/* change code below */
background: gray;
/* change code above */

width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;

}

.left-hand {
top: 0%;
left: 75%;

/* change code below */
background: gray;
/* change code above */

please provide the link to the challenge, or if you can’t yet post links at least the full exact name of the challenge. And also please tell which tests you are failing.


If it is Basic CSS: Use a custom CSS Variable then you are not doing what the challenge asks from you:

Apply the --penguin-skin variable to the background property of the penguin-top , penguin-bottom , right-hand and left-hand classes.

You need to use the variable you have created in the previous challenge.

1 Like

/* change code below /
background: gray;
/
change code above */
That is what i have done but its not accepting

Thanks Leahleen, i finally got it!
This is how its supposed to be;

background: var(–penguin-skin);

Thanks

Can you help me please?
How do I apply this variable?

this is the link
https://learn.freecodecamp.org/responsive-web-design/basic-css/create-a-custom-css-variable

What have you tried to do?

I have solved it, thank you.
Actually I had to go back to the previous lesson :grinning:

Try this its work

var code = "
.penguin-top {background: var(–penguin-skin);}
.penguin-bottom {background: var(–penguin-skin);}
.right-hand {background: var(–penguin-skin);}
.left-hand {background: var(–penguin-skin);}"