<dl>
  <dt>0</dt>
  <dd>Start on top and around you go. That's how you make a zero!</dd>
  <dt>1</dt>
  <dd>Go straight down and then you're done. That's the way to make a one.</dd>
  <dt>2</dt>
  <dd>Make a candy cane and then a shoe. That's the way to make a two!</dd>
  <dt>3</dt>
  <dd>Around a tree. Around a tree. That's the way to make a three!</dd>
  <dt>4</dt>
  <dd>Down, across, and down some more. That is how you make a four!</dd>
  <dt>5</dt>
  <dd>Take a drive. Swim around. To make a five come back to the ground.</dd>
  <dt>6</dt>
  <dd>Slide down and around to pick up sticks. That is the way to make a six.</dd>
  <dt>7</dt>
  <dd>Straight across and down from heaven. That is how you make a seven!</dd>
  <dt>8</dt>
  <dd>Make an S but don't just wait. Come back up to make an eight!</dd>
  <dt>9</dt>
  <dd>Make a loop and then a line. That's the way to make a nine!</dd>
</dl>
body :nth-child(1) {
  background: rgb(222,32,226);
  background: radial-gradient(circle, rgba(222,32,226,1) 9%, rgba(217,255,0,1) 100%);
  display: flex;
  flex-wrap: wrap;
  font-family: 'Josefin Sans', sans-serif;
  height: 750px;
  width: 1400px;
}

dd:nth-child(2n) {
  margin: 60px;
}

dt:nth-child(1) {
  font-size: 0;
}

/* zero */
dd:nth-child(2) {
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
  border: dotted 4px black;
  border-right: dotted 8px black;
  border-bottom: dotted 12px black;
  border-left: dotted 16px black;
  border-radius: 50%;
  height: 165px;
  line-height: 36px;
  padding: 38px;
  position: absolute;
  text-align: center;
  width: 105px;
}

/* one */
dd:nth-child(4) {
  background: rgb(53,230,217);
  background: linear-gradient(90deg, rgba(53,230,217,1) 0%, rgba(0,255,208,1) 100%);
  height: 225px;
  left: 345px;
  outline: 6px solid black;
  outline-offset: 10px;
  padding: 5px;
  position: absolute;
  width: 52px;
}

/* two candy cane vertical */
dd:nth-child(6) {
  background-image: repeating-linear-gradient(-65deg, white 0 20px, red 20px 40px);
  background-color: #00d0ff;
  border-radius: 0 10px 0 0;
  height: 200px;
  left: 587px;
  padding: 5px;
  position: absolute;
  transform: rotate(20deg);
  width: 50px;
}

/* two candy cane top */
dt:nth-child(3) {
  background-image: repeating-linear-gradient(-45deg, white 0 20px, red 20px 40px);
  background-color: #00d0ff;
  border-radius: 10% 50% 5px 10%;
  height: 50px;
  left: 611px;
  font-size: 0;
  position: absolute;
  top: 58px;
  width: 127px;
}

/* two shoe */
dt:nth-child(5) {
  background-color: black;
  border-bottom: solid 3px black;
  border-radius: 0 50% 0 0;
  font-size: 0;
  left: 610px;
  height: 50px;
  position: absolute;
  top: 270px;
  width: 130px;
}

/* three tree top */
dd:nth-child(8) {
  background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(65,253,45,1) 100%);
  border: solid 5px black;
  border-left-color: rgba(255,255,255,0);
  border-radius: 0 50% 50% 0;
  height: 77px;
  left: 780px;
  padding: 30px;
  position: absolute;
  width: 130px;
}

/* three tree bottom */
dt:nth-child(7) {
  background-color: brown;
  border: solid 5px black;
  border-left-color: brown;
  border-radius: 0 50% 50% 0;
  font-size: 0;
  height: 110px;
  left: 880px;
  top: 218px;
  position: absolute;
  width: 100px;
}

/* four */
dd:nth-child(10) {
  color: #f09;
  border-bottom: 120px solid #f09;
  border-left: 120px solid transparent;
  height: 0;
  font-size: 20px;
  left: 1060px;
  position: absolute;
  width: 0;
}

/* five top */
dt:nth-child(11) {
  background-color: black;
  border-top: dashed 5px white;
  height: 50px;
  font-size: 0;
  left: 70px;
  position: absolute;
  top: 430px;
  width: 150px;
}

/* five bottom */
dd:nth-child(12) {
  background: rgb(34,193,195);
  background: linear-gradient(158deg, rgba(34,193,195,1) 0%, rgba(45,74,253,1) 100%);
  border: solid 5px black;
  border-left-color: #b35600;
  border-radius: 50%;
  color: blue;
  height: 100px;
  padding: 25px;
  position: absolute;
  text-align: right;
  top: 450px;
  width: 100px;
}

/* six top */
dt:nth-child(13) {
  background: rgb(69,55,61);
  background: linear-gradient(90deg, rgba(69,55,61,1) 0%, rgba(147,151,156,1) 100%);
  height: 50px;
  font-size: 0;
  left: 330px;
  position: absolute;
  top: 460px;
  transform: rotate(-60deg);
  width: 170px;
}

/* six bottom */
dd:nth-child(14) {
  border-radius: 50%;
  border: dashed 5px brown;
  color: white;
  height: 90px;
  left: 280px;
  padding: 30px;
  position: absolute;
  text-align: center;
  top: 450px;
  width: 90px;
}

/* seven horizonal */
dt:nth-child(15) {
  background: rgb(195,236,236);
background: linear-gradient(234deg, rgba(195,236,236,1) 39%, rgba(253,238,45,1) 100%);
  height: 57px;
  font-size: 0;
  left: 600px;
  position: absolute;
  top: 420px;
  width: 150px;
}

/* seven vertical */
dd:nth-child(16) {
  background: rgb(252,252,252);
background: linear-gradient(27deg, rgba(252,252,252,.2) 39%, rgba(253,238,45,1) 100%);
  height: 200px;
  left: 580px;
  padding: 5px;
  position: absolute;
  top: 400px;
  transform: rotate(20deg);
  width: 55px;
}

/* eight bottom */
dd:nth-child(18) {
  background-color: #d9ff00;
  border-radius: 50%;
  height: 108px;
  left: 810px;
  padding: 20px 60px;
  position: absolute;
  top: 468px;
  transform: rotate(180deg);
  width: 30px;
}

/* eight top */
dt:nth-child(17) {
  background-color: #d9ff00;
  border-radius: 50%;
  height: 80px;
  left: 870px;
  font-size: 0;
  padding: 30px;
  position: absolute;
  top: 410px;
  width: 80px;
}

/* nine top */
dd:nth-child(20) {
  background: rgb(232,50,174);
background: linear-gradient(90deg, rgba(232,50,174,1) 0%, rgba(190,45,253,1) 38%);
  border-radius: 50%;
  color: white;
  height: 90px;
  left: 1080px;
  padding: 30px;
  position: absolute;
  text-align: center;
  top: 350px;
  width: 90px;
}

/* nine vertical */
dt:nth-child(19) {
  background-color: black;
  height: 170px;
  font-size: 0;
  left: 1230px;
  padding: 5px;
  position: absolute;
  top: 500px;
  transform: rotate(20deg);
  width: 10px;
}
//for the :nth-child selector challenge

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.