goldfish
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
padding:0;
margin:0;
}
body {
font-family: arial, sans-serif;
font-size: 13px;
background: #e0e4cc;
margin: 0;
padding: 0;
}
a { color: #008EAF; text-decoration: none;}
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { margin: 5px 0 15px 0; font-weight: 100; padding: 0; border-bottom: 2px dotted #bcbcbc; }
ul { margin: 0 0 20px 30px; list-style-type: square; }
ol { margin: 0 0 20px 30px; list-style-type: decimal; }
blockquote { background: #eee; border-left: 5px solid #bcbcbc; padding: 10px; margin: 0 0 20px 0; }
blockquote p { margin: 0; padding: 0; }
p { padding: 0 0 20px 0; }
table { margin: 0 0 20px 0; text-align: left; width: 100%; }
td, th { padding: 5px; border: 1px solid #e7e7e7; }
th { color: #323232; }
#wrap {
width: 780px;
margin: 20px auto;
}
#header {
font-family: 'Yanone Kaffeesatz', arial, sans-serif;
padding: 0 0 20px 0;
}
#header h1 {
margin: 0;
font-weight: bold;
font-size: 51px;
border: none;
line-height: 1;
background: none;
}
#header h1 a { text-decoration: none; color: #FFA24F; }
#header h1 a:hover { text-decoration: none; }
#header h2 { background: none; border: none; margin: 0; color: #575757; font-weight: normal; font-size: 21px; }
#menu {
background: url(goldfish-images/menu.jpg) repeat-x;
height: 50px;
line-height: 50px;
font-weight: bold;
}
#menu ul {
list-style-type: none;
margin: 0;
padding-left: 20px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
display: block;
padding: 0 10px 0 10px;
text-decoration: none;
color: #757575;
}
#menu ul li a:hover {
color: #000;
}
#content {
background: #fff;
margin-top: 10px;
border-right: 10px solid #a7dbd8;
border-bottom: 10px solid #A7DBD8;
border-left: 10px solid #A7DBD8;
}
.left {
float: left;
width: 480px;
border-top: 10px solid #A7DBD8;
border-right: 10px solid #A7DBD8;
padding: 10px;
}
.right {
float: right;
width: 250px;
color: #646464;
background: #efefef;
border-bottom: 10px solid #A7DBD8;
}
.right h3 { color: #575757; font-weight: bold; background: #fff; border-top: 10px solid #A7DBD8; border-bottom: 10px solid #A7DBD8; height: 30px; line-height: 30px; margin: 0; padding: 0 0 0 10px; }
.right ul { margin: 0; padding: 10px; list-style-type: none; }
.right ul li { background: url(goldfish-images/list.png) no-repeat left top; padding: 0 0 3px 20px; margin: 0; }
.right ul li a { }
#footer {
background: url(goldfish-images/footer.jpg) no-repeat;
margin-top: 10px;
padding: 0 20px;
height: 50px;
line-height: 50px;
text-align: center;
color: #575757;
}
#footer p { padding: 0; margin: 0; }
#footer a { color: #575757; }
#footer a:hover { border-bottom: 1px dotted #545454; text-decoration: none; }
.footerleft { float: left; }
.footerright { float: right; }
</style>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
<title>Gold Fish</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">Gold Fish</a></h1>
<h2>Your Site Slogan Goes Here</h2>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h1>Template License</h1>
<p>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>.
</p>
<h2>You are free:</h2>
<ul>
<li>to Share to copy, distribute and transmit the work</li>
<li>to Remix to adapt the work</li>
</ul>
<h3>Under the following conditions:</h3>
<ul>
<li>Attribution You must attribute the work in the manner specified by the author or licensor (keep the "Design by <a href="http://www.yoctotemplates.com">Yocto Templates</a>" link in the footer intact).</li>
</ul>
<h3 style="color: red; font-weight: bold;">Would You Like to Remove the Footer Link ?</h3>
<p>You can remove the footer link for a small fee of <strong>only $4.99</strong>.</p>
<p>Please visit the <a href="http://yoctotemplates.com/free-web-templates/gold-fish/">template</a> page to buy the <strong>linkback free</strong> License.</p>
<h4>Some Styling - H4</h4>
<table>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
</tr>
<tr>
<td>Aliquam erat volutpat. (row 1, cell 1)</td>
<td>Suspendisse potenti. (row 1, cell 2)</td>
</tr>
<tr>
<td>Phasellus rutrum consequat (row 2, cell 1)</td>
<td>Phasellus convallis (row 2, cell 2)</td>
</tr>
</table>
<h4>Unordered List - H4</h4>
<ul>
<li><a title="" href="#">Unordered List Link 1</a></li>
<li><a title="" href="#">Unordered List Link 2</a></li>
<li><a title="" href="#">Unordered List Link 3</a></li>
</ul>
<h5>Ordered List - H5</h5>
<ol>
<li><a title="" href="#">Ordered List Link 1</a></li>
<li><a title="" href="#">Ordered List Link 2</a></li>
<li><a title="" href="#">Ordered List Link 3</a></li>
</ol>
<h5>Blockquote - H5</h5>
<blockquote>
<p>Integer dapibus vulputate ornare. Aenean interdum fermentum felis. Aliquam congue, leo vel elementum tempor, quam lorem laoreet nunc, vel consequat purus tortor non mauris. Donec luctus sem at risus sagittis et venenatis nisi hendrerit. Maecenas iaculis vulputate sem id gravida. Maecenas et aliquet nisl. Integer ornare volutpat elit a lobortis. Sed vitae ligula est, in auctor mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>
</div>
<div class="right">
<h3>Navigation</h3>
<ul>
<li><a href="#">Your Category</a></li>
<li><a href="#">About Us Information</a></li>
<li><a href="#">Resources and Friends</a></li>
<li><a href="#">Last Category Link</a></li>
</ul>
<h3>Advertisments</h3>
<ul>
<li><a href="http://rapbank.com/go/1466/11795">One-Click SEO</a><br />Instantly make every single backlink 1000% more powerful</li>
<li><a href="http://rapbank.com/go/2672/11795">Squeeze Page Profit Plans</a><br />Learning tools to make money online</li>
<li><a href="http://rapbank.com/go/1650/11795">Project Minisite</a><br />Design your own minisite in photoshop</li>
<li><a href="http://rapbank.com/go/1371/11795">How To Get Visitors</a><br />15 free traffic generating techniques</li>
<li><a href="http://rapbank.com/go/1476/11795">Newbie Start Up Guide</a><br />Everything is laid out in plain English</li>
</ul>
<h3>Latest Articles</h3>
<ul>
<li><a href="#">List Your Latest Articles</a></li>
<li><a href="#">Praesent augue nibh</a></li>
<li><a href="#">Vestibulum ante ipsum primis</a></li>
<li><a href="#">Pellentesque vulputate mi quis</a></li>
<li><a href="#">Aenean interdum fermentum</a></li>
<li><a href="#">Maecenas et aliquet nisl</a></li>
<li><a href="#">Integer dapibus vulputate</a></li>
<li><a href="#">Sagittis et venenatis nisi</a></li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<div class="footerleft">Copyright © 2001 by <a href="#">You</a> | <a href="#">Privacy Policy</a> | <a href="#">Copyright</a></div>
<div class="footerright"><a href="http://yoctotemplates.com/free-web-templates/gold-fish/">Gold Fish</a> | Design by <a href="http://yoctotemplates.com">Yocto Templates</a></div>
<div style="clear: both;"> </div>
</div>
</div>
</body>
</html>
Related examples in the same category