behindthetree
<!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>Behind the Tree | 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 http-equiv="content-language" content="" />
<style type='text/css'>
/*
designed by WebTemplateOcean.com
http://www.webtemplateocean.com/
released under Creative Commons Attribution-ShareAlike 3.0 license
*/
* {
margin: 0;
padding: 0;
}
body {
padding-bottom: 30px;
font: 12px Arial, Helvetica, sans-serif;
color: #B9B3AD;
background: #000000;
}
h1 {
padding: 120px 0 0 30px;
font: normal 54px Georgia, Times, serif;
color: #FFFFFF;
}
h1 a, h1 a:hover {
color: #FFFFFF;
text-decoration: none;
}
h2 {
font-weight: normal;
text-shadow: -1px 1px 1px #36322F;
}
p {
padding: .8em 0;
line-height: 1.8em;
text-align: justify;
}
p#subtitle {
padding: 0 0 0 30px;
font-size: 14px;
text-transform: uppercase;
color: #CE5454;
}
a {
color: #D9463D;
text-decoration: none;
}
a:hover {
color: #EF5548;
}
/* page */
#page {
width: 960px;
margin: 0 auto;
}
/* header */
#header {
height: 350px;
background: url('images/header.jpg') no-repeat right top;
}
/* menu */
#menu {
height: 102px;
text-align: center;
background: #9D2D2D url('images/menu.gif') no-repeat top;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline;
font-size: 14px;
line-height: 72px;
}
#menu ul li a {
padding: 0 30px;
text-shadow: 1px -1px 1px #7B2323;
color: #EEC2C2;
}
#menu ul li a:hover {
color: #FFFFFF;
}
/* main */
#main {
background: url('images/main.jpg') no-repeat bottom;
}
/* sidebar */
#sidebar {
float: left;
width: 305px;
font-size: 13px;
}
#sidebar #login, #sidebar .box {
margin-bottom: 15px;
padding-bottom: 10px;
background: url('images/box.gif') no-repeat bottom;
}
#sidebar .box2 {
height: 1%;
padding: 20px 30px;
background: #36322F url('images/box.jpg') no-repeat top;
}
#sidebar h2 {
padding: 0 10px 0 30px;
font-size: 20px;
line-height: 64px;
background: #49433D url('images/h2.gif') no-repeat;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li {
padding: .25em 0 .25em 25px;
line-height: 1.8em;
background: url('images/arrow.gif') no-repeat 0 .55em;
}
/* login */
#login h2 {
font-size: 18px;
line-height: 52px;
height: 58px;
background: #49433D url('images/loginh2.gif') no-repeat;
}
#login form {
text-align: center;
}
#login form p {
padding: 5px 0;
text-align: center;
}
#login form p.txtleft {
padding: 15px 0 5px 35px;
text-align: left;
}
#login form p.rem {
padding-top: 15px;
}
#login input.text, #login input.password {
padding: 4px;
width: 190px;
font-size: 13px;
color: #444444;
background: #EAE8E7;
border: 1px solid #A59C95;
border-left: 1px solid #C8C1BC;
border-bottom: 1px solid #C8C1BC;
}
#login input.submit {
margin: 10px 0;
width: 100px;
height: 31px;
color: #A59C95;
background: #7F2525 url('images/submit.jpg') no-repeat;
border: none;
cursor: pointer;
}
/* content */
#content {
float: right;
width: 625px;
padding-bottom: 10px;
margin-bottom: 15px;
background: url('images/content.gif') no-repeat bottom;
}
#content #contheader h2 {
height: 58px;
padding-right: 30px;
font-size: 24px;
line-height: 52px;
text-align: right;
background: #49433D url('images/contenth2.gif') no-repeat;
}
#content2 {
height: 1%;
padding: 40px 30px 10px 30px;
background: #36322F url('images/content.jpg') no-repeat top;
}
#content .post {
padding: 0 0 50px 0;
}
#content2 h2 {
font-size: 24px;
text-shadow: none;
}
#content h2 a {
color: #B9B3AD;
}
p.postmeta {
padding: .4em 0;
color: #8D8883;
}
#content .entry {
padding: 20px 0 0 0;
}
.clearing {
clear: both;
height: 1px;
overflow: hidden;
}
/* footer */
#footer {
padding: 40px 30px 80px 30px;
}
#footer p {
font-size: 11px;
text-align: center;
text-transform: uppercase;
color: #7C7C7C;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="#">Behind the Tree</a></h1>
<p id="subtitle">Template designed by WebTemplateOcean.com</p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="main">
<div id="sidebar">
<div id="login">
<h2>Account Login</h2>
<div class="box2">
<form method="post" action="#">
<p class="txtleft"><label for="user">User Name:</label></p>
<input type="text" name="user" id="user" class="text" /><br />
<p class="txtleft"><label for="password">Password:</label></p>
<input type="password" name="password" id="password" class="password" /><br />
<p class="rem">
<input type="checkbox" checked="checked" name="remember" id="remember" /> <label for="remember">Remember me</label></p>
<input type="submit" name="submit" id="submit" class="submit" value="Submit" />
<p><a href="#">Forgot your password?</a></p>
<p><a href="#">Create an account</a></p>
</form>
</div>
</div><!-- login -->
<div class="box">
<h2>Quisque luctus</h2>
<div class="box2">
<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>
</div>
</div><!-- box -->
<div class="box">
<h2>Mauris sagittis</h2>
<div class="box2">
<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>
</div><!-- box -->
</div><!-- sidebar -->
<div id="content">
<div id="contheader">
<h2>Welcome to my Site!</h2>
</div>
<div id="content2">
<div class="post">
<h2><a href="#">Terms of Use</a></h2>
<p class="postmeta">Posted in <a href="#">Class apent</a> | Jun 01, 2011 | <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/">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><!-- post -->
<div class="post">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | May 31, 2011 | <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><!-- post -->
<div class="post">
<h2><a href="#">Maecenas venenatis rhoncus nulla</a></h2>
<p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | May 20, 2011 | <a href="#">3 comments</a></p>
<div class="entry">
<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... <a href="#">more</a></p>
</div>
</div><!-- post -->
</div><!-- content2 -->
</div><!-- content -->
<div class="clearing"> </div>
<div id="footer">
<p>Copyright © 2011, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
</div>
</div><!-- main -->
</div><!-- page -->
</body>
</html>
Related examples in the same category