<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.