ExplorerSpace

Night Sky

Gradients, borders and border-radius make planets and stars.

Goal: Paint the sky dark, the planet warm, and add a ring.

Auto run

Your goals

0 of 3 done

Make the sky dark like nightnot completed yet
Give the planet a warm colornot completed yet
Change the ring color so it stands outnot completed yet

index.htmlhtml

<div class="space">
  <div class="planet"></div>
  <div class="ring"></div>
  <div class="star s1"></div>
  <div class="star s2"></div>
  <div class="star s3"></div>
</div>

style.csscss

.space {
  position: relative;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  background-color: white; /* try midnightblue */
}

.planet {
  position: absolute;
  left: 90px;
  top: 80px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: gray; /* try coral */
}

.ring {
  position: absolute;
  left: 60px;
  top: 118px;
  width: 170px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid gray; /* try khaki */
  transform: rotate(-12deg);
}

.star {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}

.s1 { left: 30px; top: 30px; }
.s2 { right: 40px; top: 60px; }
.s3 { right: 80px; bottom: 40px; }

preview

Up next

Build the Zoo Sign

Next activity →