<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 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.