castellated
<!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>Castellated | 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.com
http://www.webtemplateocean.com/
released under Creative Commons Attribution-ShareAlike 3.0 license
*/
* {
margin: 0;
padding: 0;
}
body {
padding-bottom: 40px;
font: 14px Georgia, Times, serif;
color: #4F3E24;
background: #5C421D;
}
h1 {
padding: 170px 0 0 60px;
font-weight: normal;
font-style: italic;
font-size: 2.5em;
color: #5C421D;
}
h1 a, h1 a:hover {
text-decoration: none;
color: #5C421D;
}
p {
padding: 10px 0;
line-height: 1.4em;
text-align: justify;
}
a {
text-decoration: underline;
color: #A8C51F;
}
a:hover {
text-decoration: none;
}
/* page */
#page {
width: 956px;
margin: 0 auto;
background: #FCF1D1 url('images/bg.jpg') repeat-y;
}
/* header */
#header {
height: 417px;
background: url('images/header.jpg') no-repeat;
}
#logo {
height: 335px;
}
#logo p {
width: 300px;
padding: 15px 0 0 100px;
text-align: left;
}
/* menu */
#menu {
width: 912px;
height: 80px;
margin: 0 auto;
background: #547B41 url('images/menu.jpg') no-repeat top;
}
#menu ul {
list-style: none;
padding-left: 10px;
}
#menu ul li {
display: block;
float: left;
padding: 0 35px;
}
#menu ul li a {
font-style: italic;
font-size: 22px;
line-height: 80px;
text-decoration: none;
color: #FFFFFF;
}
#menu ul li a:hover {
line-height: 76px;
text-decoration: none;
}
#main {
height: 1%;
padding: 0 58px;
}
/* sidebar */
#sidebar {
float: left;
width: 415px;
}
#sidebar1, #sidebar2 {
width: 205px;
background: url('images/linevert.gif') repeat-y;
}
#sidebar1 {
float: left;
}
#sidebar2 {
float: right;
}
#sidebar .box {
padding: 12px 5px 15px 13px;
background: url('images/box.jpg') no-repeat;
}
#sidebar h2 {
padding: 10px 0;
font-weight: normal;
font-size: 15px;
text-transform: uppercase;
}
#sidebar ul {
list-style: none;
padding: 8px 0;
}
#sidebar ul li {
padding: 0 0 6px 14px;
background: url('images/star.gif') no-repeat;
}
#sidebar ul li a {
padding: 0;
color: #5F9F41;
}
/* search form */
#search {
padding: 12px 10px 0 13px;
}
#search form {
height: 55px;
}
#search input.text {
float: left;
display: block;
width: 140px;
padding: 3px;
font-size: 14px;
color: #4F3E24;
background: #FFFFFF;
border: 1px solid #DCE4C2;
}
#search input.submit {
float: right;
display: block;
width: 30px;
padding: 4px 0;
font-weight: bold;
font-size: 11px;
color: #FFFFFF;
background: #CFAC68;
border: 1px solid #A38E65;
cursor: pointer;
}
/* content */
#content {
float: right;
width: 420px;
background: url('images/linevert.gif') repeat-y;
}
#content .post {
padding: 0 0 15px 13px;
background: url('images/box.jpg') no-repeat;
}
#content h2 {
padding-top: 18px;
font-weight: normal;
font-style: italic;
font-size: 1.7em;
}
#content h2 a, #content h2 a:hover {
text-decoration: none;
color: #4F3E24;
}
#content p.postmeta {
padding: 4px 0 14px 0;
font-size: .93em;
color: #907F61;
}
#content p.postmeta2 {
padding: 11px 0 14px 0;
font-size: .93em;
color: #907F61;
}
#content .entry {
}
/* footer */
#footer {
clear: both;
height: 1%;
background: url('images/footer.jpg') no-repeat bottom;
}
#footer p {
padding: 35px 0;
text-align: center;
color: #907F61;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="logo">
<h1><a href="#">Castellated</a></h1>
<p>Etiam leo odio, volutpat sed vulputate ac, egestas ac urna. Donec ac augue sit amet ligula suscipit consectetur. Cras blandit convallis orci, eget elementum nulla interdum et.</p>
</div>
<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><!-- header -->
<div id="main">
<div id="sidebar">
<div id="sidebar1">
<div id="search">
<h2>Search</h2>
<form action="#" method="get">
<input type="text" class="text" />
<input type="submit" class="submit" value="Go" />
</form>
</div>
<div class="box">
<h2>Donec laoreet</h2>
<ul>
<li><a href="#">Vestibulum ante ipsum primis</a></li>
<li><a href="#">Integer non enim nec tellus</a></li>
<li><a href="#">Lobortis tempus vel nec lorem</a></li>
<li><a href="#">Vestibulum ullamcorper</a></li>
<li><a href="#">Curabitur vel justo magna, ut hendrerit urna</a></li>
<li><a href="#">Accumsan ante et tristique</a></li>
<li><a href="#">Mi ut consectetur rhoncus</a></li>
<li><a href="#">Gravida consequat quam mi</a></li>
<li><a href="#">Per inceptos himenaeos</a></li>
</ul>
</div>
<div class="box">
<h2>Proin suscipit</h2>
<ul>
<li><a href="#">Praesent eu erat et nisl suscipit lobortis at vitae enim</a></li>
<li><a href="#">Curabitur vel justo magna, ut hendrerit urna</a></li>
<li><a href="#">Vestibulum vestibulum fringilla mi ac volutpat</a></li>
<li><a href="#">Suspendisse lacus ante, aliquet at luctus euismod, varius sit amet elit</a></li>
<li><a href="#">Donec imperdiet nisi vel nisl fringilla</a></li>
<li><a href="#">Aenean rutrum tortor a purus</a></li>
<li><a href="#">Integer non enim nec tellus</a></li>
<li><a href="#">Mi ut consectetur rhoncus</a></li>
</ul>
</div>
</div><!-- sidebar1 -->
<div id="sidebar2">
<div class="box">
<h2>Nam id lorem nulla</h2>
<ul>
<li><a href="#">Gravida consequat quam mi</a></li>
<li><a href="#">Donec imperdiet nisi vel nisl fringilla</a></li>
<li><a href="#">Aenean rutrum tortor a purus</a></li>
<li><a href="#">Vestibulum ante ipsum primis</a></li>
<li><a href="#">Integer non enim nec tellus</a></li>
<li><a href="#">Lobortis tempus vel nec lorem</a></li>
<li><a href="#">Per inceptos himenaeos</a></li>
</ul>
</div>
<div class="box">
<h2>Sed eu tortor metus</h2>
<ul>
<li><a href="#">Phasellus viverra velit</a></li>
<li><a href="#">Eget odio dignissim sagittis</a></li>
<li><a href="#">Nam id lorem nulla</a></li>
<li><a href="#">Facilisis hendrerit accumsan ac</a></li>
<li><a href="#">Cum sociis natoque penatibus</a></li>
<li><a href="#">Magnis dis parturient montes</a></li>
<li><a href="#">Aenean rutrum tortor a purus</a></li>
</ul>
</div>
<div class="box">
<h2>Integer non enim</h2>
<ul>
<li><a href="#">Torquent per conubia nostra</a></li>
<li><a href="#">Per inceptos himenaeos</a></li>
<li><a href="#">Nullam euismod enim sed velit</a></li>
<li><a href="#">Integer non enim nec tellus</a></li>
<li><a href="#">Class aptent taciti</a></li>
<li><a href="#">Sociosqu ad litora</a></li>
</ul>
</div>
</div><!-- sidebar2 -->
</div><!-- sidebar -->
<div id="content">
<div class="post">
<h2><a href="#">Castellated - Terms of Use</a></h2>
<p class="postmeta">Apr 11, 2011, posted by <a href="#">admin</a> under <a href="#">uncategorized</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.pdphoto.org/">PDPhoto.org</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>
<p class="postmeta2"><a href="#">read more</a> | <a href="#">4 comments</a></p>
</div>
<div class="post">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="postmeta">Apr 08, 2011, posted by <a href="#">admin</a> under <a href="#">uncategorized</a></p>
<div class="entry">
<p>Consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
<p>Phasellus viverra velit eget odio dignissim sagittis. Ut ipsum massa, facilisis hendrerit accumsan ac, placerat et erat. Nam id lorem nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Pellentesque nisi purus, varius vitae dignissim sed, faucibus nec nibh. In vestibulum tortor eu metus vulputate condimentum. Donec imperdiet nisi vel nisl fringilla a imperdiet tortor mollis. Ut ut enim lorem.</p>
</div>
<p class="postmeta2"><a href="#">read more</a> | <a href="#">2 comments</a></p>
</div>
</div><!-- content -->
</div><!-- main -->
<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