How is variable connected to the elements

HTML-CSS
1

**In the penguin class we’re creating a variable. How this variable connects to the elements? Can not see reference to it, further down in the code. Some elements change their color, others do not. Yet, no element appears to have reference to this variable.
Thanx. **

Your code so far


<style>
.penguin {
  /* Only change code below this line */

  /* Only change code above this line */
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 300px;
  height: 300px;
}

.penguin-top {
  top: 10%;
  left: 25%;
  background: black;
  width: 50%;
  height: 45%;
  border-radius: 70% 70% 60% 60%;
}

.penguin-bottom {
  top: 40%;
  left: 23.5%;
  background: black;
  width: 53%;
  height: 45%;
  border-radius: 70% 70% 100% 100%;
}

.right-hand {
  top: 0%;
  left: -5%;
  background: black;
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  transform: rotate(45deg);
  z-index: -1;
}

.left-hand {
  top: 0%;
  left: 75%;
  background: black;
  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;
}
</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 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Create a custom CSS Variable

Link to the challenge:

1 Like
2

It isn’t yet, the next challenge will show how to use it.

2 Likes