<div class="container">
	<div class="notepad1"></div>
	<div class="notepad2"></div>
</div>

*{
	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)
}