bucolic
?<!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" xml:lang="en" lang="en">
<head>
<title>Bucolic | Pastoral and Rural</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="Sadhana Ganapathiraju" />
<meta name="copyright" content="Copyright 2006 Sadhana Ganapathiraju" />
<meta name="keywords" content="bucolic, xhtml, css, web standards, free templates, blog, personal site" />
<meta name="description" content="Bucolic is a free template that is beautiful and standards-compliant." />
<style type='text/css'>
* { margin: 0; padding: 0; }
html
{
color: #999999;
background-color: #2f2a3e;
font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Sans-Serif;
}
/* Links */
a { text-decoration: none; font-weight: bold; border-bottom: 1px dotted #333333; }
a:link { color: #2f2a3e; border-bottom-color: #2f2a3e; }
a:visited { color: #51476a; border-bottom-color: #51476a; }
a:hover, a:active { color: #000000; border-bottom-color: #000000; border-bottom-style: solid; }
a.offsite { padding-right: 15px; background: transparent url(bucolic-images/offsite.gif) right center no-repeat; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.2em; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4, h5, h6 { font-size: 20px; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: normal; border-bottom-width: 0; }
/* Lists */
ul, ol
{
margin: 1em 0;
line-height: 1.8em;
}
ol li { margin-left: 2.5em; }
ul { padding-left: 2em; list-style-type: square; }
/* Images */
.drop-shadow
{
float: left;
position: relative;
margin: 10px 3px 0 10px !important;
margin: 10px 3px 0 5px;
background: transparent url(bucolic-images/drop_shadow.png) bottom right no-repeat !important;
background: transparent url(bucolic-images/drop_shadow_ie.gif) bottom right no-repeat;
}
.drop-shadow img
{
padding: 4px;
display: block;
position: relative;
margin: -6px 6px 6px -6px;
background-color: #ffffff;
border: 1px solid #a9a9a9;
}
.drop-shadow p
{
right: 11px;
bottom: 0px;
color: #eeeeee;
padding: 5px 10px;
position: absolute;
background-color: #2e333b;
border-top: 1px solid #111111;
}
.drop-shadow a { border-bottom-width: 0; }
/* Other Html Elements */
blockquote
{
clear: both;
padding: 1em;
margin: 2em 3em;
font-size: 0.9em;
line-height: 1.7em;
background-color: #eeeeee;
border: 1px solid #a9a9a9;
}
code { font-family: Consolas, Monaco, Verdana, "Courier New"; font-size: .93em; }
abbr, acronym, cite { border-bottom: 1px dotted #333333; cursor: help; }
ins { font-weight: bold; text-decoration: none; }
hr { clear: both; height: 1px; visibility: hidden; }
/* Structure */
body { background-color: #c1bdcc; color: #2f2a3e; }
#header
{
width: 100%;
background-color: #000000;
border-top: 10px solid #31274c;
}
#navigation
{
width: 100%;
float: left;
clear: both;
background-color: #51476a;
}
#about
{
clear: both;
color: #d5cceb;
background-color: #73698c;
}
#content
{
clear: both;
width: 850px;
margin: 0 auto;
padding: 25px 0;
background-color: #c1bdcc;
}
#footer { color: #999999; clear: both; background-color: #2f2a3e; padding: 20px 0; text-align: center; }
/* Header */
#header h1
{
width: 850px;
height: 100px;
margin: 0 auto;
background: #000000 url(bucolic-images/header.png) top left no-repeat;
}
#header h1 a
{
height: 100px;
display: block;
text-indent: -9999px;
}
/* Navigation */
#navigation ul { list-style-type: none; margin: 0 auto; padding: 0; width: 850px; }
#navigation li { float: left; }
#navigation a
{
float: left;
display: block;
color: #c5c5c5;
padding: 5px 8px;
margin-top: 10px;
border-bottom-width: 0;
}
#navigation li.active a
{
color: #ffffff;
background-color: #73698c;
}
#navigation a:hover, #navigation a:active { color: #eeeeee; background-color: #645a7d; }
/* About */
#about dl { margin: 0 auto; width: 850px; padding: 20px 0; }
#about dt { padding: 10px 0; }
#about dd { padding: 5px 0; margin-left: 25px; }
#about dt strong { color: #1c1927; }
#about dt em { padding: 0 2px; }
#about dd a { margin-left: 25px; }
#about a cite { border-bottom-width: 0; }
/* Content */
#content .drop-shadow p { bottom: 11px; }
/* Footer */
#footer p { margin: 0 auto; width: 850px; padding: 5px 0; }
#footer a { color: #776d91; border-bottom-color: #776d91; }
#footer a:hover, #footer a:active { color: #968ab3; border-bottom-color: #968ab3; }
</style>
<link rel="start" title="SimplyGold" href="http://www.free-css.com/" />
<script type="text/javascript" src="caption.js"></script>
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/" title="Go Home" rel="bookmark">Bucolic</a></h1>
</div>
<div id="navigation">
<ul>
<li class="active"><a href="http://www.free-css.com/" title="SimplyGold">Home</a></li>
<li><a href="#notebook/">Blog</a></li>
<li><a href="#showcase/">Our Portfolio</a></li>
<li><a href="#about/">About Us</a></li>
<li><a href="#contact/">Contact Us</a></li>
</ul>
</div>
<div id="about">
<dl>
<dt><strong>bu-col-ic</strong> [<em>byoo-<strong>kol</strong>-ik</em>]</dt>
<dd>1. of or pertaining to shepherds; pastoral.</dd>
<dd>2. of, pertaining to, or suggesting an idyllic rural life.</dd>
<dd>3. a pastoral poem.</dd>
<dd><a class="offsite" href="http://dictionary.reference.com/search?q=bucolic&x=0&y=0"> — <cite>dictionary.com</cite></a></dd>
</dl>
</div>
<div id="content">
<div class="drop-shadow"> <a href="#01"><img src="bucolic-images/china_village.png" width="200" height="150" alt="Chinese village alley [Credit: archartist at stock.xchng]" class="captionated" /></a> </div>
<div class="drop-shadow"> <a href="#02"><img src="bucolic-images/pump_it.png" width="200" height="150" alt="A pump in a village [Credit: stock.xchng]" class="captionated" /></a> </div>
<div class="drop-shadow"> <a href="#02"><img src="bucolic-images/rusty_lock.png" width="200" height="150" alt="A rusty lock [Credit: stock.xchng]" class="captionated" /></a> </div>
<hr />
<div class="drop-shadow"> <a href="#02"><img src="bucolic-images/fresh_eggs.png" width="200" height="150" alt="A pump in a village [Credit: stock.xchng]" class="captionated" /></a> </div>
<div class="drop-shadow"> <a href="#02"><img src="bucolic-images/dry_grass.png" width="200" height="150" alt="A pump in a village [Credit: stock.xchng]" class="captionated" /></a> </div>
<div class="drop-shadow"> <a href="#02"><img src="bucolic-images/tori.png" width="200" height="150" alt="A pump in a village [Credit: stock.xchng]" class="captionated" /></a> </div>
<hr />
</div>
<div id="footer">
<p>Design by <a href="http://www.nikhedonia.com/" title="SimplyGold">Sadhana Ganapathiraju</a> | Released
under <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" title="Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License"> Creative Commons</a> license.</p>
<p>Try more <a href="#showcase/free_templates/" rel="bookmark">free templates</a> or <a href="#showcase/commercial_templates/" rel="bookmark">commercial templates</a></p>
<p> <a href="#31">Legal</a> | <a href="#32">Terms of Service</a> | <a href="#33">Privacy Statement</a> | <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict">Xhtml</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS 2.0 Strict">Css</a> </p>
</div>
</body>
</html>
Related examples in the same category