Website Layouts

Copy the entire code into a blank HTML page and upload to use.
You may customize the layouts to your liking.

<html>
<head>
<title>Site Title Here;</title>
<style type="text/css">
body{
background-color:#a39a8c;
font-family:georgia;
font-size:11px;
line-height:17px;
text-align:justify;
}

#container{
width:750px;
position:absolute;
left:50%;
margin-left:-375px;
top:50px;
background-color:transparent;
}

.banner{
background-color:#ffffff;
border:1px solid #000000;
margin-bottom:20px;
width:460px;
}

.main{
background-color:#ffffff;
padding:15px;
border:1px solid #000000;
width:430px;
_width:460px;
margin-bottom:20px;
}

.sidebar{
float:left;
width:220px;
_width:250px;
background-color:#ffffff;
padding:15px;
border:1px solid #000000;
margin-bottom:20px;
}

#right{
float:right;
width:480px;
background-color:transparent;
}

a.navigation, a.navigation:active, a.navigation:visited, a.navigation:link{
display:block;
width:100%;
color:#d49a94;
text-decoration:none;
font-family:georgia;
font-size:12px;
text-transform:lowercase;
font-style:italic;
font-weight:bold;
}

a.navigation:hover{
display:block;
width:100%;
color:#a39a8c;
text-decoration:none;
font-family:georgia;
font-size:12px;
text-transform:lowercase;
font-style:italic;
font-weight:bold;
}

a, a:active, a:visited, a:link{
color:#d49a94;
text-decoration:none;
}

a:hover{
color:#a9b7bf;
text-decoration:none;
}

b{
color:#a9b7bf;
text-decoration:none;
font-family:"georgia";
font-size:11px;
text-transform:uppercase;
}

i{
color:#a19989;
}

u{
border-bottom:1px dotted #a9b7bf;
text-decoration:none;
}

h1{
font-family:georgia;
font-size:20px;
text-align:left;
font-weight:bold;
letter-spacing:0px;
color:#a9b7bf;
text-transform:uppercase;
margin-top:10px;
margin-bottom:10px;
}

</style>
</head>

<body>

<div class="sidebar">
<h1>About Me</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper aliquet venenatis. Aliquam erat volutpat. Nam et suscipit velit. Vestibulum placerat, felis quis dictum interdum, neque est pulvinar neque, at eleifend purus mauris at sapien.

<h1>Navigate</h1>
<table width="200">
<tr><td>
<a class="navigation" href="../LINK HERE">One</a>
</td><td>
<a class="navigation" href="../LINK HERE">Two</a>
</td></tr><tr><td>
<a class="navigation" href="../LINK HERE">Three</a>
</td><td>
<a class="navigation" href="../LINK HERE">Four</a>
</td></tr><tr><td>
<a class="navigation" href="../LINK HERE">Five</a>
</td><td>
<a class="navigation" href="../LINK HERE">Six</a>
</td></tr><tr><td>
<a class="navigation" href="../LINK HERE">Seven</a>
</td><td>
<a class="navigation" href="../LINK HERE">Eight</a>
</td></tr></table>

<h1>Other</h1>
Aenean egestas posuere quam ullamcorper mollis. Pellentesque sem elit, euismod vitae adipiscing eu, placerat eu mi. In dapibus suscipit metus. Aenean sollicitudin justo vitae mi dignissim eu vulputate velit sagittis. Duis suscipit felis in dolor pellentesque mollis eu/

<h1>Credits</h1>
Layout by <a href="http://www.atomicaffliction.com" target="new">Atomic Affliction</a>.
</div>

<div class="main">
<h1>Unbalanced</h1>
This layout was coded with the purpose of being a layout base. You can change the colors, fonts, background, etc. In fact, I encourage it. The only thing I ask is that you give me some sort of credit for the code. I've included one in the footer, but you can move it if you'd like to do something different with the footer.<br><br>

<b>Bold.</b> <i>Italic.</i> <u>Underlined.</u> <a href="http://www.atomicaffliction.com" target="new">Link.</a><br><br>

Remember to exercise caution when editting the stylesheet. If you're not experienced with CSS or HTML, something can go haywire. Don't hesitate to contact me if you run into a bit of trouble with this layout. I'd be more than happy to help. :)

</div>

</body>
</html>

Preview this layout

<html>
<head>
<title>Site Title Here;</title>
<style type="text/css">
body{
background-color:#B8AF03;
font-family:"lucida sans unicode";
font-size:11px;
line-height:20px;
text-align:justify;
}

#container{
width:500px;
position:absolute;
left:50%;
margin-left:-275px;
top:100px;
background-color:transparent;
margin-bottom:20px;
}

.navigation{
width:500px;
border:none;
background-color:#67917A;
padding:0px; 
margin:0px;
}

.main{
width:470px;
_width:500px;
background-color:#ffffff;
padding:15px;
border:none;
}

