Indigo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<!--

==============================================
 Coded by Monica T.
http://monicagalaxy.info/
Theme: "Indigo"
Updated: June 16, 2016
DO NOT REMOVE CREDITS
==============================================

-->
<meta charset="UFT-8">
<title>"Indigo" template | 2016 template by monica</title>
</head>

<style type="text/css">

body {
	background: url("http://imgur.com/pBOPuvE.jpg") repeat-x;
	font-size: 11px;
	color: #333;
	line-height: 20px;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
}

.whole {
        width: 863px;
        margin: 0 auto;
}

.content {
        border-top: 12px solid #6B7A8F;
	width: 640px;
	margin: 0 auto;
        background-color: #fff;
        padding: 20px;
        margin-top: 30px;
        text-align: left;
}

.navigation{
        float: left;
        margin-top: 73px;
        padding: 2px;
}

.part {
	width: 48%;
	margin: 1px 1%;
	float: left;
}

h1 {
	font-family: 'Montserrat', sans-serif;
	color: #636563;
	letter-spacing: 0px;
	font-size: 16px;
	text-align: left;
	border-right: none;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 2px;
}
h2 {
	font-family: 'Montserrat', sans-serif;
	background-color: #DCC7AA;
	color: #636563;
	letter-spacing: 0px;
	font-size: 11px;
	text-align: left;
        border-bottom: 5px solid #fff;
	border-right: none;
	letter-spacing: 2px;
	padding: 2px;
}

h3 {
        font-family: 'Montserrat', sans-serif;
	background-color: #fae5d7;
	color: #636563;
	letter-spacing: 0px;
	font-size: 11px;
	text-align: left;
        border-bottom: 5px solid #fff;
	border-right: none;
	letter-spacing: 2px;
	padding: 2px;
}

a.nav, a.nav:active, a.nav:link, a.nav:visited {
        display: block;
        text-align: right;
        font-family: 'Montserrat', sans-serif;
        width: 80px;
        font-size: 10px;
        background-color: #6B7A8F;
        color: #f4f4f4;
	padding: 5px;
        text-transform: uppercase;
}
a.nav:hover {
	text-decoration: none;
        text-transform: uppercase;
        opacity: 0.8;
}

a:link, a:visited {
	color: #777;
	background-color: #fff;
	text-decoration: none;
}
a:hover {
        color: #636563;
	text-decoration: none;
}

img {
        border: 4px solid #6B7A8F;
        float: right;
        margin: 4px;
}

img:hover {
       float: right;
       opacity: 0.8;
}


</style>
<div class="whole">

<div class="navigation">
<a href="#" class="nav">link</a><br>
<a href="#" class="nav">link</a><br>
<a href="#" class="nav">link</a><br>
<a href="#" class="nav">link</a><br>
<a href="http://monicagalaxy.info" class="nav">css</a><br>
</div>

<div class="navigation">

</div>


<div class="content">

<h1>header one</h1>
<p><img src="http://lacabossedor.com/wp-content/plugins/woocommerce/assets/images/placeholder.png" height="110" width="118"> This is a premade template by  <a href="http://monicagalaxy.info">Monica</a>. Please leave the credit.<br>
 Lorem ipsum dolor sit amet, ferri singulis molestiae mel te. Ne pro semper prompta. Aperiam alterum molestiae pro in, congue nusquam posidonium vis at. Vim id periculis definitionem, vim ne equidem interpretaris. At vel malorum consulatu referrentur, hinc maiorum intellegebat eu has, eum purto adolescens vituperata in. Ius cu aeque quando efficiendi, ne est odio liber ridens, pericula explicari duo ei. Appetere theophrastus no vis, an conceptam expetendis has, id mei quem mundi mnesarchum. Vel cu iusto essent vocent, at causae dignissim mei.</p>

<h2>header two</h2>
<div class="part">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

<div class="part">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<h3>header three</h3>
<p>Lorem ipsum dolor sit amet, ferri singulis molestiae mel te. Ne pro semper prompta. Aperiam alterum molestiae pro in, congue nusquam posidonium vis at. Vim id periculis definitionem, vim ne equidem interpretaris. At vel malorum consulatu referrentur, hinc maiorum intellegebat eu has, eum purto adolescens vituperata in. Ius cu aeque quando efficiendi, ne est odio liber ridens, pericula explicari duo ei. Appetere theophrastus no vis, an conceptam expetendis has, id mei quem mundi mnesarchum. Vel cu iusto essent vocent, at causae dignissim mei.</p>
</div>

</div>
</body>
</html>