leonardo
<!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" lang="en">
<head>
<title>Leonardo</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<style type='text/css'>
/* Leonardo Template CSS First Light Web Design 2007 */
body {background: #000 url(leonardo-images/page_background.jpg) repeat;
color: #CCC;
font-size: 12px;
font-family: "palatino linotype", "trebuchet ms", "times new roman";
margin: 0;
padding: 0;
text-align: center;} /* Needed to center layout in old IE browsers. */
acronym, abbr {cursor: help;
border-bottom: 1px dotted #334755;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 25px 0;
padding: 0;}
ul {list-style-type: square;}
p {padding: 0;
margin: 0 0 25px 0;}
img {border: 0;
margin: 0 0 25px 0;}
h1 {font-size: 34px;}
h2 {font-size: 30px;}
h3 {font-size: 26px;}
h4 {font-size: 22px;}
h5 {font-size: 18px;}
h6 {font-size: 14px;}
a {color: #334755; text-decoration: underline; background-color: #E7EAEB;}
a:link {color: #334755; background-color: #E7EAEB;}
a:visited {color: #5B7E97; background-color: #E7EAEB;}
a:hover {color: #000; text-decoration: none; background-color: #E7EAEB;}
#container {width: 750px;
text-align: left;
padding: 5px 0 0;
margin: 10px auto;
background-color: #E7EAEB;
color: #334755;}
#header {width: 738px;
height: 100px;
background: #E7EAEB url(leonardo-images/header_background.jpg) repeat-x;
color: #334755;
margin: 0 5px;
padding: 0;
border: 1px solid #334755;
position: relative;}
#logo {float: left;
margin: 0 5px 0 0;
padding: 0;}
#header h1 {margin: 36px 0 0 20px;
padding: 0;
font-size: 29px;
line-height: 30px;}
#header h2 {margin: 1px 0 0 20px;
padding: 0;
font-size: 14px;
line-height: 15px;}
/* Begin Search Form CSS */
#search {position: absolute;
right: 20px;
top: 54px;}
#search input.text {margin-right: 5px;
vertical-align: middle;
border: 2px outset #334755;
padding: 0.25em;
width: 135px;
background-color: #E7EAEB;
color: #334755;}
#search input.submit
{background: #829099 url(leonardo-images/menu_background.jpg) bottom left repeat-x;
color: #334755;
border: 2px outset #334755;
vertical-align: middle;
font-weight: bold;
padding: 0.4em;
font-size: 0.8em;}
/* End Search Form CSS */
/* Begin main navigation menu. */
#menu {width: 738px;
height: 30px;
margin: 2px 5px 0;
background: #829099 url(leonardo-images/menu_background.jpg) repeat-x;
border: 1px solid #334755;}
#menu ul {list-style-type: none;
text-align: center;
margin: 0;
padding: 0;}
#menu li {display: inline;
margin: 0;
padding: 0;}
#menu a {text-decoration: none;
height: 30px;
padding: 0 12px;
margin: 0;
line-height: 30px;
display: block !important;
float: left !important;
background: #829099 url(leonardo-images/button.jpg) repeat-x;
color: #334755;
font-size: 16px;
font-weight: bold;
border-left: 1px solid #334755;}
#menu a.first {margin-left: 20px;}
* html #menu a.first {margin-left: 10px} /* IE Hack */
#menu a.last {border-right: 1px solid #334755;}
#menu a:hover, #menu a#selected {background: #ACCBDF url(leonardo-images/button.jpg) repeat-x;
background-position: 0 -30px;
color: #000;}
/* End main navigation menu. */
/* The leftcolumn division is your main content division. */
#leftcolumn {float: left;
width: 429px;
padding: 0;
margin: 0 0 0 25px;}
* html #leftcolumn {margin: 0 0 0 13px} /* IE Hack */
#rightcolumn {float: left;
width: 246px;
padding: 0;
margin: 0 0 0 25px;}
#rightcolumn h5, #rightcolumn h6 {border-bottom: 1px solid #98A5AE;
padding: 0 0 2px 0;}
#footer {width: 740px;
clear: both;
margin: 0 5px;
font-size: 11px;
text-align: center;}
#footer p {padding: 5px 0;
margin: 0;}
.left {float: left;
margin: 5px 5px 0 0;}
.right {float: right;
margin: 5px 0 0 5px;}
.justify {text-align: justify;}
/* Begin topics list. It could instead be used for a list of links. */
#topics {width: 246px;
margin-bottom: 25px;}
#topics ul {margin: 0;
padding: 0;
list-style-type: none;}
#topics li {margin: 0 0 1px;}
#topics a {display: block;
padding: 3px 0 3px 10px;
width: 230px;
background: #829099 url(leonardo-images/topics_background.jpg) repeat-x;
color: #334755;
border-left: 5px solid #334755;
border-top: 1px solid #334755;
border-bottom: 1px solid #334755;
border-right: 1px solid #334755;
text-decoration: none;}
#topics a:hover {border-left: 5px solid #4F6C7F;
border-top: 1px solid #4F6C7F;
border-bottom: 1px solid #4F6C7F;
border-right: 1px solid #4F6C7F;
background: #ACCBDF url(leonardo-images/topics_background.jpg) repeat-x;
background-position: 0 -25px;
color: #334755;}
/* End topics list. */
.date {float: right;
font-size: 11px;
margin: 7px 0 0;
font-style: italic;}
.divider {width: 740px;
height: 11px;
clear: both;
margin: 2px 5px 0;
background: #E7EAEB url(leonardo-images/divider.jpg) repeat-x;
color: #334755;}
.divider2 {margin: 0 0 25px;
border-bottom: 1px solid #98A5AE;}
p.featured {border: 1px solid #98A5AE;
padding: 5px 5px 20px;
background: #E7EAEB url(leonardo-images/gradient.jpg) repeat-x;
color: #334755;}
</style>
</head>
<body>
<div id="container">
<div id="header"> <img id="logo" style="width: 65px; height: 100px;" alt="" src="leonardo-images/logo.jpg" />
<form method="post" action="http://www.free-css.com/">
<div id="search">
<input type="text" class="text" maxlength="64" name="keywords" />
<input type="submit" class="submit" value="Search" />
</div>
</form>
<h1>Website Name</h1>
<h2>Your Site Slogan / Tagline Here</h2>
</div>
<div id="menu">
<ul>
<li><a id="selected" class="first" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
<li><a href="http://www.free-css.com/">News</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Faq</a></li>
<li><a class="last" href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
<div class="divider"> </div>
<div id="leftcolumn">
<h3>Leonardo</h3>
<p class="justify"><img class="left" style="width: 202px; height: 216px;" alt="" src="leonardo-images/davinci.jpg" />Nihil cum amicitia possum comparare; di hominibus nihil melius dant. Pecuniam alii malunt; alii, corpora sana; alii, famam gloriamque; alii, voluptates--sed hi viri nimium errant, quoniam illa sunt incerta et ex fortuna veniunt, non ex sapientia. Amicitia enim ex sapientia et amore et moribus bonis et virtute venit; sine virtute amicitia non potest esse. Si nullos amicos habes, habes vitam tyranni; si invenies amicum verum, vita tua erit beata. Hic puer reget mundum cui virtutes patris pacem dederunt. Et cum oratis non eritis sicut hypocritae, qui amant in synagogis et in angulis platearum stantes orare ut videantur ab hominibus: amen dico vobis, receperunt mercedem suam.</p>
<div class="divider2"> </div>
<h4>Header</h4>
<p class="justify"><img class="right" style="width: 131px; height: 131px;" alt="" src="leonardo-images/vitruvian.jpg" />Et cum oratis non eritis sicut hypocritae, qui amant in synagogis et in angulis platearum stantes orare ut videantur ab hominibus: amen dico vobis, receperunt mercedem suam. Tu autem cum orabis, intra in cubiculum tuum et, clauso ostio tuo, ora Patrem tuum in abscondito; et Pater tuus qui videt in abscondito reddet tibi . . . Sic ergo vos orabitis: Pater noster qui es in caelis, sanctificetur nomen tuum; adveniat regnum tuum; fiat voluntas tua sicut in caelo et in terra. Venit iam magna aetas nova; de caelo mittitur puer, qui vitam deorum habebit deosque videbit et ipse videbitur ab allis. Hic puer reget mundum cui virtutes patris pacem dederunt.</p>
</div>
<div id="rightcolumn">
<h5><span class="date">20 January 2007</span>Headline</h5>
<p class="justify">Nihil cum amicitia possum comparare; di hominibus nihil melius dant. Pecuniam alii malunt alii corpora sana alii famam.<br />
<a href="http://www.free-css.com/">Learn more . . .</a></p>
<h6>Topics</h6>
<div id="topics">
<ul>
<li><a href="http://www.free-css.com/">Topic One</a></li>
<li><a href="http://www.free-css.com/">Topic Two</a></li>
<li><a href="http://www.free-css.com/">Topic Three</a></li>
<li><a href="http://www.free-css.com/">Topic Four</a></li>
<li><a href="http://www.free-css.com/">Topic Five</a></li>
</ul>
</div>
<h6>Featured</h6>
<p class="featured">Tu autem cum orabis, intra in cubiculum tuum et, clauso ostio tuo, ora Patrem tuum in abscondito; et Pater tuus qui videt in abscondito reddet tibi . . . Sic ergo vos orabitis: Pater noster qui es in caelis, sanctificetur nomen tuum; adveniat regnum tuum; fiat voluntas tua sicut in caelo et in terra. Venit iam magna aetas nova; de caelo mittitur puer, qui vitam deorum habebit deosque videbit et ipse videbitur ab allis.</p>
</div>
<div class="divider"> </div>
<div id="footer">
<p>Copyright © 2007 Your Website. All rights reserved. Design by <a href="http://www.firstlightwebdesign.com">First Light</a>.</p>
</div>
</div>
</body>
</html>
Related examples in the same category