Notepads

HTML
<div class="container"> <div class="notepad1"></div> <div class="notepad2"></div> </div>
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) }
JAVASCRIPT
Expand for more options Login