greenstripes
<!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: Verdana, sans-serif;
line-height: 1.4;
font-size: 14px;
background: #fff url(greenstripes-images/bg.png) repeat-x;
margin: 0;
padding: 0;
}
a { color: #4E6D2D; text-decoration: none;}
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { font-family: 'Buda', arial, serif; margin: 3px 0 15px 0; font-weight: 100; border-bottom: 1px dotted #919191; }
h1 { font-size: 27px; }
h2 { font-size: 25px; }
h3 { font-size: 23px; }
h4 { font-size: 21px; }
h5 { font-size: 19px; }
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: 960px;
margin: 0 auto 20px auto;
}
#header {
padding: 30px 0 20px 0;
}
#header h1 {
font-family: 'Amaranth', arial, serif;
margin: 0;
padding: 0 0 0 20px;
font-weight: bold;
font-size: 51px;
border: none;
line-height: 1;
background: none;
}
#header h1 a { text-decoration: none; color: #619823; }
#header h1 a:hover { text-decoration: none; color: #4E6D2D; }
#header h2 { background: none; border: none; margin: 0; padding: 0 0 0 24px; color: #000; font-weight: bold; font-size: 23px; }
#menu {
background: url(greenstripes-images/menu.png) repeat-x;
height: 80px;
line-height: 80px;
font-size: 16px;
}
#menu ul {
list-style-type: none;
margin: 0;
padding-left: 22px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
display: block;
padding: 0 10px 0 10px;
text-decoration: none;
color: #fff;
}
#menu ul li a:hover {
color: #fff;
background: url(greenstripes-images/menuover.png) repeat-x;
}
#content {
background: url(greenstripes-images/content.jpg) repeat-y;
padding: 10px 20px 20px 0;
}
.right {
float: right;
width: 580px;
margin-top: 10px;
}
.left {
float: left;
background: url(greenstripes-images/sidebarcontent.png) repeat-y;
width: 340px;
color: #717171;
}
.left h3 { background: url(greenstripes-images/sidebarh3.png) no-repeat; height: 40px; line-height: 40px; margin: 0 0 0 20px; padding: 0 0 0 10px; color: #000; border: none; font-size: 17px; }
.left ul { margin: 0; padding: 10px 20px 20px 30px; list-style-type: none; }
.left ul li { background: url(greenstripes-images/list.png) no-repeat left top; padding: 0 0 3px 20px; margin: 0; font-size: 13px;}
.left ul li a { font-size: 14px; }
.lefttop { width: 340px; float: left; background: url(greenstripes-images/sidebartop.png) no-repeat; padding: 15px 0; }
.leftbottom { width: 340px; float: left; background: url(greenstripes-images/sidebarbottom.png) no-repeat; padding: 15px 0; }
#footer {
background: url(greenstripes-images/footer.png) no-repeat;
padding: 0 30px;
height: 70px;
line-height: 70px;
text-align: center;
color: #fff;
font-size: 13px;
}
#footer p { padding: 0; margin: 0; }
#footer a { color: #fff; }
#footer a:hover { border-bottom: 1px dotted #fff; text-decoration: none; }
.footerleft { float: left; }
.footerright { float: right; }
</style>
<link href='http://fonts.googleapis.com/css?family=Buda:light' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css' />
<title>Green Stripes</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">Green Stripes</a></h1>
<h2>Your Super Cool Web 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="right">
<h1>Main Heading of Your New Web Site - H1</h1>
<p>
Sed vitae lectus libero, vitae tempus lacus. Quisque mollis, lectus sed placerat sodales, felis diam accumsan ligula, in auctor leo velit eu diam. Aenean tincidunt velit ac massa dictum bibendum. Ut vulputate tortor vitae orci cursus aliquam. Phasellus rutrum consequat purus, vel cursus odio fermentum non. Morbi luctus feugiat dictum. Duis sed metus vitae augue faucibus condimentum. Ut id velit eget magna venenatis ultrices in sit amet tellus. Praesent augue nibh, condimentum vel molestie sit amet, luctus nec neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus convallis erat nisl. Mauris feugiat pharetra pellentesque. Pellentesque vulputate mi quis erat fringilla tempus. Suspendisse potenti.
</p>
<h2>Template License</h2>
<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>
<h3>You are free:</h3>
<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://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/green-stripes/">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="lefttop"> </div>
<div class="left">
<h3>Navigation</h3>
<ul>
<li><a href="#">Your Category</a><br />Description of your first category</li>
<li><a href="#">About Us Information</a><br />Link to our business information</li>
<li><a href="#">Resources and Friends</a><br />Related resources and friends</li>
<li><a href="#">Last Category Link</a><br />Description of the last category</li>
</ul>
<h3>Advertisments</h3>
<ul>
<li><a href="http://f248f4qj7gxjpeaay9pqtaboaq.hop.clickbank.net/?tid=GS">Adsense $100k Blueprint</a><br />Amazing Adsense guide. Step-by-step! No fluff!</li>
<li><a href="http://c173e7tm6f0jiianpzl6rahx22.hop.clickbank.net/?tid=GS">Web Traffic Machines</a><br />I hope you can handle a massive stream of free traffic to your website</li>
<li><a href="http://11795.rapbank.com">RapBank.com</a><br />Join for free and get paid instant commision</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 erat</a></li>
<li><a href="#">Anothe filler link</a></li>
<li><a href="#">Aenean interdum fermentum felis</a></li>
<li><a href="#">Maecenas et aliquet nisl</a></li>
<li><a href="#">Integer dapibus vulputate ornare</a></li>
<li><a href="#">Sagittis et venenatis nisi</a></li>
</ul>
</div>
<div class="leftbottom"> </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/green-stripes/">Green Stripes</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