R e v e r s e

Layout Code

Copy and paste to Template HTML

<!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>R E V E R S E</title>

body {
	background-color:#ffffff;
	background-image:url(http://cbimg6.com/layouts/10/08/36473ae.png);
	background-repeat:repeat-y;
}

blockquote {
	width:400px;
	color:#678fb3;
	font-size:12px;
	border-left-color:#d4d4d4;
	border-left-width:3px;
	border-left-style:solid;
}

h1 {
	color:#818d97;
	font-size:16px;
	text-align:center;
	letter-spacing:5px;
	font-family:"Times New Roman";
	border-bottom-width:3px;
	border-bottom-style:solid;
	border-bottom-color:#c4c6c6;
	border-top-width:1px;
	border-top-style:solid;
	border-top-color:#c4c6c6;
	border-left-width:1px;
	border-left-style:solid;
	border-left-color:#c4c6c6;
	border-right-width:1px;
	border-right-style:solid;
	border-right-color:#c4c6c6;
	text-transform:uppercase;
}

h2 {
	font-size:10px;
	text-align:center;
	text-transform:uppercase;
	border-bottom-width:1px;
	border-bottom-style:solid;
	border-bottom-color:#c4c6c6;
	letter-spacing:5px;
}
#Header {
	position:absolute;
	left:120px;
	top:0px;
	background-image:url(http://cbimg6.com/layouts/10/08/36473af.png);
	width:1024px;
	height:348px;
}
#SiteTitle {
	position:absolute;
	left:278px;
	top:182px;
	width:375px;
	height:26px;
	z-index:1;
	overflow:hidden;
	text-transform:uppercase;
	letter-spacing:5px;
	font-size:18px;
	color:#4d859a;
	font-family: "Palatino Linotype";
}
#Content {
	position:absolute;
	left:288px;
	top:309px;
	width:503px;
	height:405px;
	z-index:2;
	color:#5e676b;
	font-size:13px;
}
#Rightnav {
	position:absolute;
	left:806px;
	top:323px;
	width:200px;
	height:566px;
	z-index:3;
	color:#677074;
	font-size:12px;
}
#TopNav {
	position:absolute;
	left:287px;
	top:263px;
	width:744px;
	height:36px;
	z-index:4;
	overflow:hidden;
}

a.nav:active, a.nav:visited, a.nav:link {
    display:Inline-block;
	color:#8baaba;
    font-family:georgia;
	text-align: center;
	width:85px;
	height:25px;
    font-size:10px;
    font-weight:None;
    text-decoration:none;
    letter-spacing:1px;
    line-height:14px;
	background-image:url(http://cbimg6.com/layouts/10/08/36473ag.png);
	text-transform:uppercase;

}

a.nav:hover {
	display:Inline-block;
    color:#c0d3dd;
    font-family:georgia;
	text-align: center;
    font-size:10px;
	width:85px;
	height:25px;
    font-weight:normal;
    text-decoration: none;
    letter-spacing:1px;
    line-height:14px;
	text-transform:uppercase;
	background-image:url(http://cbimg6.com/layouts/10/08/36473ah.png);

}

a.link:active, a.link:visited, a.link:link {
    display:block;
	color:#818d97;
    font-family:georgia;
	text-align: left;
    font-size:11px;
	height:20px;
    font-weight:None;
    text-decoration:none;
    letter-spacing:1px;
    line-height:14px;

}

a.link:hover {
	display:block;
    color:#97a3ae;
    font-family:georgia;
	text-align: left;
    font-size:12px;
	height:20px;
    font-weight:normal;
    text-decoration: none;
    letter-spacing:1px;
    line-height:14px;

}

img {
	padding:5px;
}
-->
</style>
</head>

<div id="SiteTitle">
The Site Title Here</div>

<a href="../link" class="nav">Clear</a>
<a href="../link" class="nav">Visitor</a>
<a href="../link" class="nav">Content</a>
<a href="../link" class="nav">Site</a>
<a href="../link" class="nav">About</a>
<a href="../link" class="nav">Contact</a>
<a href="../link" class="nav">Blog</a>
<a href="http://justleah.createblog.com" class="nav">Designer</a>

</div>

<div id="Content">
<h1>Header Sample</h1>

<blockquote>This is a blockquote section<br />
<img src="http://cbimg6.com/layouts/10/08/36473aa.png" width="100" height="100" align="left"/>
<p>

<li type="circle">No stealing</li>
<li type="circle">No redistributing</li>
<li type="circle">Do not call as your own</li>
<li type="circle">You can tamper with the codes</li>
<li type="circle">At least one of the following credits should remain visible</li>
<li type="circle">You can use my codes as your own, just contact me via createblog first, otherwise it would be stealing.</li>

</blockquote>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus , erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.

<h1>Lorem ipsum </h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus , erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
</div>

<div id="Rightnav">
<h2>About..?</h2>

<img src="http://cbimg6.com/layouts/10/08/36473ab.jpg" width="35" height="35"/>
<img src="http://cbimg6.com/layouts/10/08/36473ac.jpg" width="35" height="35"/>
<img src="http://cbimg6.com/layouts/10/08/36473ad.jpg" width="35" height="35" />
<p>Hi my name is ______. And this is my website. </p>
<p>my quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et</p>
<p>&nbsp;</p>
<h2>Archives</h2>
<ul>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>

</ul>

<h2>QuickLinks</h2>
<ul>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>
<li type="circle"><a href="../link" class="link">Linkage Here</a>

</ul>
</div>

Layout Comments

Showing latest 4 of 4 comments

Very professional looking however when I clicked on the preview some of the facebook, twitter, RSS feed images didn't work you might want to fix that and then re-post if you can. Otherwise I thought it was very beautiful elegant and professional looking you did an amazing job.

By Victoria322821 on Sep 8, 2010 1:12 pm