ebullient
<!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">
<head>
<title>Ebullient | High Spirited</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="description" content="Ebullient is a simple, stunning template that adheres to web standards." />
<meta name="keywords" content="ebullient,free templates,css,xhtml,web standards,sadhana,simplygold,sadhana ganapathiraju" />
<style type='text/css'>
* { margin: 0; padding: 0; }
html
{
color: #555555;
background: #ffffff url(ebullient-images/bg.png) top left repeat-x;
font: normal 12px/1.5em "Trebuchet MS", "Lucida Grande", Verdana, Sans-Serif;
}
/* Links */
a { text-decoration: none; font-weight: bold; border-bottom: 1px dotted #333333; }
a:link { color: #596146; border-bottom-color: #434e29; }
a:visited { color: #789160; border-bottom-color: #789160; }
a:hover, a:active { color: #000000; border-bottom-style: solid; }
/* Headings */
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 5px 0 10px; line-height: 1.2em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 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
{
margin: 1em 0;
line-height: 1.8em;
}
ol li { margin-left: 2.5em; }
ul { padding-left: 2em; list-style-type: square; }
/* 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;
background: #eeeeee url(ebullient-images/right_quotes.png) 95% 85% no-repeat;
}
code { font-family: Consolas, Monaco, Verdana, "Courier New"; font-size: .93em; }
abbr, acronym, cite { border-bottom: 1px dotted #333333; cursor: help; }
ins, del
{
padding-left: 18px;
background-repeat: no-repeat;
background-position: left center;
}
ins { font-weight: bold; text-decoration: none; background-image: url(ebullient-images/add.gif); }
del { background-image: url(ebullient-images/delete.gif); }
hr { clear: both; height: 1px; visibility: hidden; }
/* Structure */
#header
{
margin-top: 10px;
}
#navigation
{
width: 750px;
margin: 0 auto;
}
#featured
{
float: right;
padding: 27px 0 1px;
}
#wrapper
{
clear: both;
width: 770px;
margin: 0 auto;
background: #ffffff url(ebullient-images/wrapper_bg.png) top left repeat-y;
}
#content { margin-left: 10px; float: left; width: 450px; }
#sidenotes { float: right; width: 300px; margin-right: 10px; }
#footer
{
clear: both;
width: 770px;
margin: 0 auto;
text-align: center;
background: #333333 url(ebullient-images/footer_bg.png) top left repeat-y;
}
/* Header */
#header h1
{
min-height: 95px;
margin-left: 25px;
background: transparent url(ebullient-images/logo.png) bottom left no-repeat;
}
#header h1 a
{
display: block;
text-indent: -9999px;
}
#header h2
{
display: none;
}
/* Navigation */
#navigation ul
{
margin: 0;
padding: 0;
float: left;
line-height: 1.5em;
list-style-type: none;
}
#navigation li
{
float: left;
}
#navigation a
{
float: left;
display: block;
color: #a1bb62;
padding: 5px 8px;
margin-top: -6px;
border-bottom-width: 0;
}
#navigation a:hover,
#navigation a:active
{
color: #c9d8a3;
background-color: #585858;
}
#navigation li.active a
{
color: #3f4d1e;
background-color: #ffffff;
}
/* Content */
.post { padding: 10px 20px 0; }
h2.post-title { margin-bottom: 15px; }
.post-content p { margin-top: 10px; margin-bottom: 10px; }
p.post-footer
{
background-color: #dadada;
margin-bottom: 10px;
margin-top: 25px;
padding: 5px 10px;
color: #dadada;
}
p.post-footer strong { color: #333333; padding-right: 10px; border-right: 1px solid #a9a9a9; }
p.post-footer em { font-style: normal; padding-right: 10px; border-right: 1px solid #a9a9a9; }
p.post-footer a { border-bottom-width: 0; }
a.more { border-bottom-width: 0; }
.post-content p.img { float: left; margin: 0 15px 0 0; }
p.img img
{
float: left;
margin: 5px;
padding: 3px;
border: 1px solid #a3aa91;
}
p.img img:hover
{
background-color: #eeeeee;
}
p.pagination
{
float: left;
margin: 20px;
padding: 5px 10px;
border: 1px solid #c9c9c9;
background-color: #f9f9f9;
}
p.pagination a { border-bottom-width: 0; }
a.prev { float: left; padding-left: 10px; background: url(ebullient-images/prev.gif) center left no-repeat; }
a.next { float: right; padding-right: 10px; background: url(ebullient-images/next.gif) center right no-repeat; }
/* Sidenotes */
#sidenotes h3 { padding: 10px 10px 0; }
#sidenotes ul { margin: 10px 0 0; padding: 0; list-style-type: none; }
#sidenotes li a
{
clear: both;
float: right;
display: block;
color: #333333;
margin-top: -3px;
min-height: 150px;
padding: 5px 10px;
font-weight: normal;
width: 275px;
overflow: hidden;
border-top: 1px solid #c9c9c9;
border-left: 1px solid #c9c9c9;
border-bottom: 1px solid #c9c9c9;
}
#sidenotes a:hover { background-color: #f9f9f9; }
#sidenotes a strong
{
display: block;
}
#sidenotes a em
{
display: block;
}
#sidenotes img
{
float: left;
margin: 5px;
padding: 3px;
margin-right: 10px;
border: 1px solid #a3aa91;
}
/* Footer */
#footer .block { float: left; width: 240px; padding: 10px 5px; text-align: left; }
#footer .block h3 { padding: 0 10px 5px 13px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
#footer .block ul { padding: 0 10px 20px; list-style-type: none; }
#footer .block ul a
{
width: 100%;
display: block;
margin-top: -1px;
padding: 5px 10px;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
}
#footer .block ul a:hover, #footer .block ul a:active
{
background-color: #afb5a0;
}
#footer p { padding: 0 15px; }
#footer .block p { margin: 15px 0; }
#footer a { color: #666d54; border-bottom-color: #666d54; }
#footer a:hover, #footer a:active { color: #484d3b; border-bottom-color: #484d3b; }
#footer p.copyright { clear: both; background-color: #b8bea8; padding: 10px 15px; margin: 0 10px; }
</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="header">
<h1><a href="http://www.free-css.com/" title="Go Home">Ebullient</a></h1>
<h2>Become high-spirited. Right now.</h2>
</div>
<div id="navigation">
<ul>
<li><a href="http://www.free-css.com/" title="SimplyGold">SimplyGold</a></li>
<li><a href="#showcase/free_templates/" title="More Free Templates by SimplyGold">Free Templates</a></li>
<li><a href="#showcase/commercial_templates/" title="Commercial Templates by SimplyGold">Commercial Templates</a></li>
<li class="active"><a href="#about/" title="About Sadhana">About</a></li>
<li><a href="#contact/" title="Contact Sadhana">Contact</a></li>
</ul>
</div>
<p><img id="featured" src="ebullient-images/featured.png" width="750px" height="150px" alt="Featured Image" /></p>
<div id="wrapper">
<div id="content">
<div class="post">
<h2 class="post-title"><a href="#41" rel="bookmark" title="Read the rest of the entry">Images and 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 <code>code that doesn't look at
all 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 class="post">
<h2 class="post-title"><a href="#41" rel="bookmark" title="Read the rest of the entry">Last of the Books</a></h2>
<div class="post-content">
<p class="img"><img src="ebullient-images/sample_pic.jpg" width="250px" height="171px" alt="Sample Picture Here" /></p>
<p> Praesent eget sem nec sem pretium mattis. Pellentesque iaculis sapien. In sem quam, molestie ut, sagittis non,
auctor a, leo. <a href="#89">In hac habitasse platea dictumst</a>. Nunc augue diam, lacinia non, vulputate sce <a href="#92">lerisque, pretium ut</a>, lectus. </p>
<p> Fusce justo. <abbr title="Fake non-abbreviation">I'm abbr.</abbr> Lalala. <acronym title="I'm a fake acronym">Acro </acronym>. Donec magna tortor, dictum in, suscipit a, posuere in, erat. Quisque non velit. Nulla quis nunc. </p>
<p> Vestibulum vel odio eget metus faucibus ullamcorper. Proin sodales urna quis velit. Mauris eros diam, egestas eu,
consectetuer nec, semper sit amet, eros. Fusce ac libero. Aliquam sapien. Aliquam erat volutpat. Cras varius orci
sed pede. Fusce eleifend tincidunt odio. Aenean magna. Duis sed leo et mi fermentum viverra. Phasellus nisi turpi,
adipiscing sed, adipiscing placerat, convallis ac, sem. Aenean at turpis in nisi pulvinar ullamcorper. Ut sed nib.
Aenean orci lacus, porta ac, aliquet id, malesuada a, nisl. Curabitur venenatis gravida nisi. Aliquam mattis. Nula
sapien dui, consequat a, varius a, laoreet a, metus. In feugiat orci eget sapien. Etiam ultrices, leo vel gravidar
sodales, eros eros tristique sem, at vulputate purus nisi vel neque. Donec vel enim. Quisque a arcu in ligula moll
is placerat. Aliquam imperdiet. </p>
<blockquote>
<p> Sed urna. Duis vitae sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Nunc sit amet nunc. Cras augue urna, posuere eu, porttitor ut, tempor vitae, diam. Vivamus vel velit. Vestibulum in sapi.
Maecenas nisl ligula, hendrerit eu, consequat nec, euismod id, neque. Donec mi risus, varius at, condimentum vitae, tinci
dunt id, tellus. Nullam magna nisi, consectetuer vel, scelerisque nec, viverra eget, justo. Ut porta. Suspendisse conguer
risus in libero dictum eleifend. Curabitur tempor lectus vel pede. Fusce luctus. Ut eu felis. Nulla ligula erat, tempor
in, pretium non, elementum non, mauris. Nulla facilisi. Curabitur eu ligula. </p>
</blockquote>
<p> <del>Nam hendrerit, dolor ac venenatis venenatis.</del> Also stuff is happening. More stuff. <ins>Diam urna posuere velit</ins>, at imperdiet turpis urna interdum nunc. </p>
</div>
<p class="post-footer"> <strong>01 Oct 2006</strong>, <em><a href="#36">Fisterkit</a></em>, <a href="#37" class="comments-link">21 comments</a> </p>
</div>
<p class="pagination"> <a href="http://www.free-css.com/" class="prev">Previous</a> <a href="http://www.free-css.com/" class="next">Next</a> </p>
</div>
<div id="sidenotes">
<h2><a href="http://www.free-css.com/">Sidenotes</a></h2>
<ul>
<li> <a href="http://en.wikipedia.org/wiki/Alexander_of_Macedon"> <strong>Alexander the Great</strong> <em>10.03.2006</em> <img src="ebullient-images/1.png" width="150" height="150" alt="Image" /> Alexander the Great, aka, Megas Alexandros, aka Alexander III. A brilliant
military strategist. </a>
<hr />
</li>
<li> <a href="http://en.wikipedia.org/wiki/Philip_III_of_Macedon"> <strong>Philip III Arrhidaeus</strong> <em>10.01.2006</em> <img src="ebullient-images/2.png" width="150" height="150" alt="Image" /> Illegitimate son of Philip II, making him the half-brother of Alexander the
Great. </a>
<hr />
</li>
<li> <a href="http://en.wikipedia.org/wiki/Arsaces_II_of_Parthia"> <strong>Arsaces II of Parthia</strong> <em>09.30.2006</em> <img src="ebullient-images/3.png" width="150" height="150" alt="Image" /> Known as "Artabanus" by early scholars but currently goes by the name "Arsaces." </a>
<hr />
</li>
<li> <a href="http://en.wikipedia.org/wiki/Balash_of_Persia"> <strong>Balash</strong> <em>09.30.2006</em> <img src="ebullient-images/4.png" width="150" height="150" alt="Image" /> "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>
<hr />
</li>
<li> <a href="http://en.wikipedia.org/wiki/Yazdegerd_II_of_Persia"> <strong>Yazdegerd II</strong> <em>09.28.2006</em> <img src="ebullient-images/5.png" width="150" height="150" alt="Image" /> 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>
<hr />
</li>
</ul>
</div>
<hr />
</div>
<div id="footer">
<div class="block">
<h3>Popular Posts</h3>
<ul>
<li><a href="#26">Duke and Duchess</a></li>
<li><a href="#27">Viscount and Viscountess</a></li>
<li><a href="#28">Earl and Countess</a></li>
<li><a href="#29">Baron and Baroness</a></li>
<li><a href="#30">Human and Chimpanzee</a></li>
<li><a href="#31">Boy and Girl</a></li>
</ul>
</div>
<div class="block">
<h3>Recent Posts</h3>
<ul>
<li><a href="#26">Empires That Rise</a></li>
<li><a href="#27">Kleenex is Great</a></li>
<li><a href="#28">One Word After Another</a></li>
<li><a href="#29">Step Right, Then Left</a></li>
<li><a href="#30">Dasani: Purified Water</a></li>
<li><a href="#31">Drawing Unleashed</a></li>
</ul>
</div>
<div class="block">
<h3>About</h3>
<p>Ebullient is a beautiful free template that adheres to web standards released under the <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons License</a>.
credit and link to me on each page. Also, don't use the templates on any site that's of
illegal or otherwise nasty nature.</p>
<p>If you want a personalied web site, don't hesitate to <a href="#contact/"> contact me</a>.</p>
<p>Enjoy!</p>
</div>
<p class="copyright">Design by <a href="http://www.nikhedonia.com/" title="SimplyGold">Sadhana Ganapathiraju</a> | All Rights Reserved | <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