countryside
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Countryside | Free Web Template by WebTemplateOcean.com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style type='text/css'>
/*
designed by WebTemplateOcean (http://www.webtemplateocean.com)
released under Creative Commons Attribution-ShareAlike 3.0 license
*/
* {
margin: 0;
padding: 0;
}
body {
font: 81.25% Arial, Helvetica, sans-serif;
color: #928F67;
background: #E4EDD7 url(countryside-images/bg.jpg) repeat-x;
}
h1, h2 {
font-weight: normal;
}
h1 {
padding: 36px 0 10px 0;
font-size: 34px;
text-align: center;
color: White;
}
h1 a, h1 a:hover {
color: White;
text-decoration: none;
}
p {
padding: 10px 0;
line-height: 1.6em;
}
p.description {
padding: 0;
font-size: .85em;
text-align: center;
text-transform: uppercase;
color: #3B6CB8;
}
a {
color: #5C93D1;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
ul li span {
padding-right: 5px;
}
#bg {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 354px;
background: url(countryside-images/bg2.jpg) repeat-x;
}
/* page */
#page {
position: relative;
width: 900px;
margin: 0 auto;
padding: 40px 30px 0 30px;
background: #A7C57F url(countryside-images/img.jpg) no-repeat;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
}
#logo {
width: 290px;
height: 150px;
margin-left: 8px;
background: url(countryside-images/logobg.jpg);
}
#main {
height: 1%;
background: #DCE8CC url(countryside-images/middle.gif) repeat-y;
}
#main2 {
height: 1%;
background: url(countryside-images/middle2.jpg) no-repeat bottom;
}
#main3 {
height: 1%;
padding: 8px 8px 0 8px;
background: url(countryside-images/middle.jpg) no-repeat;
}
/* menu */
#menu {
padding: 1px;
border: 1px solid #E1D96C;
}
#menu2 {
height: 40px;
background: #76A9DC url(countryside-images/menu.gif) repeat-x;
}
#menu ul {
list-style: none;
width: 600px;
}
#menu ul li {
display: block;
float: left;
padding: 0 16px;
}
#menu ul li a {
display: block;
float: left;
padding: 0 0 0 10px;
font-size: 1.23em;
line-height: 40px;
text-decoration: none;
color: #3C2700;
background: url(countryside-images/arrow.gif) no-repeat left;
}
#menu ul li a:hover {
color: #D9E6D5;
background: url(countryside-images/arrowover.gif) no-repeat left;
}
/* search form */
#search {
position: absolute;
top: 207px;
right: 70px;
width: 250px;
}
#search input.text {
float: left;
display: block;
padding: 3px;
width: 195px;
font-size: 13px;
color: #3C2700;
background: #D9E6D5;
border: 1px solid #C4D7BA;
}
#search input.submit {
float: right;
display: block;
padding: 3px 0;
width: 40px;
font-size: 13px;
color: #3C2700;
background: #E8D44F url(countryside-images/submit.gif) repeat-x;
border: none;
cursor: pointer;
}
/* sidebar */
#sidebar {
clear: both;
float: left;
margin-bottom: 30px;
padding-bottom: 6px;
width: 290px;
background: url(countryside-images/sidebar.gif) no-repeat bottom;
}
#sidebar2 {
padding-top: 20px;
background: #E4EDD7 url(countryside-images/sidebar.jpg) no-repeat;
}
#sidebar h2 {
margin: 0 10px;
font-size: 1.38em;
line-height: 40px;
text-align: center;
color: #786420;
background: #E4EDD7 url(countryside-images/h2.gif) no-repeat;
}
#sidebar .box {
padding: 10px 20px 35px 20px;
}
#sidebar .box h2 {
margin: 0;
font-size: 1em;
line-height: 1.6em;
font-weight: bold;
text-align: left;
color: #786420;
background: none;
}
#sidebar ul {
list-style: none;
padding: 20px 10px 45px 20px;
}
#sidebar ul li {
padding: 0;
line-height: 2em;
color: #959ED6;
}
#sidebar ul li a {
padding: 0;
}
/* content */
#content {
float: right;
width: 550px;
padding: 30px 10px 0 0;
}
#content h2 {
font-size: 1.38em;
color: #3C2700;
}
#content .box {
padding: 10px 0 45px 0;
}
#content ul {
list-style: none;
padding: 10px 0 10px 30px;
line-height: 1.6em;
}
#content ul li {
padding: 0;
}
.clearing {
clear: both;
height: 1px;
overflow: hidden;
}
/* footer */
#footer {
}
#footer p {
padding: 20px 0;
text-align: center;
color: #3C2700;
}
</style>
</head>
<body>
<div id="bg"> </div>
<div id="page">
<div id="logo">
<h1><a href="#">Countryside</a></h1>
<p class="description">Designed by WebTemplateOcean.com</p>
</div>
<div id="main"><div id="main2"><div id="main3">
<div id="menu"><div id="menu2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form id="search" method="get" action="#" accept-charset="utf-8">
<input type="text" class="text" value="" />
<input type="submit" class="submit" value="Go" />
</form>
</div></div>
<div id="sidebar"><div id="sidebar2">
<div class="box">
<h2>Phasellus viverra</h2>
<p>Phasellus viverra velit eget odio dignissim sagittis. Ut ipsum massa, facilisis hendrerit accumsan ac, placerat et erat... <a href="#">read more</a></p>
<h2>Nam id lorem</h2>
<p>Nam id lorem nulla. Nunc a leo elit. Etiam leo odio, volutpat sed vulputate ac, egestas ac urna... <a href="#">read more</a></p>
<h2>Ut ipsum massa</h2>
<p>Phasellus viverra velit eget odio dignissim sagittis. Ut ipsum massa, facilisis hendrerit accumsan ac, placerat et erat... <a href="#">read more</a></p>
</div>
<h2>Donec laoreet</h2>
<ul>
<li><span>»</span><a href="#">Vestibulum ante ipsum primis</a></li>
<li><span>»</span><a href="#">Aenean rutrum tortor a purus</a></li>
<li><span>»</span><a href="#">Integer non enim nec tellus</a></li>
<li><span>»</span><a href="#">Lobortis tempus vel nec lorem</a></li>
<li><span>»</span><a href="#">Magnis dis parturient montes</a></li>
<li><span>»</span><a href="#">Quisque convallis nisl ac augue</a></li>
</ul>
<h2>Cum sociis natoque</h2>
<ul>
<li><span>»</span><a href="#">Cum sociis natoque penatibus</a></li>
<li><span>»</span><a href="#">Aenean rutrum tortor a purus</a></li>
<li><span>»</span><a href="#">Etiam convallis enim tincidunt</a></li>
<li><span>»</span><a href="#">Magnis dis parturient montes</a></li>
<li><span>»</span><a href="#">Quisque convallis nisl ac augue</a></li>
<li><span>»</span><a href="#">Accumsan ante et tristique</a></li>
</ul>
</div></div><!-- sidebar --><!-- sidebar2 -->
<div id="content">
<h2>Terms of Use</h2>
<div class="box">
<p>The template is released under <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution</a> license. So you are free to use it for personal or commercial purposes, modify it or redistribute as long as you keep the link back to WebTemplateOcean.com in the footer.</p>
<p>Under no circumstances can you use the template for websites with illegal or immoral (even if legal) content. This includes, but is not limited to pornography, obscenity, homosexuality, abortion, violence, drugs, gambling.</p>
<p>The template contains public domain images from <a href="http://www.publicdomainpictures.net/">PublicDomainPictures.net</a>. Although public domain pictures are free and with no obligation to credit their authors you should keep in mind that in some cases they may infringe trademark, property or any other rights of others. Therefore, it is you who has to decide whether to use the image, especially if your website will be a commercial one.</p>
</div>
<h2>Lorem ipsum dolor sit amet</h2>
<div class="box">
<p>Fusce viverra, velit vel tincidunt accumsan, neque ante posuere nunc, quis egestas turpis velit ut purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi purus, varius vitae dignissim sed, faucibus nec nibh.</p>
<p>Nulla non enim felis. Cras non nulla lacus, vel luctus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam euismod enim sed velit adipiscing a sodales massa auctor.</p>
</div>
<h2>Maecenas venenatis rhoncus nulla</h2>
<div class="box">
<p>Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
<ul>
<li><span>»</span>Cum sociis natoque penatibus et magnis dis parturient montes</li>
<li><span>»</span>Nascetur ridiculus mus, aenean rutrum tortor a purus</li>
<li><span>»</span>Etiam convallis enim tincidunt erat dapibus tincidunt</li>
<li><span>»</span>Quisque convallis nisl ac augue, nulla aliquam dui</li>
</ul>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><!-- content -->
<div class="clearing"> </div>
</div></div></div><!-- main --><!-- main2 --><!-- main3 -->
<div id="footer">
<p>Copyright © 2011, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
</div>
</div><!-- page -->
</body>
</html>
Related examples in the same category