Asking question concerns with Basic CSS
Hello! Everyone… I want to know about this statement.
/* Change code below this line /
/ Change code above this line */
Where and why is it used for? I found it in CSS variables.
I mean Sometimes, the additional code is written between these two statements.
/* Change code below this line /
/ Change code above this line */
Sometimes, the extra code is written under class in CSS style block.
I am confused now. Please help me. Thank you so much.^-^
Title: Basic CSS: Use a custom CSS Variable
.penguin { --penguin-skin: gray; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .penguin-top { top: 10%; left: 25%; /* Change code below this line */ background: 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: black; /* Change code above this line */ width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; /* Change code below this line */ background: black; /* Change code above this line */ width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; /* Change code below this line */ background: black; /* Change code above this line */ width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-cheek { top: 15%; left: 35%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: white; width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: white; width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .right-feet { top: 85%; left: 60%; background: orange; width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: 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: orange; width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: orange; width: 16%; height: 10%; border-radius: 50%; } body { background:#c6faf1; } .penguin * { position: absolute; }
**Your browser information:**
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.66 Safari/537.36</code>.
**Challenge:** Use a custom CSS Variable
**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-custom-css-variable