Change a variable for a specific area, Help Please!

I’ve done the code, watched the video as to how to preform the task and even copied/ pasted the code into my code editor and still no luck. Any help would be greatly appreciated, thanks in advance.

  **Your code so far**
 :root {
   --penguin-skin: gray;
   --penguin-belly: pink;
   --penguin-beak: orange;
 }
 
 body {
   background: var(--penguin-belly, #c6faf1);
 }
 
 .penguin {
   
   /* add code below */
   --penguin-belly: white;      
   /* add code above */```
    
```html

<style>
:root {
 --penguin-skin: gray;
 --penguin-belly: pink;
 --penguin-beak: orange;
}

body {
 background: var(--penguin-belly, #c6faf1);
}

.penguin {
 
 /* add code below */
 --penguin-belly: white;
 /* add code above */
 
 position: relative;
 margin: auto;
 display: block;
 margin-top: 5%;
 width: 300px;
 height: 300px;
}

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

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

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

.penguin-top {
 top: 10%;
 left: 25%;
 background: var(--penguin-skin, gray);
 width: 50%;
 height: 45%;
 border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
 top: 40%;
 left: 23.5%;
 background: var(--penguin-skin, gray);
 width: 53%;
 height: 45%;
 border-radius: 70% 70% 100% 100%;
}

.right-hand {
 top: 0%;
 left: -5%;
 background: var(--penguin-skin, gray);
 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, gray);
 width: 30%;
 height: 60%;
 border-radius: 30% 30% 30% 120%;
 transform: rotate(-45deg);
 z-index: -1;
}

.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%;
}

.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 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15.

Challenge: Change a variable for a specific area

Link to the challenge:

Hi @willjbarg !

Welcome to the forum!

You wrote this part twice.

Maybe that was just a mistake when you were entering the code into the forum .

But I tested this part and it passed for me.



<style>
:root {
 --penguin-skin: gray;
 --penguin-belly: pink;
 --penguin-beak: orange;
}

body {
 background: var(--penguin-belly, #c6faf1);
}

.penguin {
 
 /* add code below */
 --penguin-belly: white;
 /* add code above */
 
 position: relative;
 margin: auto;
 display: block;
 margin-top: 5%;
 width: 300px;
 height: 300px;
}

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

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

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

.penguin-top {
 top: 10%;
 left: 25%;
 background: var(--penguin-skin, gray);
 width: 50%;
 height: 45%;
 border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
 top: 40%;
 left: 23.5%;
 background: var(--penguin-skin, gray);
 width: 53%;
 height: 45%;
 border-radius: 70% 70% 100% 100%;
}

.right-hand {
 top: 0%;
 left: -5%;
 background: var(--penguin-skin, gray);
 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, gray);
 width: 30%;
 height: 60%;
 border-radius: 30% 30% 30% 120%;
 transform: rotate(-45deg);
 z-index: -1;
}

.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%;
}

.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>

The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

Also, you might try testing it with another browser.

I am using google chrome without extensions.

1 Like

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