.artboard
	.notepad
		.head
		.head-after
		.body
			.lines
				- for(var x=0; x<= 18; x++)
					.hlines
			.vline-1
			.vline-2
		.content
			p Designed by Isaac Young <br/> Thank you @ #dailycssimages <br/> Rapidly developed to see what I could make within 30 minutes. <br/><br/><em> You can do this too!</em><br/>Follow <a href="https://twitter.com/dailycssimages">#dailycssimages</a><br/>Or visit <a href="http://dailycssimages.com">dailycssimages.com</a> to take the CSS image course!
View Compiled
//dimensions
$d : 680px;

$skin-l: #F8EECF;
$skin-m: #EFE0AA;
$skin-d: #D3A345;

$dark-1: #B0B5A6;
$dark-2: #67706A;

$pop: #C36721;

@mixin circ($x, $background){
	position: absolute;
	width: $x;
	height: $x;
	background-color: $background;
	border-radius: 50%;
}

@mixin squa($x, $background){
	position: absolute;
	width: $x;
	height: $x;
	background-color: $background;
}
@mixin oval($w, $h, $background){
	position: absolute;
	width: $w;
	height: $h;
	background-color: $background;
	border-radius: 50%;
}

@mixin rect($w, $h, $background){
	position: absolute;
	width: $w;
	height: $h;
	background-color: $background;
}

@mixin posi($left, $top){
	left: $left;
	top: $top;
}

@mixin grad($start, $stop, $color){
	background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) $start, $color $start, $color $stop, rgba(0,0,0,0.00) $stop);
}

body{
	background-color: $dark-1;
}

.artboard {
	position: relative;
	width: $d;
	height: $d;
	margin: auto;
}

.notepad {
	position: absolute;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 5%;
	background-color: $skin-l;
	border-radius: 1%;
}

.head {
	position: absolute;
	width: 100%;
	height: 10%;
	top: 0;
	background-color: $dark-2;
	border-radius: 4px 4px 0px 0px;
}

.head-after{
	position: absolute;
	width: 100%;
	height: 1%;
	top: 10%;
	background-color: $skin-m;
}

.body{
	position: absolute;
	width: 100%;
	height: 89%;
	top: 11%;
}

.hlines {
	position: absolute;
	width: 100%;
	height: .25%;
	background-color: $skin-m;
}

@for $i from 1 through 18 {
	.hlines:nth-child(#{$i}){
		$pad: ($i * 96/18);
		top: #{$pad + '%'};
	}
}

.vline-1 {
	position: absolute;
	width: .1em;
	height: 100%;
	left: 10%;
	background-color: lighten($pop, 30);
}

.vline-2 {
	position: absolute;
	width: .1em;
	height: 100%;
	left: 11%;
	background-color: lighten($pop, 30);
}

.content{
	position: absolute;
	width: 100%;
	height: 89%;
	top: 11%;
	margin-left: 13%;
	margin-top: 3%;
	p {
		font: .88em sans-serif;
		line-height: 190%;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.