I can't pass the test for some reason, even though it seems to me I haven't done any mistakes

HTML-CSS
1

Tell us what’s happening:
Hi! I think I am stuck, to me the code is correct as it is exactly the same as in the video but it won’t let me pass the test…
Can anyone tell me where is my error please?

  **Your code so far**


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

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

.penguin {
  /* Only change code below this line */
--penguin-belly: white;
  /* Only change code above this line */
  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_14_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:

1 Like
2

I have asked the same question a couple days ago, I also watched the video and used the “get a hint”. When applying the same answer it would not let me move on. I just continued on and left that one unfinished. Wish I could help!

3

could you still get the certification at the end of it?

4

What do the failing tests say?

5

Your code passes for me.
Are you using a dark-mode extension? Those extensions work by changing your CSS, which interferes with the test suite.
With the CSS challenges it is important to disable all browser extensions that modify your CSS, such as dark mode extensions. freeCodeCamp does have a native dark mode you can enable in your settings.

The requirements for obtaining the certificate are that you successfully complete the five projects at the end. You don’t have to do all of the lessons.

1 Like
6

“The penguin class should reassign the --penguin-belly variable to white”

7

That is what is confusing me too. It is changing the color of the penguin belly to white when it runs the code on the right side. But the code is not passing.

I tried running the code with night mode off and it is still not passing.

8

When you disable the extension you’ll probably need to clear cache too before running the code.

9

Check that you are using an up-to-date version of Edge, Firefox, Safari, or Chrome. Disable any extensions that chage the appearance of websites. Disable any extensions that prevent scripts from running (such as adblockers).

2 Likes
10

I am running safari and I do not use any extensions. I have checked with safari preferences, I also do not run a dark mode that is not within the code camp website. I turned that off and the code would still not run. I might try running the code on chrome.

11

here, same issue, it worked changing browser

1 Like
12

Pretty sure it’s Safari, the test is using a negative lookbehind and it isn’t supported in Safari (as far as I can see caniuse).

Looking at the PR it seems the lack of support for Safari is intentional, not sure why?

2 Likes
17

I managed to finish the test using an other browser! Thank you all :slight_smile:

18

it was indeed Safari thanks :raised_hands:

19

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