Add fallback value

HTML-CSS
1

Tell us what’s happening:
I am not able to understand why this program is not running for .penguin-top class?
can anybody please help me ?
Your code so far


<style>
 .penguin {
   --penguin-skin: black;
   --penguin-belly: gray;
   --penguin-beak: yellow;
   position: relative;
   margin: auto;
   display: block;
   margin-top: 5%;
   width: 300px;
   height: 300px;
 }
.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%;
 }
.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%;
 }
 .right-hand {
   top: 0%;
   left: -5%;
   background: var(--penguin-skin, black);
   width: 30%;
   height: 60%;
   border-radius: 30% 30% 120% 30%;
   transform: rotate(45deg);
   z-index: -1;
 }

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

 .right-cheek {
   top: 15%;
   left: 35%;
   background: var(--penguin-belly, white);
   width: 60%;
   height: 70%;
   border-radius: 70% 70% 60% 60%;
 }

 .left-cheek {
   top: 15%;
   left: 5%;
   background: var(--penguin-belly, white);
   width: 60%;
   height: 70%;
   border-radius: 70% 70% 60% 60%;
 }

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

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

 .left-feet {
   top: 85%;
   left: 25%;
   background: var(--penguin-beak, 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: var(--penguin-beak, orange);
   width: 20%;
   height: 10%;
   border-radius: 50%;
 }

 .beak-bottom {
   top: 65%;
   left: 42%;
   background: var(--penguin-beak, 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/88.0.4324.150 Safari/537.36.

Challenge: Attach a Fallback value to a CSS Variable

Link to the challenge:

2

I’m not sure how, but much of that code got changed around. You only need to change two lines. I would reset the code and just make the needed changes.

3

no, I changed only the required lines, I don’t know why it is showing error for only one thing?

4

I don’t know - I do know that when I put your code in a diff checker with the correct solution, the thing lights up like a Christmas tree. Maybe it was gremlins. In any case, if I reset the code, and make the two changes, it passes for me.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.