ChallengeAnimals

Nest Family Tree

Parents and children: .nest .egg only colors eggs inside the nest.

Goal: Color the eggs inside the nest without touching the egg on the grass.

Auto run

Your goals

0 of 3 done

Color the eggs inside the nest sky bluenot completed yet
Use .grass > .egg to color only the egg lying on the grass pinknot completed yet
Color the twigs inside the nest brownnot completed yet

index.htmlhtml

<div class="grass">
  <div class="nest">
    <div class="twig"></div>
    <div class="twig"></div>
    <div class="egg"></div>
    <div class="egg"></div>
  </div>
  <div class="egg"></div>
</div>

style.csscss

.grass {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  height: 260px;
  padding: 24px;
  border-radius: 20px;
  background-color: honeydew;
}

.nest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 190px;
  padding: 14px;
  border-radius: 0 0 50% 50%;
  background-color: wheat;
}

.egg {
  width: 40px;
  height: 52px;
  border-radius: 50%;
  background-color: white;
}

.twig {
  width: 80px;
  height: 10px;
  border-radius: 6px;
  background-color: white;
}

/* Write a parent/child rule here */

preview

Up next

One Special Penguin

Next activity →