<!--Invisible Box -->
<div class=box>
  <!--note pad-->
  <div class="paper2"></div>
  <div class="paper1"></div>
  <div class="paper">
    
    <!--Black binding -->
    <div class="binding"></div>
    <!--end black binding-->
    <!--red lines -->
    <div class="red-line1"></div>
    <div class="red-line2"></div>
    <!--end red lines -->
    
    <!--Start blue lines-->
    <div class="blue-line1"></div>
    <div class="blue-line2"></div>
    <div class="blue-line3"></div>
    <div class="blue-line4"></div>
    <div class="blue-line5"></div>
    <div class="blue-line6"></div>
    <div class="blue-line7"></div>
    <div class="blue-line8"></div>
    <div class="blue-line9"></div>
    <div class="blue-line10"></div>
    <div class="blue-line11"></div>
    <div class="blue-line12"></div>
    <div class="blue-line13"></div>
    <div class="blue-line14"></div>
    <div class="blue-line15"></div>
    <div class="blue-line16"></div>
    <div class="blue-line17"></div>
    <div class="blue-line18"></div>
    <div class="blue-line19"></div>
    <div class="blue-line20"></div>
    <div class="blue-line21"></div>
    <div class="blue-line22"></div>
    <div class="blue-line23"></div>
    <div class="blue-line24"></div>
    <div class="blue-line25"></div>
    <div class="blue-line26"></div>
    <div class="blue-line27"></div>
    <!-- End blue lines-->
    <div class="text1">To Do:</div>
    <div class="text2">#dailycssimages</div>
    <div class="text3">study javascript</div>
    <div class="text4">go for a run - yeah right</div>
    <div class="text5">dinner resv @ 5:30</div>
  </div>
  <!-- end notepad -->
  
</div> <!-- End box -->
/*background image from: 
http://www.hillwoodproducts.com/
*/
html {
  background: url(https://c1.staticflickr.com/1/538/31871445333_3189ef394e_h.jpg) center no-repeat fixed;
}

.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 420px;
  background: none;
}
.paper2 {
  background: #E9E9E9;
  position: absolute;
  width: 40%;
  height: 75%;
  top: 19.5%;
  left: 24.8%;
  transform: rotate(-10deg);
  border: 1px solid #C0C0C0;
  -webkit-box-shadow: -9px 4px 28px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -9px 4px 28px 0px rgba(0,0,0,0.75);
box-shadow: -9px 4px 28px 0px rgba(0,0,0,0.75);
}
.paper1 {
  background: #FFF;
  position: absolute;
  width: 40%;
  height: 75%;
  top: 18%;
  left: 24.8%;
  transform: rotate(-10deg);
  border: 1px solid #C0C0C0;
}
.paper {
  background: #FFF;
  position: absolute;
  width: 40%;
  height: 75%;
  top: 16.5%;
  left: 25%;
  transform: rotate(-10deg);
}

.red-line1 {
  background: #FE9595;
  width: 0.5%;
  height: 102%;
  left: 10%;
  position: absolute;
}

.red-line2 {
  background: #FE9595;
  width: 0.5%;
  height: 102%;
  left: 8%;
  position: absolute;
}

.binding {
  background: #3F3F3F;
  width: 102%;
  height: 5%;
  left:-1.5%;
  position: absolute;
  z-index: 2;
}

.blue-line1 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 16%;
}
.blue-line2 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 19%;
}
.blue-line3 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 22%;
}
.blue-line4 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 25%;
}
.blue-line5 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 28%;
}
.blue-line6 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 31%;
}
.blue-line7 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 34%;
}
.blue-line8 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 37%;
}
.blue-line9 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 40%;
}
.blue-line10 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 43%;
}
.blue-line11 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 46%;
}
.blue-line12 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 49%;
}
.blue-line13 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 52%;
}
.blue-line14 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 55%;
}
.blue-line15 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 58%;
}
.blue-line16 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 61%;
}
.blue-line17 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 64%;
}
.blue-line18 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 67%;
}
.blue-line19 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 70%;
}
.blue-line20 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 73%;
}
.blue-line21 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 76%;
}
.blue-line22 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 79%;
}
.blue-line23 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 82%;
}
.blue-line24 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 85%;
}
.blue-line25 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 88%;
}
.blue-line26 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 91%;
}
.blue-line27 {
  background: #8E8EFF;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 94%;
}
.text1 {
  font-family: 'Reenie Beanie', cursive;
  top: 13%;
  left: 10%;
  position: absolute;
}
.text2 {
  font-family: 'Reenie Beanie', cursive;
  top: 21.5%;
  left: 10%;
  position: absolute;
}
.text3 {
  font-family: 'Reenie Beanie', cursive;
  top: 24.8%;
  left: 10%;
  position: absolute;
}
.text4 {
  font-family: 'Reenie Beanie', cursive;
  top: 28%;
  left: 10%;
  position: absolute;
}
.text5 {
  font-family: 'Reenie Beanie', cursive;
  top: 30.6%;
  left: 12%;
  position: absolute;
}
Rerun