.footer{
width:470px;
_width:500px;
background-color:#170409;
color:#ffffff !important;
text-align:center;
padding:15px;
border:none;
}

table, td{padding:0px; margin:0px;}

a.nav, a.nav:active, a.nav:visited, a.nav:link{
display:block;
width:100%;
height:30px;
_height:40px;
text-align:center;
color:#ffffff;
background-color:#67917A;
text-decoration:none;
font-family:"lucida sans unicode";
border-right:1px solid #567a66;
text-transform:uppercase;
font-size:10px;
font-weight:bold;
padding-top:10px;
margin:0px;
}

a.nav:hover{
display:block;
width:100%;
height:30px;
_height:40px;
text-align:center;
color:#ffffff;
background-color:#759985;
text-decoration:none;
font-family:"lucida sans unicode";
border-right:1px solid #567a66;
text-transform:uppercase;
font-size:10px;
font-weight:bold;
padding-top:10px;
margin:0px;
}

a.nav2, a.nav2:active, a.nav2:visited, a.nav2:link{
display:block;
width:100%;
height:30px;
_height:40px;
text-align:center;
color:#ffffff;
background-color:#67917A;
text-decoration:none;
font-family:"lucida sans unicode";
text-transform:uppercase;
font-size:10px;
font-weight:bold;
padding-top:10px;
margin:0px;
}

a.nav2:hover{
display:block;
width:100%;
height:30px;
_height:40px;
text-align:center;
color:#ffffff;
background-color:#759985;
text-decoration:none;
font-family:"lucida sans unicode";
text-transform:uppercase;
font-size:10px;
font-weight:bold;
padding-top:10px;
margin:0px;
}

a, a:active, a:visited, a:link{
color:#d64e6b;
text-decoration:none;
}

a:hover{
color:#67917A;
text-decoration:none;
}

b{
color:#B8AF03;
text-decoration:none;
text-transform:uppercase;
}

i{
color:#67917A;
}

u{
border-bottom:1px dotted #d64e6b;
text-decoration:none;
}

h1{
font-family:arial;
font-size:22px;
text-align:center;
font-weight:bold;
letter-spacing:-2px;
word-spacing:5px;
color:d64e6b;
text-transform:lowercase;
margin-bottom:5px;
margin-top:0px;
}

h2{
font-family:arial;
font-size:40px;
text-align:center;
font-weight:bold;
letter-spacing:-3px;
word-spacing:5px;
color:#e4dcbc;
text-transform:lowercase;
margin-bottom:20px;
}

</style>
</head>

<body>

<h2>Site Title Here</h2>

<div class="main">
<h1>Currently Single</h1>
This layout was coded with the purpose of being a layout base. You can change the colors, fonts, background, etc. In fact, I encourage it. The only thing I ask is that you give me some sort of credit for the code. I've included one in the footer, but you can move it if you'd like to do something different with the footer.<br><br>

<b>Bold.</b> <i>Italic.</i> <u>Underlined.</u> <a href="http://www.atomicaffliction.com" target="new">Link.</a><br><br>

<div class="footer">
© your site 2009 • <a href="http://www.atomicaffliction.com" target="new">stylesheet credit</a>
</div>

</div>

</body>
</html>

Preview this layout

<html>
<head>
<title>Site Title Here;</title>
<style type="text/css">
body{
background-color:#4D3339;
font-family:georgia;
font-size:11px;
line-height:20px;
text-align:justify;
}

#container{
width:750px;
position:absolute;
left:50%;
margin-left:-375px;
top:50px;
background-color:transparent;
}

.banner{
width:100%;
margin-bottom:15px;
border:1px solid #000000;
background-color:#ffffff;
}

.sidebar{
float:left;
width:220px;
_width:250px;
background-color:#ffffff;
padding:15px;
border:1px solid #000000;
margin-bottom:20px;
}

.main{
float:right;
width:450px;
_width:480px;
background-color:#ffffff;
padding:15px;
border:1px solid #000000;
margin-bottom:20px;
}

a.navigation, a.navigation:active, a.navigation:visited, a.navigation:link{
display:block;
width:100%;
color:#036564;
text-decoration:none;
font-family:georgia;
font-size:12px;
text-transform:lowercase;
font-style:italic;
font-weight:bold;
}

a.navigation:hover{
display:block;
width:100%;
color:#A38A5F;
text-decoration:none;
font-family:georgia;
font-size:12px;
text-transform:lowercase;
font-style:italic;
font-weight:bold;
}

a, a:active, a:visited, a:link{
color:#793A57;
text-decoration:none;
}

a:hover{
color:#036564;
text-decoration:none;
}

b{
color:#036564;
text-decoration:none;
font-family:"georgia";
font-size:11px;
text-transform:uppercase;
}

i{
color:#793A57;
}

