thebarn
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Barn</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 20px;
padding: 0;
background: #786E50 url(thebarn-images/img1.gif);
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #3C3728;
}
h1, h2, h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000000;
}
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p, ol, ul {
line-height: 20px;
}
a {
color: #000000;
}
a:hover {
text-decoration: none;
}
.image {
float: left;
margin: 5px 15px 0 0;
border: 4px solid #000000;
}
.byline {
margin: 0;
padding: 0 0 0 5px;
background: #645B43;
font-size: 9px;
}
/* Header */
#header {
width: 592px;
height: 112px;
margin: 0 auto;
background: url(thebarn-images/img2.jpg);
border: 4px solid #000000;
}
#header h1 {
float: left;
padding: 40px 0 0 20px;
text-transform: uppercase;
font-size: 36px;
color: #ACA283;
}
#header h2 {
float: right;
padding: 95px 5px 0 0;
font-size: 11px;
}
#header a {
text-transform: uppercase;
text-decoration: none;
font-size: 11px;
color: #ACA283;
}
/* Menu */
#menu {
width: 600px;
height: 30px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 120px;
height: 26px;
padding: 4px 0 0 0;
background: url(thebarn-images/img3.gif);
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ACA283;
}
#menu a:hover, #menu .active a {
background: url(thebarn-images/img4.gif);
color: #FFFFFF;
}
/* Content */
#content {
width: 592px;
margin: 0 auto;
background: #786E50 url(thebarn-images/img5.gif) repeat-y;
border: 4px solid #000000;
}
#colOne {
float: left;
width: 166px;
padding: 20px;
}
#colOne h3 {
margin: 5px 0 10px 0;
color: #786E50;
}
#colOne ul {
margin: 0;
padding: 0;
list-style: none;
}
#colOne a {
color: #645B43;
}
#colTwo {
float: right;
width: 346px;
padding: 20px;
}
/* Footer */
#footer {
width: 600px;
margin: 0 auto;
background: #000000;
}
#footer p {
margin: 0;
padding: 0 0 4px 0;
text-transform: lowercase;
text-align: center;
font-size: 9px;
color: #3C3728;
}
#footer a {
color: #786E50;
}
</style>
</head>
<body>
<div id="header">
<h1>The Barn</h1>
<h2>Free CSS Template</h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="http://www.free-css.com/" accesskey="1">Homepage</a></li>
<li><a href="http://www.free-css.com/" accesskey="1">My Blog</a></li>
<li><a href="http://www.free-css.com/" accesskey="1">Photo Gallery</a></li>
<li><a href="http://www.free-css.com/" accesskey="1">Favorite Sites</a></li>
<li><a href="http://www.free-css.com/" accesskey="1">Contact Me</a></li>
</ul>
</div>
<div id="content">
<div id="colOne">
<h3>Veroeros Etiam</h3>
<ul>
<li><a href="http://www.free-css.com/">Sed accumsan congue</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante elit nulla</a></li>
<li><a href="http://www.free-css.com/">Aliquam suscipit consequat</a></li>
<li><a href="http://www.free-css.com/">Cursus sed arcu sed</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Sed accumsan congue</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante elit nulla</a></li>
<li><a href="http://www.free-css.com/">Aliquam suscipit consequat</a></li>
<li><a href="http://www.free-css.com/">Cursus sed arcu sed</a></li>
<li><a href="http://www.free-css.com/">Sed accumsan congue</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante elit nulla</a></li>
<li><a href="http://www.free-css.com/">Aliquam suscipit consequat</a></li>
<li><a href="http://www.free-css.com/">Cursus sed arcu sed</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Sed accumsan congue</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante elit nulla</a></li>
<li><a href="http://www.free-css.com/">Aliquam suscipit consequat</a></li>
<li><a href="http://www.free-css.com/">Cursus sed arcu sed</a></li>
</ul>
</div>
<div id="colTwo">
<h2>Welcome to My Website</h2>
<p class="byline">Posted in <a href="http://www.free-css.com/">Uncategorized</a> by Farmer on the December 6th, 2006</p>
<p><strong>The Barn</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header photo is from PDPhoto.org. You're free to use this template for both commercial or personal use. I only ask that you link back to my site in some way.</p>
<p><strong><em>Enjoy! :)</em></strong></p>
<h3>Lorem Ipsum Dolorem</h3>
<p class="byline">Posted in <a href="http://www.free-css.com/">Uncategorized</a> by Farmer on the December 6th, 200 </p>
<p><img src="thebarn-images/img6.jpg" alt="" width="102" height="102" class="image" /></p>
<p>Sed tempus turpis vel quam molestie pulvinar. Suspendisse venenatis dolor semper ipsum. Quisque tempus erat ac mi. Aliquam semper, est nec hendrerit dignissim, ligula turpis sagittis purus, ut viverra velit eros at augue. Pellentesque mi nisi, porta eget, pharetra ac, sollicitudin sit amet, nisi. In sapien ligula lorem sollicitudin facilisis, sodales eget, tempus in, mauris. Cras risus sem, adipiscing non, convallis ac, consectetuer eu, dolor. In quam lorem ipsum dolor sit amet. Curabitur tempus aliquam nulla. Etiam eros.</p>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>Copyright (c) 2006 Sitename.com. All Rights Reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category