brokenness layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>brokenness</title>

<style type="text/css">

/*------------------------------
Name: Brokenness
By: ariestrash
Site: http://www.ariestrash.com
-------------------------------*/

body  {
	background:#f3ebe3 url('http://i42.tinypic.com/5k22wx.jpg') repeat-y;
	text-align: normal;
	margin: 00px 0 00px 0 }

div,body {
	font: 10px 'courier new,' courier, monospace;
	color: #333;
	line-height: 15px; }

blockquote {
	background-color: #fff;
	width: 405px;
	margin-left: 8px;
	padding: 10px; }

#header {
	background:url('http://i44.tinypic.com/2ppaliu.jpg');
	position:absolute;
	left:0px;
	top:0px;
	width: 800px;
	height: 800px; }


/*CONTENT-------------------------------*/

#content {
	position:absolute;
	width:440px;
	left:288px;
	top:220px;
	text-align: justify;
	padding: 0px 12px;
	z-index:1; }

#content h1 {
	width: 100%;
	text-align: center;
	font-family: 'courier new,' courier, monospace;
	font-size: 13px;
	color:#524d4f;
	font-weight: normal;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 2px;
	margin-bottom:10px;
	margin-top:20px;
	border-bottom: 1px solid #8B868B; }

#content a:link, a:visited, a:active {
	color: #404040;
	font-weight:none;
	text-decoration: none; }

#content a:hover {
	color: #b9807a;
	font-weight:none;
	text-decoration: none; }


/* NAVIGATION----------------------------*/

#navi { position: absolute;
	top: 197px;
	left: 410px;
	z-index: 3;}

#navi a:link, a:visited, a:active {
	display: inline;
	width: 200px;
	background-color:#faf6f1;
	color: #524d4f;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 4px;
	padding: 2px;
	margin-right: 6px; }

#navi a:hover {
	background-image: url('http://i40.tinypic.com/95re3q.jpg');
	color: #524d4f; }


/* SIDEBAR-------------------------------*/

#side {
	position:absolute;
	width:195px;
	left:10px;
	top:480px;
	text-align: justify;
	z-index:2 }

#side h2 {
	background-image:url('http://i40.tinypic.com/95re3q.jpg');
	width: 100%;
	text-align: right;
	font-family: 'courier new,' courier, monospace;
	font-size: 11px;
	color:#524d4f;
	font-weight: normal;
	margin-bottom:6px;
	margin-top:0px;
	margin-left:-10px;
	padding-right:25px;
	text-transform: uppercase;
	letter-spacing: 3px;    }

#side a:link, a:visited, a:active {
	color: #404040;
	font-weight:none;
	text-decoration: none; }

#side a:hover	{
	color: #b9807a;
	font-weight:none;
	text-decoration: none; }

ul {
	list-style-type:circle;
	color:b8b59e;
	line-height: 12px; }


b {color: #333; font-weight: 400px;}
i {color: #c9b2a2;}
u {color : #524d4f; text-decoration: underline;}
s {color:#c4bfc6;}

</style>
</head>


<body>

<div id="header"></div>

<!--START OF CONTENT-->
<div id="content">
<h1>welcome</h1>
<p><b>brokenness</b> was inspired by a f. scott fitzgerald quote which goes: <i>"and in the end, we were all just humans…drunk on the idea that love, only love, could heal our brokenness."</i> i definitely experimented with texture in this layout. i had quite a bit of fun with this one and at one point, i didn't think it was going to come out well at all, due to the odd angle of the header. but it came out so well! i really love the neutral color of it. please, if you use, do not remove the credit. thanks.</p>

<h1>this is a header</h1>
<p>lorem ipsum dolor sit amet, consectetur timide concitatis. maturius remota tractatione meliorem, summis honeste animi accommodatior videmus, iudices opere omnem magnificentius censores ad modo magno esse. et sit veneficii vivendi eas animi quosdam. certum partitionem quosdam omnem adiuvet criminibus summis reticendo directam concitatis retentam ad. tris iudicii iucunde temperantiam iudices ad? ego seditiose iudicium perspicio, voluptatibus ut ad brevis exquisitaque altera. virtutes honeste animadverteretur habere, remota in neque vivi ingeniis foris tractatione. pars alieno voluisse facere summum graeco iudices meditati quam ingeniis animadverteretur haec invidiosum lege. facere iudicii et partem altera.</p>

<blockquote>lorem ipsum dolor sit amet, consectetur timide concitatis. maturius remota tractatione meliorem, summis honeste animi accommodatior videmus, iudices opere omnem magnificentius censores ad modo magno esse. et sit veneficii vivendi eas animi quosdam. certum partitionem quosdam omnem adiuvet criminibus summis reticendo directam concitatis retentam ad. tris iudicii iucunde temperantiam iudices ad? ego seditiose iudicium perspicio, voluptatibus ut ad brevis exquisitaque altera. virtutes honeste animadverteretur habere, remota in neque vivi ingeniis foris tractatione. pars alieno voluisse facere summum graeco iudices meditati quam ingeniis animadverteretur haec invidiosum lege. facere iudicii et partem altera.</blockquote>

<p><a href="http://link.com">link</a> - <b>bold</b>  -  <i>Italic</i>  -  <u>underlined</u>  -  <s>strikethrough</s></p>

</div>
<!--END OF CONTENT-->


<!--START OF NAVIGATION-->
<div id=navi>
	<a href="link">home</a>
	<a href="link">about</a>
	<a href="link">site</a>
	<a href="link">contact</a>
</div>
<!--END OF NAVIGATION-->


<!--START OF SIDEBAR-->
<div id="side">

<h2>about</h2>
<p>about me here. lorem ipsum dolor sit amet, consectetur timide concitatis. maturius remota tractatione meliorem, summis honeste animi accommodatior videmus, iudices opere omnem magnificentius censores ad modo magno esse. et sit veneficii vivendi eas animi quosdam.</p>

<br>

<h2>credit</h2>
<center>layout design by: <a href="http://www.ariestrash.com">ariestrash</a></center>
</div>
<!--THE END OF SIDEBAR-->


</body>
</html>