Basic CSS: Use a custom CSS Variable

Basic CSS: Use a custom CSS Variable
0

#1

The link to the help for this is broken.

(https://learn.freecodecamp.org/responsive-web-design/basic-css/use-a-custom-css-variable)

This above link is not working and I can not find a solution to getting the code to pass.


#2

If you need help, you should also post your code. Then the spotting can begin.


#3

@zapcannon99 Thank you I will try that.


#4

peteredw is correct about the help button click.

shows this god awful thing

https://forum.freecodecamp.org/new-topic?category=HTML-CSS&title=Use%20a%20custom%20CSS%20Variable&body=Tell%20us%20what%27s%20happening%3A%0A%0A%0A%0AYour%20code%20so%20far%0A%0A%60%60%60html%0A%0A%0A%20%20.penguin%20%7B%0A%20%20%20%20–penguin-skin%3A%20gray%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20margin%3A%20auto%3B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20margin-top%3A%205%25%3B%0A%20%20%20%20width%3A%20300px%3B%0A%20%20%20%20height%3A%20300px%3B%0A%20%20%7D%0A%20%20%0A%20%20.penguin-top%20%7B%0A%20%20%20%20top%3A%2010%25%3B%0A%20%20%20%20left%3A%2025%25%3B%0A%20%20%20%20%0A%20%20%20%20%2F*%20change%20code%20below%20*%2F%0A%20%20%20%20background%3A%20(–penguin-skin%2Cblack)%3B%0A%20%20%20%20%2F*%20change%20code%20above%20*%2F%0A%20%20%20%20%0A%20%20%20%20width%3A%2050%25%3B%0A%20%20%20%20height%3A%2045%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%2060%25%2060%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.penguin-bottom%20%7B%0A%20%20%20%20top%3A%2040%25%3B%0A%20%20%20%20left%3A%2023.5%25%3B%0A%20%20%20%20%0A%20%20%20%20%2F*%20change%20code%20below%20*%2F%0A%20%20%20%20background%3A%20(–penguin-skin%2Cblack)%3B%0A%20%20%20%20%2F*%20change%20code%20above%20*%2F%0A%20%20%20%20%0A%20%20%20%20width%3A%2053%25%3B%0A%20%20%20%20height%3A%2045%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%20100%25%20100%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.right-hand%20%7B%0A%20%20%20%20top%3A%200%25%3B%0A%20%20%20%20left%3A%20-5%25%3B%0A%20%20%20%20%0A%20%20%20%20%2F*%20change%20code%20below%20*%2F%0A%20%20%20%20background%3A%20(–penguin-skin%2Cblack)%3B%0A%20%20%20%20%2F*%20change%20code%20above%20*%2F%0A%20%20%20%20%0A%20%20%20%20width%3A%2030%25%3B%0A%20%20%20%20height%3A%2060%25%3B%0A%20%20%20%20border-radius%3A%2030%25%2030%25%20120%25%2030%25%3B%0A%20%20%20%20transform%3A%20rotate(45deg)%3B%0A%20%20%20%20z-index%3A%20-1%3B%0A%20%20%7D%0A%20%20%0A%20%20.left-hand%20%7B%0A%20%20%20%20top%3A%200%25%3B%0A%20%20%20%20left%3A%2075%25%3B%0A%20%20%20%20%0A%20%20%20%20%2F*%20change%20code%20below%20*%2F%0A%20%20%20%20background%3A%20(–penguin-skin%2Cblack)%3B%0A%20%20%20%20%2F*%20change%20code%20above%20*%2F%0A%20%20%20%20%0A%20%20%20%20width%3A%2030%25%3B%0A%20%20%20%20height%3A%2060%25%3B%0A%20%20%20%20border-radius%3A%2030%25%2030%25%2030%25%20120%25%3B%0A%20%20%20%20transform%3A%20rotate(-45deg)%3B%0A%20%20%20%20z-index%3A%20-1%3B%0A%20%20%7D%0A%20%20%0A%20%20.right-cheek%20%7B%0A%20%20%20%20top%3A%2015%25%3B%0A%20%20%20%20left%3A%2035%25%3B%0A%20%20%20%20background%3A%20white%3B%0A%20%20%20%20width%3A%2060%25%3B%0A%20%20%20%20height%3A%2070%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%2060%25%2060%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.left-cheek%20%7B%0A%20%20%20%20top%3A%2015%25%3B%0A%20%20%20%20left%3A%205%25%3B%0A%20%20%20%20background%3A%20white%3B%0A%20%20%20%20width%3A%2060%25%3B%0A%20%20%20%20height%3A%2070%25%3B%0A%20%20%20%20border-radius%3A%2070%25%2070%25%2060%25%2060%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.belly%20%7B%0A%20%20%20%20top%3A%2060%25%3B%0A%20%20%20%20left%3A%202.5%25%3B%0A%20%20%20%20background%3A%20white%3B%0A%20%20%20%20width%3A%2095%25%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20border-radius%3A%20120%25%20120%25%20100%25%20100%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.right-feet%20%7B%0A%20%20%20%20top%3A%2085%25%3B%0A%20%20%20%20left%3A%2060%25%3B%0A%20%20%20%20background%3A%20orange%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2030%25%3B%0A%20%20%20%20border-radius%3A%2050%25%2050%25%2050%25%2050%25%3B%0A%20%20%20%20transform%3A%20rotate(-80deg)%3B%0A%20%20%20%20z-index%3A%20-2222%3B%20%20%0A%20%20%7D%0A%20%20%0A%20%20.left-feet%20%7B%0A%20%20%20%20top%3A%2085%25%3B%0A%20%20%20%20left%3A%2025%25%3B%0A%20%20%20%20background%3A%20orange%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2030%25%3B%0A%20%20%20%20border-radius%3A%2050%25%2050%25%2050%25%2050%25%3B%0A%20%20%20%20transform%3A%20rotate(80deg)%3B%0A%20%20%20%20z-index%3A%20-2222%3B%20%20%0A%20%20%7D%0A%20%20%0A%20%20.right-eye%20%7B%0A%20%20%20%20top%3A%2045%25%3B%0A%20%20%20%20left%3A%2060%25%3B%0A%20%20%20%20background%3A%20black%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2017%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%20%0A%20%20%7D%0A%20%20%0A%20%20.left-eye%20%7B%0A%20%20%20%20top%3A%2045%25%3B%0A%20%20%20%20left%3A%2025%25%3B%0A%20%20%20%20background%3A%20black%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2017%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.sparkle%20%7B%0A%20%20%20%20top%3A%2025%25%3B%0A%20%20%20%20left%3A%2015%25%3B%0A%20%20%20%20background%3A%20white%3B%0A%20%20%20%20width%3A%2035%25%3B%0A%20%20%20%20height%3A%2035%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.blush-right%20%7B%0A%20%20%20%20top%3A%2065%25%3B%0A%20%20%20%20left%3A%2015%25%3B%0A%20%20%20%20background%3A%20pink%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.blush-left%20%7B%0A%20%20%20%20top%3A%2065%25%3B%0A%20%20%20%20left%3A%2070%25%3B%0A%20%20%20%20background%3A%20pink%3B%0A%20%20%20%20width%3A%2015%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.beak-top%20%7B%0A%20%20%20%20top%3A%2060%25%3B%0A%20%20%20%20left%3A%2040%25%3B%0A%20%20%20%20background%3A%20orange%3B%0A%20%20%20%20width%3A%2020%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20.beak-bottom%20%7B%0A%20%20%20%20top%3A%2065%25%3B%0A%20%20%20%20left%3A%2042%25%3B%0A%20%20%20%20background%3A%20orange%3B%0A%20%20%20%20width%3A%2016%25%3B%0A%20%20%20%20height%3A%2010%25%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%20%20%0A%20%20body%20%7B%0A%20%20%20%20background%3A%23c6faf1%3B%0A%20%20%7D%0A%20%20%0A%20%20.penguin%20*%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%7D%0A<%2Fstyle>%0A<div%20class%3D"penguin">%0A%20%20<div%20class%3D"penguin-bottom">%0A%20%20%20%20<div%20class%3D"right-hand"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-hand"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"right-feet"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-feet"><%2Fdiv>%0A%20%20<%2Fdiv>%0A%20%20<div%20class%3D"penguin-top">%0A%20%20%20%20<div%20class%3D"right-cheek"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-cheek"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"belly"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"right-eye">%0A%20%20%20%20%20%20<div%20class%3D"sparkle"><%2Fdiv>%0A%20%20%20%20<%2Fdiv>%0A%20%20%20%20<div%20class%3D"left-eye">%0A%20%20%20%20%20%20<div%20class%3D"sparkle"><%2Fdiv>%0A%20%20%20%20<%2Fdiv>%0A%20%20%20%20<div%20class%3D"blush-right"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"blush-left"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"beak-top"><%2Fdiv>%0A%20%20%20%20<div%20class%3D"beak-bottom"><%2Fdiv>%0A%20%20<%2Fdiv>%0A<%2Fdiv>%0A%60%60%60%0A%0AYour%20browser%20information%3A%0A%0AUser%20Agent%20is%3A%20Mozilla%2F5.0%20(Linux%3B%20Android%206.0%3B%20Nexus%205%20Build%2FMRA58N)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F68.0.3440.106%20Mobile%20Safari%2F537.36<%2Fcode>.%0A%0ALink%20to%20the%20challenge%3A%0Ahttps%3A%2F%2Flearn.freecodecamp.org%2Fresponsive-web-design%2Fbasic-css%2Fuse-a-custom-css-variable%2F

As for the coding, be sure to use the “var” before the (–css_variable_here).

Hope this helps.