For Penguin class should declare the penguin-skin to color gray

HTML-CSS
1

I solved thank you

Your code so far


<style>
{
 /* Only change code below this line */
   __penguin-skin:gray;
   /* Only change code above this line */
   
   position: relative;
   margin: auto;
   display: block;
   margin-top: 5%;
   width: 300px;
   height: 300px;
 }

 .penguin-top {
   top: 10%;
   left: 25%;
   background: black;
   width: 50%;
   height: 45%;
   border-radius: 70% 70% 60% 60%;
 }

 .penguin-bottom {
   top: 40%;
   left: 23.5%;
   background: black;
   width: 53%;
   height: 45%;
   border-radius: 70% 70% 100% 100%;
 }

 .right-hand {
   top: 0%;
   left: -5%;
   background: black;
   width: 30%;
   height: 60%;
   border-radius: 30% 30% 120% 30%;
   transform: rotate(45deg);
   z-index: -1;
 }

 .left-hand {
   top: 0%;
   left: 75%;
   background: black;
   width: 30%;
   height: 60%;
   border-radius: 30% 30% 30% 120%;
   transform: rotate(-45deg);
   z-index: -1;
 }

 .right-cheek {
   top: 15%;
   left: 35%;
   background: white;
   width: 60%;
   height: 70%;
   border-radius: 70% 70% 60% 60%;
 }

 .left-cheek {
   top: 15%;
   left: 5%;
   background: white;
   width: 60%;
   height: 70%;
   border-radius: 70% 70% 60% 60%;
 }

 .belly {
   top: 60%;
   left: 2.5%;
   background: white;
   width: 95%;
   height: 100%;
   border-radius: 120% 120% 100% 100%;
 }

 .right-feet {
   top: 85%;
   left: 60%;
   background: orange;
   width: 15%;
   height: 30%;
   border-radius: 50% 50% 50% 50%;
   transform: rotate(-80deg);
   z-index: -2222;
 }

 .left-feet {
   top: 85%;
   left: 25%;
   background: orange;
   width: 15%;
   height: 30%;
   border-radius: 50% 50% 50% 50%;
   transform: rotate(80deg);
   z-index: -2222;
 }

 .right-eye {
   top: 45%;
   left: 60%;
   background: black;
   width: 15%;
   height: 17%;
   border-radius: 50%;
 }

 .left-eye {
   top: 45%;
   left: 25%;
   background: black;
   width: 15%;
   height: 17%;
   border-radius: 50%;
 }

 .sparkle {
   top: 25%;
   left: 15%;
   background: white;
   width: 35%;
   height: 35%;
   border-radius: 50%;
 }

 .blush-right {
   top: 65%;
   left: 15%;
   background: pink;
   width: 15%;
   height: 10%;
   border-radius: 50%;
 }

 .blush-left {
   top: 65%;
   left: 70%;
   background: pink;
   width: 15%;
   height: 10%;
   border-radius: 50%;
 }

 .beak-top {
   top: 60%;
   left: 40%;
   background: orange;
   width: 20%;
   height: 10%;
   border-radius: 50%;
 }

 .beak-bottom {
   top: 65%;
   left: 42%;
   background: orange;
   width: 16%;
   height: 10%;
   border-radius: 50%;
 }

 body {
   background:#c6faf1;
 }

 .penguin * {
   position: absolute;
 }
</style>
<div class="penguin">
 <div class="penguin-bottom">
   <div class="right-hand"></div>
   <div class="left-hand"></div>
   <div class="right-feet"></div>
   <div class="left-feet"></div>
 </div>
 <div class="penguin-top">
   <div class="right-cheek"></div>
   <div class="left-cheek"></div>
   <div class="belly"></div>
   <div class="right-eye">
     <div class="sparkle"></div>
   </div>
   <div class="left-eye">
     <div class="sparkle"></div>
   </div>
   <div class="blush-right"></div>
   <div class="blush-left"></div>
   <div class="beak-top"></div>
   <div class="beak-bottom"></div>
 </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Create a custom CSS Variable

Link to the challenge:

2

Hey @Khido,

Please do not create duplicate topics, If you want to change something on your previous topic, you can edit them. No need to create a new duplicate topic. We are trying to keep the forums looking clean

Thank you for your understanding…

3

You made use of _ _ instead of –

4

It still does’nt change even after I changed it