<div class="paper">
<div class="line"></div>
<div class="text-area">
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="content">
<ol start='0'>
<li>Start on top and around you go. That's how you make a zero!</li>
<li>Go straight down and then you're done. That's the way to make a one.</li>
<li>Make a candy cane and then a shoe. That's the way to make a two!</li>
<li>Around a tree. Around a tree. That's the way to make a three!</li>
<li>Down, across, and down some more. That is how you make a four!</li>
<li>Take a drive. Swim around. To make a five come back to the ground.</li>
<li>Slide down and around to pick up sticks. That is the way to make a six.</li>
<li>Straight across and down from heaven. That is how you make a seven!</li>
<li>Make an S but don't just wait. Come back up to make an eight!</li>
<li>Make a loop and then a line. That's the way to make a nine!</li>
</ol>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Handlee);
body{
margin: 0;
padding: 0;
background-color: #bffdff;
}
.paper{
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 600px;
height: 550px;
background: #fafafa;
border-radius: 10px;
box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.3);
}
.paper:hover{
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.text-area{
position: relative;
border-radius: 10px;
top: 6%;
height: 91%;
width: 100%;
background-image: repeating-linear-gradient(#94acd4 80px, #94acd4 81px, transparent 81px, transparent 110px);
}
.line{
position: absolute;
width: 3px;
height: 100%;
background-color: #d44147;
margin-left: 70px;
z-index: 10;
}
.content{
font-family: 'Handlee', cursive;
font-size: 17px;
font-weight: 600;
width: 100%;
height: 100%;
letter-spacing: 1px;
word-spacing: 1px;
}
.content ol{
position: relative;
top: 31px;
margin-left: 22px;
line-height: 30px;
}
ol li{
position: relative;
padding-left: 15px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
li:nth-child(5n+1){
color: #e00;
}
li:nth-child(5n+2){
color: #e80;
}
li:nth-child(5n+3){
color: #0a4;
}
li:nth-child(5n+4){
color: #06f;
}
li:nth-child(5n+5){
color: #a2f;
}
.hole{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #bffdff;
position: absolute;
top: 2%;
left: 12px;
box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.hole:nth-child(2){
top: 44%;
}
.hole:nth-child(3){
top: 85%;
}
// Thank you
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.