burgeon
?<!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>Burgeon | Flourish</title>
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="Burgeon is a free template that is simple, stunning, and standards-compliant." />
<style type='text/css'>
* { margin: 0; padding: 0; }
html
{
color: #cfcfcf;
background-color: #2e2f3d;
border-top: 10px solid #17181f;
font: normal 12px "Trebuchet MS", "Lucida Grande", Verdana, Tahoma, Sans-Serif;
}
/* Links */
a { text-decoration: none; font-weight: bold; border-bottom: 1px dotted #aaaaaa; }
a:link { color: #999dcf; border-bottom-color: #999dcf; }
a:visited { color: #8f93c4; border-bottom-color: #8f93c4; }
a:hover, a:active { color: #f2bc00; border-bottom-style: solid; border-bottom-color: #f2bc00; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 10px 0 15px; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: normal; border-bottom-width: 0; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4, h5, h6 { font-size: 20px; }
/* Lists */
ul, ol, dl
{
margin: 15px 25px;
line-height: 2.0em;
}
ol { margin-left: 30px; }
ul { list-style-type: square; }
/* Other Html Elements */
blockquote, pre
{
padding: 10px;
color: #bbbbbb;
margin: 20px 30px;
background-color: #44465a;
border: 1px solid #21222d;
}
code { font-family: Consolas, Monaco, Verdana, "Courier New"; font-size: .93em; }
abbr, acronym, cite { border-bottom: 1px dotted #cfcfcf; cursor: help; }
hr { visibility: hidden; height: 1px; clear: both; }
/* Structure */
body
{
clear: both;
width: 800px;
}
#wrapper
{
float: left;
width: 100%;
clear: both;
min-height: 170px;
background: #565873 url(burgeon-images/wrapper_bg.png) top left repeat-y;
}
#content
{
width: 55%;
float: left;
overflow: hidden;
}
#navigation
{
float: left;
clear: both;
width: 100%;
background-color: #494a60;
}
#logo
{
width: 5%;
float: left;
overflow: hidden;
background: transparent url(burgeon-images/logo.png) top center no-repeat;
}
#sidenotes
{
width: 40%;
float: left;
overflow: hidden;
}
#footer
{
float: left;
width: 100%;
clear: both;
background-color: #3e3f53;
}
#meta
{
width: 60%;
float: left;
overflow: hidden;
}
#flickr
{
width: 40%;
float: left;
overflow: hidden;
}
/* Navigation */
#navigation ul { margin: 0; list-style-type: none; float: left; }
#navigation li { float: left; }
#navigation a
{
float: left;
display: block;
color: #cacbe4;
padding: 5px 8px;
border-bottom-width: 0;
}
#navigation a:hover, #navigation a:active
{
color: #f2bc00;
background-color: #565873;
}
#navigation li.active a { color: #ffffff; background-color: #565873; }
/* Content */
.post { padding: 10px 20px; line-height: 1.6em; clear: both; }
.post-content p { margin-top: 10px; margin-bottom: 10px; }
p.post-footer
{
background-color: #44465a;
margin-bottom: 10px;
margin-top: 25px;
padding: 5px 10px;
color: #44465a;
}
p.post-footer strong { color: #bbbbbb; padding-right: 10px; border-right: 1px solid #777777; }
p.post-footer em { font-style: normal; padding-right: 10px; border-right: 1px solid #777777; }
p.post-footer a { border-bottom-width: 0; }
a.more { border-bottom-width: 0; }
/* Logo */
#logo img { visibility: hidden; }
/* Sidenotes */
#sidenotes h3 { margin-left: 10px; margin-top: 5px; }
#sidenotes ul { margin: 10px 0 0; padding: 0; list-style-type: none; }
#sidenotes a
{
display: block;
color: #bbbbbb;
margin-top: -1px;
padding: 5px 10px;
font-weight: normal;
border-top: 1px dotted #32333e;
border-bottom: 1px dotted #32333e;
}
#sidenotes a:hover { background-color: #44465a; color: #cfcfcf; }
#sidenotes a strong
{
color: #c4902a;
display: block;
padding-left: 20px;
background: transparent url(burgeon-images/pushpin.gif) 0 25% no-repeat;
}
#sidenotes a em
{
display: block;
}
/* Meta */
.cats, .date
{
padding: 0;
width: 35%;
float: left;
margin: 10px 0;
}
.cats { margin-left: 40px; margin-right: 20px; }
.date { margin-right: 40px; margin-left: 20px; }
.cats li,
.date li
{
list-style-image: url(burgeon-images/pushpin.gif);
}
.cats a,
.date a
{
display: block;
padding: 3px 8px;
border-bottom-color: #5b5c78;
}
.cats a:hover, .cats a:active,
.date a:hover, .date a:active
{
background-color: #4d4e66;
}
#copyright
{
clear: both;
padding: 10px;
background-color: #303140;
}
/* Flickr */
#flickr h3 { display: none; }
#flickr img
{
margin: 10px;
padding: 3px;
background-color: #44465a;
}
#flickr img:hover
{
background-color: #55576b;
border-color: #222438;
}
</style>
<!--[if lt ie 7]><link rel="stylesheet" type="text/css" media="screen,projection" href="ie-win.css" /><![endif]-->
<link rel="start" title="SimplyGold" href="http://www.free-css.com/" />
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="#showcase/free_templates/">Blog</a></li>
<li><a href="#showcase/commercial_templates/">News</a></li>
<li class="active"><a href="#about/">About</a></li>
<li><a href="#contact/">Contact</a></li>
</ul>
</div>
<div class="post">
<h2 class="post-title"><a href="#41" rel="bookmark" title="Read the rest of the entry">Captions with Javascript</a></h2>
<div class="post-content">
<p>Most awesome stuff has been happening recently in the world. For example, Pluto got demoted to the status of a dwarf planet.</p>
<p>Then there's the unearthing of the 3.5 million-year-old skeleton of Lucy's sister Salem in Ethiopia.</p>
<ul>
<li>Dukedom</li>
<li>Earldom</li>
<li>Monte Cresto</li>
</ul>
<ol>
<li>Excellent</li>
<li>Ecletic</li>
<li>Grandiloquent</li>
<li>Bombast</li>
</ol>
<p>I'm another paragraph. I don't really need this but I just wanted to show it. I need to write more before the blockquote
goes down far enough to give me a clear understanding of how much space it leaves between itself and whatever comes before it.</p>
<blockquote>
<p>Say, I'm a blockquote. </p>
<p>And there's no reason we can't have two paragraphs in a blockquote.</p>
</blockquote>
<p>You want to show a caption for your image? Me too. It's a pity that we can't use
the <code><caption></code> element with an image. I thought about using a def.
list to associate the image with its caption, but I really didn't want to go to the
extra trouble every single time. So: I decided to go the javascript way. An <acronym
title="Acronym">acronym</acronym>, an <abbr title="Abbreviation">abbreviation</abbr>,
a <cite title="Citation">citation</cite> or two, some <ins>inserted text</ins>, some <code>code that doesn't look like code</code>, and some <del>deleted text</del> go to
a bar <a href="#35" class="more" title="Read the rest of the article →">[...]</a> </p>
</div>
<p class="post-footer"> <strong>03 Oct 2006</strong>, <em><a href="#36">Javascript</a></em>, <a href="#37" class="comments-link">48 comments</a> </p>
</div>
</div>
<p id="logo"><img src="burgeon-images/logo.png" width="35" height="134" alt="Burgeon" /></p>
<div id="sidenotes">
<h3>Sidenotes</h3>
<ul>
<li> <a href="http://en.wikipedia.org/wiki/Alexander_of_Macedon"> <strong>Alexander the Great</strong> <em>10.03.2006</em> Alexander the Great, aka, Megas Alexandros, aka Alexander III. A brilliant
military strategist. </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Philip_III_of_Macedon"> <strong>Philip III Arrhidaeus</strong> <em>10.01.2006</em> Illegitimate son of Philip II, making him the half-brother of Alexander the
Great. </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Arsaces_II_of_Parthia"> <strong>Arsaces II of Parthia</strong> <em>09.30.2006</em> Known as "Artabanus" by early scholars but currently goes by the name "Arsaces." </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Balash_of_Persia"> <strong>Balash</strong> <em>09.30.2006</em> "Balash [...] was the brother and successor of Peroz I of Persia (457 – 484),
who had died in a battle against the Hephthalites (White Huns) who invalided Persia
from the east." Supposed to be new — that's new. ;-) </a> </li>
<li> <a href="http://en.wikipedia.org/wiki/Yazdegerd_II_of_Persia"> <strong>Yazdegerd II</strong> <em>09.28.2006</em> His name means "made by God," which unfortuantely didn't stop him from dying. He's
just except for his "strict religious policies..." So you mean he wasn't just? :p </a> </li>
</ul>
</div>
</div>
<div id="footer">
<div id="meta">
<ul class="cats">
<li><a href="#01">C#</a></li>
<li><a href="#02">ASP .NET</a></li>
<li><a href="#03">CSS/XHTML</a></li>
<li><a href="#04">Writing</a></li>
<li><a href="#05">Travel</a></li>
<li><a href="#06">Life</a></li>
<li><a href="#07">Microsoft</a></li>
<li><a href="#08">Apple</a></li>
<li><a href="#09">Technology</a></li>
<li><a href="#10">Procrastination</a></li>
</ul>
<ul class="date">
<li><a href="#11">October 2006</a></li>
<li><a href="#12">September 2006</a></li>
<li><a href="#13">August 2006</a></li>
<li><a href="#14">July 2006</a></li>
<li><a href="#15">June 2006</a></li>
<li><a href="#16">May 2006</a></li>
<li><a href="#17">April 2006</a></li>
<li><a href="#18">March 2006</a></li>
<li><a href="#19">February 2006</a></li>
<li><a href="#20">January 2006</a></li>
</ul>
</div>
<div id="flickr">
<h3>Flick'r</h3>
<img src="burgeon-images/friendship.png" width="130" height="130" alt="Flickr Image" /> <img src="burgeon-images/globe.png" width="130" height="130" alt="Flickr Image" /> <img src="burgeon-images/kid.png" width="130" height="130" alt="Flickr Image" /> <img src="burgeon-images/rings.png" width="130" height="130" alt="Flickr Image" /> </div>
<hr />
<p id="copyright"> Design copyright © 2006 <a href="http://www.nikhedonia.com/" title="SimplyGold">Sadhana Ganapathiraju</a> | <a href="#showcase/free_templates/" title="More Free Templates">Free Templates</a> | <a href="#showcase/commercial_templates/" title="More Commercial Templates">Commercial Templates</a> | <a href="http://validator.w3.org/check/referer" title="Xhtml 1.1 Strict">Xhtml Happy</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Css 2.0 Strict">Css Happy</a> </p>
</div>
</body>
</html>
Related examples in the same category