CSS
*{
box-sizing:border-box;
padding:0;
margin:0;
}
body{
background:#30b9f7;
}
.container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:355px;
height:250px;
}
.notepad1,
.notepad2{
display:inline-block;
margin:0 10px;
}
.notepad1{
position:relative;
width:135px;
height:200px;
border-radius:5px;
background:#da4c9e;
box-shadow:inset 0px -2px 0 rgba(0,0,0,0.25), inset 0px -3px 0 #FFF, 0px 1px 0 #da4c9e, 3px 3px 0 rgba(0,0,0,0.25);
}
.notepad1:before,
.notepad1:after{
position:absolute;
content:'';
}
.notepad1:before{
top:8px;
left:10px;
width:7px;
height:6px;
margin:auto;
border-radius:2px;
box-shadow:inset 0 0 0 5px #CCC, 15px 0 0 #CCC, 30px 0 0 #CCC, 45px 0 0 #CCC, 60px 0 0 #CCC, 75px 0 0 #CCC, 90px 0 0 #CCC, 105px 0 0 #CCC;
}
.notepad1:after{
top:-8px;
left:0;
right:0;
width:82%;
height:20px;
margin:auto;
background-image:repeating-linear-gradient(90deg, #333 0, #333 3px, transparent 3px, transparent 15px);
}
.notepad2{
width:175px;
height:250px;
border-radius:0 0 2px 2px;
background:#FFF;
background-image:linear-gradient(90deg, transparent 0, transparent 18px, red 18px, red 19px, transparent 19px, transparent 20px, red 20px, red 21px, transparent 21px), repeating-linear-gradient(#2196f3 0, #2196f3 1px, transparent 1px, transparent 10px);
background-size:100% 100%, 100% 85%;
background-position:0 0, 0 80%;
background-repeat:no-repeat;
box-shadow:inset 0 10px #255654, inset 0px -4px 0 rgba(0,0,0,0.25), 3px 3px 0 rgba(0,0,0,0.25)
}
