Website Layouts
Premade website layouts that can be used just about anywhere. The instructions should be in the layout, and just leave the credit on, please.Written in Ink
Made in: paint.NET, NotepadColors: brown, tan, pink, mint, blue
Time: three hours
Browsers: Internet Explorer, Firefox, Opera, Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>YOUR SITE TITLE HERE</title>
<link rel="icon" type="image/png" href="http://heartdrops.org/pixels/animals/oct7.gif">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
/* This CSS was made by Haley Young at Clompish */
BODY {
margin: 0;
padding: 0;
background-image: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/BGBGBG.png');
background-position: top left;
background-color: #606060;
color: #404040;
font: normal 12px arial;
line-height: 150%;
overflow-x: hidden;
}
#container {
margin: 0 auto;
width: 775px;
height: 832px;
background-color: #808080;
background-image: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/WoodPremade2.png');
background-repeat: no-repeat;
padding: 0px;
border: none;
}
#header {
background: url('none');
width: 775px;
height: auto;
margin-bottom: 8px;
padding-top: 127px;
}
#content {
width: 460px;
padding-left: 72px;
padding-right: 2px;
padding-top: 0px;
padding-bottom: 50px;
float: left;
height: 690;
text-align: justify;
overflow: auto;
}
#side {
width: 155px;
height: 690;
float: right;
padding-left: 2px;
padding-right: 76px;
padding-top: 0px;
padding-bottom: 50px;
text-align: justify;
overflow: auto;
}
#footer {
width: 100%;
text-align: center;
color: #404040;
padding: 10px;
border-top: 5px solid #FFE1AD ;
background: #efefef url('http://skylineillusions.net/goodies/75.jpg');
background-repeat: repeat-x;
margin: 5px 0px 0px 0px;
clear: both;
font: normal 13px "Gill Sans MT", "Arial";
}
#footer2 {
background: #fff;
clear: both;
height: 0px;
padding: 0px;
margin: 0px;
}
A:link, A:active, A:visited {
text-decoration: none;
color: #5AC464;
font: normal 13px "century gothic";
}
A:hover {
text-decoration: none;
color: #D81D3C;
}
A.footer:link, A.footer:active, A.footer:visited {
text-decoration: none;
color: #5AC464;
font-family: tahoma;
}
A.footer:hover {
text-decoration: none;
color: #D81D3C;
}
A.main:link, A.main:active, A.main:visited
{font: normal 23px georgia;
color: #30A9C5;
text-align: center;
letter-spacing: 2px;
text-transform: lowercase;
line-height: 130%;
padding: 0px 10px 0px 10px;}
A.main:hover
{color: #404040;
text-transform: lowercase;
font-weight: normal;
border-bottom: 3px solid #D81D3C;}
#ul {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
h1 {
font-family: georgia;
color: #D81D3C;
font-size: 30px;
text-align: center;
letter-spacing: 2px;
margin-top:5px;
margin-bottom: 1px;
font-weight: normal;
}
h2 {
font-family: arial;
color: #574030;
font-size:18px;
text-align: left;
letter-spacing: 2px;
text-transform: lowercase;
margin-bottom:1px;
font-weight: normal;
}
h3 {
font-family: arial;
color: #574030;
font-size:18px;
text-align: left;
letter-spacing: 2px;
text-transform: lowercase;
margin-bottom:1px;
margin-top: 0px;
font-weight: normal;
}
blockquote {color: #505050;
border-top: 5px solid #D81D3C;
padding: 10px;
background: #efefef url('http://skylineillusions.net/goodies/75.jpg');
-moz-box-shadow: 1px 1px 1px 1px #c0c0c0;
-webkit-box-shadow: 1px 1px 1px 1px #c0c0c0;
box-shadow: 1px 1px 1px 1px #c0c0c0;
}
textarea,input {
overflow: auto;
border: 1px solid #A5ACB2;
background-color: #fff;
background-image: url('http://www.photoshopstar.com/tutorials/63/gem-logo-icon-02.gif');
padding: 5px;
font: normal 13px georgia;
color: #000000;
line-height: 200%;
}
textarea:hover, input:hover {
color: #404040;
border: 1px solid #ccc;
}
pre {
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid #A5ACB2;
background-color: #fff;
background-image: url('http://www.photoshopstar.com/tutorials/63/gem-logo-icon-02.gif');
padding: 5px;
font: normal 9px "small fonts";
color: #000000;
line-height: 200%;
}
code {color: #404040;
overflow: auto;
font: normal 9px "small fonts";
background-color: #fff;
line-height: 200%;
padding: 3px;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<center>
<a href="URL" class="main">Link</a>
<a href="URL" class="main">Link</a>
<a href="URL" class="main">Link</a>
<a href="URL" class="main">Link</a>
<a href="URL" class="main">Link</a>
</center>
</div>
<div id="side">
<h3>Sidebar Header</h3>
SIDEBAR CONTENT
<h2>Sidebar Header</h2>
More Sidebar Content
<h2>Sidebar Header</h2>
More sidebar content.
<h2>Sidebar Header</h2>
And even more sidebar content. Feel free to add and take away the sidebar headers and content areas. ^^;
</div>
<div id="content">
<h1>Header One</h1>
Your content here!
<b>bold</b> <u>underline</u> <i>italics</i> <a href="URL">link</a>
<br><br>
<PRE>pre</PRE><br>
<TEXTAREA>textarea</TEXTAREA>
<br><br>
<blockquote>Blockquote</blockquote>
<h2>Header Two</h2>
MORE OF YOUR CONTENT HERE! Thank you for using a Clompish.com layout! Feel free to edit it if you wish, just keep the credit on, even if you change things around.
</div>
<div id="footer2">
</div>
</div>
<div id="footer">
© YOURNAME. Layout by Haley at <a href="http://www.clompish.com">Clompish.com</a>
</div>
</body>
</html>
Forever Summer (Etched in Wood)
Made in: paint.NET, NotepadColors: purple, green, blue, brown
Time: three hours
Browsers: Internet Explorer, Firefox, Opera, Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>YOUR SITE TITLE HERE</title>
<link rel="icon" type="image/png" href="http://i48.tinypic.com/in4fw2.png">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="description" content="SHORT DESCRIPTION OF YOUR SITE HERE">
<meta name="keywords" content="SITE KEYWORDS FOR SEARCH ENGINES HERE">
<style>
/* This CSS was made by Haley Young @ Clompish.com */
/* Container */
BODY {
margin: 0;
padding: 0;
background: #efefef url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/BGBGBG.png') fixed;
color: #404040;
font: normal 12px arial;
line-height: 200%;
}
#container {
margin: 10px auto;
padding: 10px 0px 0px 0px;
width: 800px;
height: auto;
background: #fff;
}
#header {
width: 780px;
height: auto;
padding: 0px 0px 5px 0px;
background: url('');
}
#content {
float: right;
width: 540px;
padding: 0px 20px 20px 20px;
height: auto;
text-align: justify;
overflow: auto;
}
#side {
width: 190px;
height: auto;
float: left;
padding: 0px 0px 0px 4px;
margin: -19px 0px 0px 6px;
text-align: justify;
overflow: auto;
}
.sidebox {
background: #FFF url('');
margin-bottom: 20px;
padding: 0px 10px 10px 10px;
width: 162px;
}
#footer {
width: 780px;
text-align: center;
color: #404040;
height: 83px;
padding: 0px 0px 0px 0px;
background: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/footerBG-4.png');
background-repeat: no-repeat;
margin: 0;
clear: both;
font: normal 13px "Gill Sans MT", "Arial";
}
#footer2 {
background: #fff;
clear: both;
height: 0px;
padding: 0px;
margin: 0px;
}
/* NOT BEING USED BUT MIGHT BE HELPFUL */
#header2 {
padding: 0px 0px 5px 0px;
margin: 0px;
height: auto;
background: url('http://www.cheddarmongers.org/prod/files/images/BlueToWhiteGradient.jpg');
border-bottom: 10px solid #c66;
}
/* END OF NOT BEING USED */
/* Links */
A.main:link, A.main:active, A.main:visited
{font: normal 26px "Century Gothic";
color: #404040;
text-align: center;
text-transform: lowercase;
margin-bottom: 0px;
padding: 5px 10px 0px 10px;
margin: 0px 2px 0px 2px;
background: url('none');
border: none;
}
A.main:hover
{color: #303030;
text-shadow: 1px 1px 3px #924C7B;
border-bottom: 3px solid #c0c0c0;}
A:link, A:active, A:visited {
text-decoration: none;
color: #707070;
font-family: Georgia;
border-bottom: 1px solid #8CA454;
line-height: 200%;
}
A:hover {
color: #407FBB;
border-bottom: 1px solid #fff;
}
A.footer:link, A.footer:active, A.footer:visited {
color: #505050;
font: normal 13px "gill sans MT";
border-bottom: 1px solid #886288;
border-left: none;
}
A.footer:hover {
color: #333;
border-bottom: 1px solid #404040;
border-left: none;
}
A.affie:link, A.affie:active, A.affie:visited {
border-right: 2px solid #924C7B;
border-left: none;
display: block;
color: #707070;
font: 11.49px Georgia;
margin: 3px 2px;
padding: 4px 5px 3px 4px;
background: #FFF;
text-align: center;
border-bottom: 1px solid #c0c0c0;
}
A.affie:hover {
text-decoration: none;
color: #407FBB;
background: #f1f1f1;
border-bottom: 1px solid #AD3;
}
/* Headers */
h1, h3 {
text-shadow: 1px 1px 1px #000000;
font: normal 35px georgia;
color: #AADD33;
text-align: center;
margin-bottom: 0px;
padding: 5px;
border-bottom: 1px dotted #000000;
margin-top: 2px;
}
h2 {
font: normal 25px "Gill Sans MT", "Century Gothic";
color: #a0a0a0;
text-align: center;
text-transform: lowercase;
margin-bottom:1px;
}
/* Random */
#qu {
list-style-image: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/BulletSeven-1.png');
line-height: 200%;
}
ul {
list-style-image: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/BulletSeven-1.png');
line-height: 200%;
}
img.link {
border: 2px solid #DDDDDD;
padding: 3px;}
/* Input, Blockquote, Pre, etc. */
blockquote {color: #505050;
border-left: 5px solid #924C7B;
padding: 10px;
background: #efefef url('http://skylineillusions.net/goodies/75.jpg');
-moz-box-shadow: 1px 1px 1px 1px #c0c0c0;
-webkit-box-shadow: 1px 1px 1px 1px #c0c0c0;
box-shadow: 1px 1px 1px 1px #c0c0c0;
}
textarea,input {
overflow: auto;
border: 1px solid #A5ACB2;
background-color: #fff;
background-image: url('http://www.photoshopstar.com/tutorials/63/gem-logo-icon-02.gif');
padding: 5px;
font: normal 13px arial;
color: #000000;
line-height: 200%;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
}
textarea:hover, input:hover {
color: #404040;
border: 1px solid #ccc;
}
pre {
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid #A5ACB2;
background-color: #fff;
background-image: url('http://www.photoshopstar.com/tutorials/63/gem-logo-icon-02.gif');
padding: 5px;
font: normal 9px "small fonts";
color: #000000;
line-height: 200%;
}
code {color: #404040;
overflow: auto;
font: normal 9px "small fonts";
background-color: #fff;
line-height: 200%;
padding: 3px;}
strike {background-color: #FFE1AD;
text-decoration: none;
padding: 7px;
line-height: 200%;}
u {text-decoration: none;
font-style: italic;
font-family: georgia;
color: #444;
}
</style>
</head>
<body>
<div id="container">
<center>
<div id="header">
<img src="http://i256.photobucket.com/albums/hh189/Moofish_rockz/HeaderImagePremade.png" alt="Header Image" title="Header Image" border="0">
<br>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
</div>
</center>
<div id="side">
<div class="sidebox">
<h2>SIDEBAR HEADER</h2>
SIDEBAR CONTENT HERE.
</div>
<div class="sidebox">
<h2>SIDEBAR HEADER</h2>
MORE SIDEBAR CONTENT HERE.
</div>
<div class="sidebox">
<h2>SIDEBAR HEADER</h2>
SIDEBAR CONTENT...
</div>
<div class="sidebox">
<h2>SIDEBAR HEADER</h2>
MORE SIDEBAR CONTENT. Feel free to add, remove, or replace the sidebar headers.
</div>
</div>
<div id="content">
<h1>HEADER ONE</h1>
YOUR CONTENT HERE! Thank you for using a Clompish.com layout! This layout was modeled after Clompish.com's version fourteen layout - forever summer. Feel free to edit it if you wish, just keep the credit on, even if you change things around.
<h2>Header Two</h2>
More content here.
</div>
<center>
<div id="footer"><br>
<strike>© YOURNAME 2010 unless stated otherwise. <a href="http://www.clompish.com/" class="footer">Layout By Clompish</a> ·
<a href="http://validator.w3.org/check?uri=referer" class="footer">HTML 4.01</a></strike>
</div>
</center>
</div>
</body>
</html>
Dark Magic Remake
Made in: paint.NET, NotepadColors: green, gray, blue
Time: two hours
Browsers: Internet Explorer, Firefox, Opera, Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Clompish; dark magic, missing you</title>
<link rel="icon" type="image/png" href="http://heartdrops.org/pixels/animals/oct7.gif">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
/* This CSS was made by Clompeh at Clompish and is for personal use ONLY. Do not remove my credit, and do not use little bits of my CSS in your own layouts. You will be caught, don't think you can get away with theft. */
BODY {
margin: 0;
padding: 0; background-image: url('none');
background-color: #0B0B0B;
color: #303030;
font-size: 11px;
font-family: verdana;
line-height: 135%;
}
#container {
margin: 0 auto;
width: 775px;
height: auto;
background-color: #808080;
padding: 0px;
border: 3px solid #333333;
}
#header {
background: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/darkmagicpremade.png');
width: 775px;
height: auto;
margin-bottom: 8px;
padding-top: 127px;
border-bottom: 3px solid #333333;
}
#content {
width: 545px;
padding-right: 15px;
padding-left: 2px;
padding-top: 0px;
padding-bottom: 50px;
float: right;
height: auto;
text-align: justify;
overflow: auto;
}
#side {
width: 180px;
height: auto;
float: left;
padding-right: 2px;
padding-left: 15px;
padding-top: 0px;
padding-bottom: 50px;
text-align: justify;
overflow: auto;
}
#footer {
background: #6A5343 url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/CLOMPISSSHfooterbg.png') repeat-x;
height: auto;
text-align: center;
color: #404040;
padding: 10px;
margin: 0;
clear: both;
border-top: 3px solid #333333;
}
A:link, A:active, A:visited {
text-decoration: none;
color: #266B43;
padding-left: 2px;
font-family: tahoma;
}
A:hover {
text-decoration: none;
color: #404040;
}
A.footer:link, A.footer:active, A.footer:visited {
text-decoration: none;
color: #266B43;
font-family: tahoma;
}
A.footer:hover {
text-decoration: none;
color: #404040;
}
A.affie:link, A.affie:active, A.affie:visited {
text-decoration: none;
color: #2A824D;
font-family: tahoma;
border-left: 1px solid #404040;
}
A.affie:hover {
text-decoration: none;
color: #357DAD;
}
A.img:link, A.img:active, A.img:visited {
text-decoration: none;
color: #266B43;
font-family: tahoma;
border: none;
}
A.img:hover {
text-decoration: none;
color: #404040;
}
A.main:link, A.main:active, A.main:visited
{font-family: arial narrow;
color: #404040;
font-size: 20px;
text-align: center;
letter-spacing: 2px;
text-transform: lowercase;
margin-top:0px;
margin-bottom:1px;
font-weight: normal;
line-height: 130%;
padding-right: 10px;
padding-left: 10px;}
A.main:hover
{color: #266B43;
text-transform: lowercase;
font-weight: normal;}
#qu {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#rb {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#ta {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#hl {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#ul {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
h1 {
font-family: arial;
font-weight: normal;
border-top: 2px solid #333333;
border-left: 2px solid #333333;
border-right: 2px solid #333333;
border-bottom: 2px solid #333333;
background: #404040 url('none');
color: #32729F;
font-size: 23px;
text-align: center;
letter-spacing: 2px;
margin-top:5px;
margin-bottom:1px;
padding: 7px;
}
h2 {
font-family: georgia;
font-style: italic;
color: #303030;
font-size:14px;
text-align: left;
letter-spacing: 2px;
text-transform: lowercase;
margin-bottom:1px;
font-weight: normal;
}
h3 {
font-family: georgia;
font-style: italic;
color: #32729F;
font-size:14px;
text-align: left;
letter-spacing: 2px;
text-transform: lowercase;
margin-bottom:1px;
margin-top: 0px;
font-weight: normal;
}
blockquote {color: #505050;
border-right: 1px dotted #357DAD;
border-bottom: 1px dotted #266B43;
border-top: 1px dotted #266B43;
border-left: 4px solid #404040;
font-family: verdana;
font-size: 11px;
padding: 5px;
background: #a0a0a0 url('none');}
textarea {width: 150px;
height: 50px;
overflow: auto;
border: 1px solid #c0c0c0;
background-color: #ffffff;
padding: 5px;
color: #000000;
font-family: verdana;
font-size: 9px;}
code {color: #000000;
width: 150px;
height: 50px;
overflow: auto;
border: 1px solid #c0c0c0;
background-color: #ffffff;
background: #ffffff;
font-family: verdana;
font-size: 9px;}
pre {width: 150px;
height: 50px;
overflow: auto;
border: 1px solid #c0c0c0;
background-color: #ffffff;
padding: 5px;
color: #000000;
background: #ffffff;
font-family: verdana;
font-size: 9px;}
.sidebarheader {color: #505050;
font-size: 11px;
font-family: verdana;
line-height: 135%;
background: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/CLOMPISSSHfooterbg.png') repeat-x;
border: 2px solid #333333;
letter-spacing:1px;
margin: 0px 0px 10px 0px;
padding: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<br>
<div id="container">
<div id="header">
<center>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
<a href="URL" class="main">LINK</a>
</center>
</div>
<div id="side">
<div class="sidebarheader">
<h3>Side Header</h3>
:3 you can put something here in this nifty sidebar box.
</div>
<div class="sidebarheader">
<h3>Side Header</h3>
:3 you can put something here in this nifty sidebar box.
</div>
<div class="sidebarheader">
<h3>Side Header</h3>
:3 you can put something here in this nifty sidebar box.
</div>
<div class="sidebarheader">
<h3>Side Header</h3>
:3 you can put something here in this nifty sidebar box.
</div>
</div>
<div id="content">
<h1>Headerr Uno</h1>
Blah blah blah. This is main text. You can see links on the sidebar. Bold and italics and underlined look the same as normal text, just with the weight applied.
<br><br>
This layout style is actually one of Clompish's old layouts... I loved it so much it is now a premade. Lurf.
<h2>Header two</h2>
This is header two text. So amazing. Sarcasm is great, isn't it?<br><br>
<blockquote>BLOCKQUOTE. I love blockquotes. Who doesn't? Quoting things.</blockquote>
</div>
<div id="footer">
<center>
<font size="1">
<font color="white">
© YOUR NAME and YOUR SITE NAME unless stated otherwise. Layout style and CSS by <a href="http://www.clompish.com">Clompish</a>. <br>
<a href="http://jigsaw.w3.org/css-validator/check/referer" class="footer">Valid CSS 2.1</a> | <a href="http://validator.w3.org/check?uri=referer" class="footer">Valid HTML 4.01</a> | <a href="http://www.w3junkies.com/toocool/">Too Cool for IE</a>
<br><br>
<a href="http://english-175235688933.spampoison.com" class="img"><img src="http://pics5.inxhost.com/images/sticker.gif" border="0" width="80" height="15" alt=""></a>
</font>
</font>
</center>
</div>
</div>
<br><br><br>
</body>
</html>
Simple Nature - Welcome
Made in: paint.NET, NotepadColors: green, black
Time: one hour
Browsers: Internet Explorer, Firefox, Opera
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>YOUR SITE NAME HERE;; V. Simple Nature</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
#qu {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#rb {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#ta {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#hl {
list-style-image: url(http://i280.photobucket.com/albums/kk196/rainysworld/bull6.gif);
}
#content {
position: absolute;
left: 247px;
top: 153px;
height: auto;
width: 482px;
padding: 5px;
text-align: justify;
background-color: transparent;
}
#side {
position: absolute;
left: 23px;
top: 153px;
width: 181px;
height: auto;
padding-top: 2px;
padding-left: 7px;
padding-right: 0px;
padding-bottom: 10px;
text-align: justify;
background-color: transparent;
}
BODY {background-image: url('http://i256.photobucket.com/albums/hh189/Moofish_rockz/simplenaturebackgroundimage.png');
background-color: #5AC464;
background-repeat: repeat-y;
margin: 0;
padding: 0;
color: #000000;
font-size: 11px;
font-family: verdana;}
b {
color: #59C464; text-transform: uppercase;
}
i {
color: #000000; border-bottom: 1px dashed #59C464;
}
A:link
{ text-decoration: none; color:#59C464; }
A:visited
{ text-decoration: none; color:#59C464; }
A:active
{ text-decoration: none; color:#59C464; }
A:hover
{ text-decoration: none; color: #563823; }
A.footer:link, A.footer:active, A.footer:visited
{text-decoration: none; color:#42B0FF; }
A.footer:hover
{ text-decoration: none; color: #000000; }
A.main:link, A.main:active, A.main:visited
{font-family: Tahoma;
color: #000000;
font-size:16px;
text-align: right;
letter-spacing: 2px;
border-bottom: 1px solid #5AC464;
text-transform: lowercase;
margin-top:0px;
margin-bottom:1px;
font-weight: bold;}
A.main:hover
{color: #59C464;
text-transform: lowercase;
font-weight: normal;
border-bottom: 1px solid #000000;}
h1:first-letter {
font-family: Tahoma; color: #59C464; font-size:16px; text-align: right; letter-spacing: 2px; text-transform: lowercase; margin-top:0px; margin-bottom:1px;
}
h1 {
font-family: Tahoma; color: #000000; font-size:16px; text-align: right; letter-spacing: 2px; border-bottom: 1px solid #59C464; text-transform: lowercase; margin-top:0px; margin-bottom:1px;
}
h2 {
font-family: Tahoma; color: #59C464; font-size:12px; text-align: left; letter-spacing: 2px; border-bottom: 1px solid #000000; text-transform: lowercase; margin-bottom:1px;
}
blockquote {color: #000000;
border-left: 5px solid #59C464;
border-right: 0.5px dotted #000000;
border-top: 0.5px dotted #000000;
border-bottom: 0.5px dotted #000000;
background-color: #efefef;
font-family: verdana;
font-size: 11px;
padding: 1px;}
textarea {color: #000000;
border: 2px dashed #59C464;
background-color: #efefef;
font-family: verdana;
font-size: 9px;}
</style>
</head>
<body>
<br>
<img src="http://i256.photobucket.com/albums/hh189/Moofish_rockz/simplenatureheaderimage.png" alt="Version;; Simple Nature - Layout made and coded by http://clompish.com" style="position: absolute; top: 0px; left: 0px;">
<div id="side">
<center>
<a href="URL" class="main">LINK</a><br>
<a href="URL" class="main">LINK</a><br>
<a href="URL" class="main">LINK</a><br>
<a href="URL" class="main">LINK</a><br>
<a href="URL" class="main">LINK</a><br>
<a href="URL" class="main">LINK</a><br>
</center>
<h2>YOURNAME</h2>
Type a little bit abut yourself here. Or, you can do something totlaly different with this header. No one cars. It's your site. It's up to you. =)
<h2>Friends</h2>
Maybe put some affiliates here, on the sidebar? Or something. You can honestly do whatever you want with this header, just remember that this header is on the sidebar. The main content headers are below. =)
<h2>Quick Updates</h2>
<ul id="qu">
<li>You can use this bulleted list to type up some small, one to two sentance long updates on the sidebar. Or, if you want, you can use the bullets for something else... or, if you don't like the bullets, you can delete the bullets and just type whatever you want to here.</li>
</ul>
<h2>Comment</h2>
You can always put a shoutmix chatbox, or a cbox here. Whatever floats your boat. And it doesn't HAVE to be a chat thing, either. Just put something cool here. Yeah. It's your site - do as you wish.
<h2>Credits</h2>
Layout image and coding © 2009 <a href="http://www.clompish.com">Clompish</a>.
</div>
<div id="content">
<h1>Header One Test</h1>
<i>italics test</i> <b>bold test</b> <u>underline test</u> <a href="URL">link test</a> normal test
<h2>Header Two Test</h2>
<blockquote>This is a blockquote. It's pretty cool. Yup. It's used for quoting stuff, but you CAN use it for whatever you please.</blockquote>
</div>
</font>
</center>
</div>
<br>
</body>
</html>