StarterAnimals

Panda Patches

One class can style many shapes, and one shape can wear many classes.

Goal: Color every .patch at once, then use two classes together for the ear.

Auto run

Your goals

0 of 3 done

Use .patch to color all of the panda patches blacknot completed yet
The eye patches share .patch, so they turn black toonot completed yet
Give the collar (.patch.collar) a bright pink insteadnot completed yet

index.htmlhtml

<div class="panda">
  <div class="patch ear left"></div>
  <div class="patch ear right"></div>
  <div class="face"></div>
  <div class="patch eye left"></div>
  <div class="patch eye right"></div>
  <div class="patch collar"></div>
</div>

style.csscss

.panda {
  position: relative;
  height: 260px;
  background-color: lightcyan;
  border-radius: 20px;
}

.patch {
  position: absolute;
  background-color: white; /* color every patch at once! */
  border-radius: 50%;
}

.face {
  position: absolute;
  left: 70px; top: 50px;
  width: 140px; height: 130px;
  border-radius: 50%;
  background-color: white;
}

.ear { width: 50px; height: 50px; top: 30px; }
.ear.left { left: 60px; }
.ear.right { left: 170px; }

.eye { width: 34px; height: 40px; top: 95px; }
.eye.left { left: 100px; }
.eye.right { left: 146px; }

.collar {
  left: 80px; top: 180px;
  width: 120px; height: 24px;
  border-radius: 12px;
  /* this one has TWO classes: patch and collar */
}

preview

Up next

Two Classes, One Tree

Next activity →