highmountains
<!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>High Mountains | 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: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #585858;
background: #75ADD3 url('highmountains-images/bg.jpg') repeat-x top;
}
h1 {
padding: 10px 0 0 30px;
font: normal 48px Georgia, Times, serif;
letter-spacing: -1px;
color: White;
}
h1 a, h1 a:hover {
color: White;
text-decoration: none;
}
h2 {
padding-left: 15px;
font: normal 24px Georgia, Times, serif;
color: #566C86;
}
p {
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
a {
color: #1B80C4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#page {
margin: 0 auto;
width: 980px;
background: White url('highmountains-images/page.gif') repeat-y;
}
#header {
height: 222px;
background: #448DC2 url('highmountains-images/header.jpg') no-repeat top;
}
#main {
padding: 0 30px;
background: url('highmountains-images/main.jpg') no-repeat top;
}
/* sidebar */
#sidebar {
float: left;
padding: 10px 0 15px 0;
width: 220px;
}
#sidebar h2 {
font-size: 20px;
}
#sidebar p {
text-align: left;
}
#sidebar ul {
list-style: none;
margin-top: 5px;
padding: 10px 5px 20px 15px;
background: url('highmountains-images/sidebar.jpg') no-repeat;
}
#sidebar ul li {
margin: 0;
padding: 0;
line-height: 2em;
}
#sidebar ul li a {
margin: 0;
padding: 0 0 0 8px;
}
#sidebar .box {
margin-top: 5px;
padding: 0 5px 10px 15px;
background: url('highmountains-images/sidebar.jpg') no-repeat;
}
/* search form */
#search {
height: 90px;
}
#searchtxt {
display: block;
float: left;
width: 167px;
height: 40px;
background: #E3EFF6 url('highmountains-images/searchtxt.gif') no-repeat;
}
#search input.text {
padding: 10px 5px;
width: 155px;
height: 20px;
font: 16px Arial, Helvetica, sans-serif;
color: #A9A9A9;
background: none;
border: none;
}
#search input.submit {
display: block;
float: right;
width: 53px;
height: 40px;
background: #BFD9EA url('highmountains-images/submit.gif') no-repeat;
border: none;
cursor: pointer;
}
/* content */
#content {
float: right;
padding: 10px 0 15px 0;
width: 660px;
}
/* menu */
#menu {
height: 48px;
padding: 0 0 42px 25px;
background: url(highmountains-images/menu.jpg) no-repeat top;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
display: block;
float: left;
height: 48px;
padding: 0 20px;
font: 20px/42px Georgia, Times, serif;
text-decoration: none;
color: #26353B;
}
#menu ul li a:hover {
color: White;
background: url('highmountains-images/menuover.gif') repeat-x;
}
/* post */
.post {
}
.entry {
margin-top: 4px;
padding: 0 15px 24px 15px;
background: url('highmountains-images/post.jpg') no-repeat;
}
.postmeta {
padding: 0 0 0 15px;
font-size: 11px;
color: #9C9C9C;
}
.clearing {
clear: both;
height: 1px;
overflow: hidden;
}
/* footer */
#footer {
clear: both;
margin: 0 auto;
padding: 10px 0;
width: 980px;
background: url('highmountains-images/footer.gif') no-repeat top;
}
#footer p {
padding: 5px 0;
text-align: center;
}
#footer a {
color: White;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="#">High Mountains</a></h1>
</div>
<div id="main">
<div id="sidebar">
<form id="search" method="get" action="#">
<div id="searchtxt">
<input type="text" class="text" /></div>
<input type="submit" class="submit" value="" />
</form>
<h2>Quisque luctus</h2>
<ul>
<li>»<a href="#">Ut pharetra neque eget</a></li>
<li>»<a href="#">Nisi tristique et feugiat</a></li>
<li>»<a href="#">Vulputate ac hendrerit ut</a></li>
<li>»<a href="#">Aenean sed lectus massa</a></li>
<li>»<a href="#">Quisque luctus sem suscipit</a></li>
<li>»<a href="#">Mauris vehicula elit dictum</a></li>
<li>»<a href="#">Nulla erat rhoncus felis</a></li>
</ul>
<h2>Integer rhoncus</h2>
<div class="box">
<p>Mauris sollicitudin tincidunt magna vitae semper. Curabitur ut pharetra quam. Integer rhoncus convallis urna vitae mattis. Sed pharetra massa ac metus fermentum et iaculis enim accumsan.</p>
</div>
<h2>Mauris sagittis</h2>
<ul>
<li>»<a href="#">Mauris sagittis tellus</a></li>
<li>»<a href="#">Lacus tincidunt adipiscing</a></li>
<li>»<a href="#">Purus sagittis feugiat</a></li>
<li>»<a href="#">Suspendisse faucibus purus</a></li>
<li>»<a href="#">Fusce rhoncus velit odio</a></li>
<li>»<a href="#">Maecenas aliquam vehicula</a></li>
<li>»<a href="#">Proin faucibus mollis congue</a></li>
</ul>
</div><!-- sidebar -->
<div id="content">
<div id="menu">
<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>
</div>
<div class="post">
<h2>Terms of use</h2>
<p class="postmeta">Posted in <a href="#">Class apent</a> | Dec 17, 2010 | <a href="#">4 comments</a></p>
<div class="entry">
<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 a public domain image from <a href="http://www.publicdomainpictures.net/view-image.php?image=9892&picture=crans-montana">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... <a href="#">more</a></p>
</div>
</div>
<div class="post">
<h2>Lorem ipsum dolor sit amet</h2>
<p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | Dec 18, 2010 | <a href="#">2 comments</a></p>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec dui quis urna sollicitudin sodales. Fusce laoreet, ligula et rhoncus volutpat, felis magna varius tortor, ac molestie diam lorem in lectus. Aliquam venenatis mollis est, a porttitor ipsum interdum nec. Vestibulum sed risus ac nulla viverra pharetra.</p>
<p>Quisque congue lacus sed odio fermentum tincidunt. Proin vitae nulla velit. Cras consectetur commodo scelerisque. Curabitur leo nisl, blandit at tempus et, interdum at risus. Sed dui augue, pellentesque ac pulvinar id, malesuada eget diam. Integer elementum sem eget tortor faucibus id pellentesque lorem dignissim... <a href="#">more</a></p>
</div>
</div>
</div><!-- content -->
<div class="clearing"> </div>
</div><!-- main -->
</div><!-- page -->
<div id="footer">
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a title="valid XHTML 1.0" href="http://validator.w3.org/check/referer">XHTML</a> | <a title="valid CSS" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p>
<p>Copyright © 2010, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
</div>
</body>
</html>
Related examples in the same category