ExplorerAnimals

One Special Penguin

An id belongs to exactly one element — perfect for the star of the show.

Goal: Use #star-penguin to color just one penguin, and .penguin for the rest.

Auto run

Your goals

0 of 3 done

Use .penguin to give every penguin a black bodynot completed yet
Use #star-penguin to make the special one purplenot completed yet
Give #star-penguin's scarf a yellow colornot completed yet

index.htmlhtml

<div class="ice">
  <div class="penguin"></div>
  <div class="penguin" id="star-penguin">
    <div class="scarf"></div>
  </div>
  <div class="penguin"></div>
</div>

style.csscss

.ice {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  height: 260px;
  padding: 20px;
  border-radius: 20px;
  background-color: aliceblue;
}

.penguin {
  position: relative;
  width: 70px;
  height: 130px;
  border-radius: 50% 50% 40% 40%;
  background-color: white; /* every penguin */
}

.scarf {
  position: absolute;
  left: 4px;
  top: 44px;
  width: 62px;
  height: 16px;
  border-radius: 8px;
  background-color: white;
}

/* Now write the #star-penguin rules */

preview

Up next

Color the Fox

Next activity →