Basic CSS: Attach a Fallback value to a CSS Variable: Bug?

HTML-CSS
1

Pretty sure I am doing this right but It’s not passing one of the tests although it does apply fallback color black on .penguin-top.

Apply the fallback value of black to the background property of the penguin-top class.

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

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

There are typos, be careful with your spelling of “penguin”

1 Like
3

oops, Thanks for catching for that.

4

THANK YOU, May God bless you.

5

As of today, 2nd January 2021, there is still a problem with this test in the tutorial. I was having the same problem with it telling me that the “penguin-top” class wan’t correct.

I found this thread and then went back and checked my code. I noticed the the “penguin-bottom” class reference was spelt “penguin” which was not coming up as an error. So, I changed both the spellings to “penguin” and it worked.

So, whoever “corrected” the bug in the firs place has now spelt both wrongly.

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

/* Change code below this line */
background: var(--**pengiun**-skin, black);
/* Change code above this line */

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

}

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

/* Change code below this line */
background: var(--**pengiun**-skin, black);
/* Change code above this line */

`
Now it works if you misspell “penguin” in the “background: var”

6

the instructions say

Rather than fix the typo, add a fallback value