natural_blues
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Created by: Reality Software | www.realitysoftware.ca
Released by: Flash Gallery | www.flash-gallery.org
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep links to authors intact.
Don't want our links in template? You can pay a link removal fee: www.realitysoftware.ca/templates/
You can also purchase a PSD-file for this template.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type='text/css'>
body {
background:url(natural_blues-images/bg.gif);
margin: 0;
padding: 50px 0 50px 0;
font-family: "Myriad Pro";
}
#container {
width: 780px;
margin: 0 auto;
}
#header {
height:100px;
background-image:url(natural_blues-images/header.gif);
}
#logo {
padding: 32px 0 0 30px;
}
#logo a {
color: #647c00;
text-decoration: none;
font-size: 36px;
}
#menu {
background-color: #8DB527;
padding: 6px 0 6px 30px;
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
}
#menu a {
color: #F8FCF7;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
}
#menu a:hover {
color: #E0F0B9;
}
#sidebar {
float: right;
width: 160px;
padding: 30px 30px 0 30px;
margin: 0;
text-align:center;
}
#sidebar a {
text-decoration: none;
color: #2B370C;
font-size: 13px;
}
#sidebar a:hover {
color: #647c00;
}
#sidebar img {
border: solid 1px #D8ECA9;
}
.project {
margin:15px 0 25px 0;
}
h1 {
margin: 0px;
color: #647c00;
font-size:24px;
font-weight: normal;
}
h2 {
color: #647c00;
font-size: 15px;
margin: 20px 0 0 0;
}
#main {
background-image:url(natural_blues-images/bg2.gif);
}
#text {
margin: 0 220px 0 0;
padding: 20px 30px 30px 30px;
color: #2B370C;
font-size: 14px;
line-height: 19px;
text-align: justify;
}
#text a {
color: #799600;
text-decoration: none;
}
#text a:hover {
color: #4F6300;
}
#footer {
height: 90px;
background-image: url(natural_blues-images/footer.gif);
color: #F8FCF7;
font-size: 14px;
}
#footer a {
text-decoration: none;
color: #FFFFFF;
}
#footer a:hover {
color: #E0F0B9;
}
#footer_left {
float:left;
padding: 60px 0 0 30px;
}
#footer_right {
float:right;
padding: 60px 30px 0 0;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><a href="#">Website Name</a></div>
</div>
<div id="menu">
<a href="#">Home</a> <a href="#">About Us</a> <a href="#">Services</a> <a href="#">Pricing</a> <a href="#">Contacts</a>
</div>
<div id="main">
<div id="sidebar">
<h1>Our projects</h1>
<div class="project"><a href="#"><img src="natural_blues-images/cnn.gif" alt="" /><br/>www.cnn.com</a></div>
<div class="project"><a href="#"><img src="natural_blues-images/yahoo.gif" alt="" /><br/>www.yahoo.com</a></div>
<div class="project"><a href="#"><img src="natural_blues-images/msn.gif" alt="" /><br/>www.msn.com</a></div>
</div>
<div id="text">
<p><b>Natural Blues</b> is a free template created by <a href="http://www.realitysoftware.ca/">Reality Software</a> and released by <a href="http://www.flash-gallery.org/">Flash Gallery</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep links to authors intact.</p>
<h2>Lorem ipsum dolor?</h2>
<p>Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, <a href="#">rhoncus venenatis</a>, tristique in, vulputate at, odio. Suspendisse potenti.</p>
<h2>Suspendisse potenti?</h2>
<p>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. In eget purus. Integer <a href="#">turpis arcu</a>, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id. Fusce varius urna id quam.</p>
<h2>Pellentesque sapien?</h2>
<p>Proin fermentum enim non felis. Sed et ipsum semper erat eleifend venenatis. Maecenas dictum lorem sit amet elit. Quisque luctus enim ut sapien. Etiam adipiscing dui ullamcorper ipsum aliquet auctor. Donec condimentum felis ut libero. Proin porta <a href="#">consectetuer</a> metus.</p>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="footer_left">
Copyright 2009 Your Website
</div>
<div id="footer_right">
<!-- Please do not change or delete these links. Read the license! Thanks. :-) -->
<a href="http://www.realitysoftware.ca/services/website-development/design/">Web design</a> released by <a href="http://www.flash-gallery.org/">Flash Gallery</a><br/>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category