u{
border-bottom:1px dotted #036564;
text-decoration:none;
}

blockquote{
background-color:#A38A5F;
border:1px solid #000000;
padding:5px;
}

h1{
font-family:georgia;
font-size:20px;
text-align:right;
font-style:italic;
font-weight:bold;
letter-spacing:0px;
color:#8C873E;
text-transform:none;
margin-top:5px;
margin-bottom:5px;
}

</style>
</head>

<body>

<h1>Credits</h1>
Layout by <a href="http://www.atomicaffliction.com" target="new">Atomic Affliction</a>.
</div>

<div class="main">
<h1>Keepin' it Simple</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper aliquet venenatis. Aliquam erat volutpat. Nam et suscipit velit. Vestibulum placerat, felis quis dictum interdum, neque est pulvinar neque, at eleifend purus mauris at sapien. Integer ut neque at turpis feugiat blandit. Mauris sit amet tincidunt eros. <br>

<center>
<b>Bold.</b> <i>Italic.</i> <u>Underlined.</u>
</center>

<blockquote>
This is a blockquote. It's good for adding quotes, excerpts, lists, etc. I personally like to use them for the basic information located at the top of every page. Get creative!
</blockquote>

Aenean egestas posuere quam ullamcorper mollis. Pellentesque sem elit, euismod vitae adipiscing eu, placerat eu mi. In dapibus suscipit metus. Aenean sollicitudin justo vitae mi dignissim eu vulputate velit sagittis. Duis suscipit felis in dolor pellentesque mollis eu in. quam. Aenean a orci leo, et congue lacus. Sed a massa risus. Donec nec tortor mauris.

</div>

</body>
</html>

Preview this layout

<html>
<head>
<title>Site Title Here;</title>
<style type="text/css">
body{
background-color:#96d0cf;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:20px;
text-align:justify;
}

#container{
width:770px;
_width:800px;
position:absolute;
left:50%;
margin-left:-400px;
top:100px;
background-color:#ffffff;
padding:15px;
}

.title{
width:100%;
margin:0px;
}

.sidebar{
float:left;
width:250px;
}

.main{
float:right;
width:500px;
}

a.navigation, a.navigation:active, a.navigation:visited, a.navigation:link{
display:block;
width:100%;
color:#dfb06d;
text-decoration:none;
font-family:"arial black";
font-size:12px;
text-transform:uppercase;
}

a.navigation:hover{
display:block;
width:100%;
color:#dbdddd;
text-decoration:none;
font-family:"arial black";
font-size:12px;
text-transform:uppercase;
}

a, a:active, a:visited, a:link{
color:#dfb06d;
text-decoration:none;
}

a:hover{
color:#dbdddd;
text-decoration:none;
}

b{
color:#dfb06d;
text-decoration:none;
font-family:"arial black";
font-size:11px;
text-transform:uppercase;
}

i{
color:#96d0cf;
}

u{
border-bottom:1px dotted #dfb06d;
text-decoration:none;
}

blockquote{
background-color:#dbdddd;
border-left:10px solid #96d0cf;
padding:5px;
}

h1{
font-family:"arial black";
font-size:16px;
text-align:right;
letter-spacing:0px;
color:#96d0cf;
text-transform:uppercase;
margin-top:5px;
margin-bottom:5px;
}

h2{
font-family:"arial black";
font-size:40px;
_line-height:40px;
text-align:right;
letter-spacing:0px;
color:#dfb06d;
text-transform:uppercase;
margin-top:10px;
_margin-top:3px;
}

h3{
font-family:"arial black";
font-size:18px;
text-align:right;
letter-spacing:4px;
color:#dbdddd;
text-transform:uppercase;
margin-top:-20px;
}

</style>
</head>

<body>

<div class="title">
<h2>site name here;</h2>
<h3>Insert some sort of tagline here</h3>
</div>

<h1>Navigate</h1>
<table width="250">
<tr><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td></tr><tr><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td></tr><tr><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td></tr><tr><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td><td>
<a class="navigation" href="../LINK HERE">Link</a>
</td></tr></table>

<h1>Credits</h1>
Layout by <a href="http://www.atomicaffliction.com" target="new">Atomic Affliction</a>.
</div>

<center>
<b>Bold.</b> <i>Italic.</i> <u>Underlined.</u>
</center>

Aenean egestas posuere quam ullamcorper mollis. Pellentesque sem elit, euismod vitae adipiscing eu, placerat eu mi. In dapibus suscipit metus. Aenean sollicitudin justo vitae mi dignissim eu vulputate velit sagittis. Duis suscipit felis in dolor pellentesque mollis eu in quam. Aenean a orci leo, et congue lacus. Sed a massa risus. Donec nec tortor mauris.

</div>

</body>
</html>

Preview this layout

Website Layouts

Sitely Matters

Affiliates