meadows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Meadows
Description: A two-column, fixed-width design suitable for small websites and blogs.
Version : 1.0
Released : 20080105
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Meadows by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #496C10;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #AFCE7C;
}
form {
margin: 0;
padding: 0;
}
input, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
h1, h2, h3 {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-bottom: 1.8em;
line-height: 160%;
}
ul, ol {
}
blockquote {
}
a {
color: #FFFFFF;
}
a:hover {
text-decoration: none;
}
hr {
display: none;
}
/* Wrapper */
#wrapper {
height: 100%;
min-height: 100%;
background: url(meadows-images/img01.jpg) repeat-x left bottom;
}
html>body #wrapper {
height: auto;
}
/* Menu */
#menu {
width: 778px;
height: 30px;
margin: 0 auto;
background: #000000;
}
#menu ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
height: 20px;
padding: 5px 15px;
text-decoration: none;
text-transform: uppercase;
font-size: smaller;
font-weight: bold;
color: #CCCCCC;
}
#menu a:hover {
background: #333333;
color: #FFFFFF;
}
#menu .current_page_item a {
background: #999999;
color: #000000;
}
/* Logo */
#logo {
width: 778px;
height: 90px;
margin: 0 auto;
background: #D2EBAB url(meadows-images/img02.jpg) no-repeat;
color: #3E5C0E;
}
#logo h1, #logo h2 {
float: left;
margin: 0;
}
#logo h1 {
padding: 25px 0 0 20px;
letter-spacing: -3px;
font-size: 3em;
}
#logo h2 {
padding: 36px 0 0 10px;
letter-spacing: -1px;
font-weight: normal;
}
#logo a {
text-decoration: none;
color: #3E5C0E;
}
/* Page */
#page {
width: 778px;
margin: 0 auto;
padding: 20px 0;
background: url(meadows-images/img03.jpg) no-repeat;
}
/* Content */
#content {
float: left;
width: 494px;
}
.post {
padding-bottom: 20px;
}
.post .title {
margin: 0;
padding: 5px 20px;
letter-spacing: -2px;
}
.post .title a {
text-decoration: none;
}
.post .entry {
padding: 10px 20px 0 20px;
background: url(meadows-images/img04.jpg) no-repeat;
}
.post .meta {
height: 26px;
border-top: 1px solid #3E5C0E;
border-bottom: 2px solid #3E5C0E;
font-size: smaller;
font-weight: bold;
}
.post .posted {
float: left;
height: 16px;
padding: 5px 20px;
background: url(meadows-images/img09.gif) no-repeat left bottom;
}
.post .permalink, .post .comments {
float: right;
height: 16px;
padding: 5px 20px;
}
.post .permalink {
background: url(meadows-images/img10.gif) no-repeat right bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 260px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
}
#sidebar li ul {
padding: 20px;
}
#sidebar li li {
margin: 0;
}
#sidebar p {
padding: 0 20px;
}
#sidebar h2 {
height: 29px;
margin: 0;
padding: 9px 0 0 20px;
background: #B6E074 url(meadows-images/img05.jpg) no-repeat;
font-size: 1.4em;
font-weight: normal;
color: #000000;
}
/* Search */
#search form {
padding: 20px;
}
#search br {
display: none;
}
#search #s {
width: 135px;
}
/* Footer */
#footer {
clear: both;
padding: 10px 0;
font-size: smaller;
}
#footer p {
margin: 0;
text-align: center;
line-height: normal;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#">Homepage</a></li>
<li class="current_page_item"><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="logo">
<h1><a href="#">Meadows</a></h1>
<h2>By Free CSS Templates</h2>
</div>
<hr />
<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Meadows</a></h2>
<div class="entry">
<p>This is <strong>Meadows</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
<p>This template is also available as a <a href="http://www.nodethirtythree.com/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
<p class="meta"><span class="posted">Posted by <a href="#">Someone</a> on January 2, 2007</span> <a href="#" class="permalink">Read more</a> <a href="#" class="comments">Comments (18)</a> </p>
</div>
<div class="post">
<h2 class="title"><a href="#">Sapien sed varius</a></h2>
<div class="entry">
<p>Morbi sit amet mauris. Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor et massa. Phasellus sit amet velit. Vestibulum vel lacus vitae tortor consectetuer sapien semper dictum. Integer est felis, facilisis quis, lacinia sed, lacinia et, augue. Vivamus ultrices lacinia urna. Proin varius sollicitudin nunc. Vivamus condimentum, dui nec imperdiet porta, odio risus molestie nisl, nec laoreet purus sapien a massa.</p>
</div>
<p class="meta"><span class="posted">Posted by <a href="#">Someone</a> on December 13, 2007</span> <a href="#" class="permalink">Read more</a> <a href="#" class="comments">Comments (18)</a> </p>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input name="submit" type="submit" value="Search" />
</div>
</form>
</li>
<li>
<h2>Veroeros etiam</h2>
<p><strong>Morbi sit amet</strong> mauris Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor loremmassa. Phasellus sit. <a href="#">More…</a></p>
</li>
<li>
<h2>Blandit Volutpat</h2>
<ul>
<li><a href="#">Morbi sit amet sed magna</a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Donec pede nisl dolore sed</a></li>
<li><a href="#">Lacus dapibus et interdum</a></li>
<li><a href="#">Morbi sit amet magna etiam</a></li>
<li><a href="#">Maecenas sed sem lorem</a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Donec pede nisl dolore</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
</div>
<!-- end #page -->
<div id="footer">
<p>(c) 2007 Website Name. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</div>
</body>
</html>
Related examples in the same category