tropical-evening
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Tropical Evening</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
/*#############################################################
Name: Bitter Sweet
Date: 2006-10-02
Description: Lime flavoured template with two columns.
Author: Viktor Persson
URL: http://templates.arcsin.se
Feel free to use and modify but please provide credits.
#############################################################*/
/* standard elements */
* {
margin: 0;
padding: 0;
}
a {color: #682;}
a:hover {color: #9A6;}
body {
background: #5F8000 url(tropical-evening-img/bg.gif) repeat-y center top;
color: #333;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}
input {
color: #555;
font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
ul {margin-left: 1.2em;}
li {list-style-image: url(tropical-evening-img/li.gif);}
h1 {font-size: 1.4em;}
blockquote {
background: #FFF;
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
color: #333;
display: block;
font-size: 0.9em;
margin-bottom: 1.2em;
padding: 6px 12px;
}
blockquote p {padding: 3px 0;}
h1,h2,h3 {color: #654;}
/* misc */
.clearer {clear: both;}
/* structure */
.container {
background: url(tropical-evening-img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 750px;
}
/* top */
.top {
background: #782716;
font: normal 2.4em Verdana,sans-serif;
height: 60px;
margin: 0 auto;
width: 678px;
}
.top a {
color: #FFF;
display: block;
line-height: 60px;
text-decoration: none;
width: 100%;
}
.top span {padding-left: 24px;}
.top a:hover {
background: #F49501;
color: #FFF;
}
/* header */
.header {
background: url(tropical-evening-img/header.gif) no-repeat;
height: 136px;
margin: 0 auto;
width: 678px;
}
/* item */
.item {clear: both;}
.item .date {
background: url(tropical-evening-img/bgdate.gif) no-repeat;
color: #000;
float: left;
height: 40px;
text-align: center;
width: 36px;
}
.item .date div {padding-top: 4px;}
.item .date span {font: normal 1.6em serif;}
.item .content {
float: left;
width: 472px;
}
.item h1 {
background: #782716;
color: #FFF;
line-height: 40px;
padding-left: 16px;
}
.item .body {padding: 12px 18px;}
/* main */
.main {float: left;}
/* navigation */
.navigation {
float: left;
margin-left: 1px;
width: 205px;
}
.navigation h1 {
background: #F49501;
color: #000;
font-size: 1.3em;
line-height: 40px;
padding-left: 12px;
}
.navigation ul {margin: 0; padding: 0;}
.navigation li {
border-bottom: 1px solid #F49501;
list-style: none;
}
.navigation li a {
background: #E8F6BF url(tropical-evening-img/bgnavigation.gif) repeat-x;
color: #553;
display: block;
padding: 8px 4px 8px 12px;
text-decoration: none;
}
.navigation li a:hover {
background: #F0FFC6;
color: #553;
}
/* footer */
.footer {
background: url(tropical-evening-img/bgfooter.gif) repeat-x;
color: #FFF;
font-size: 1.1em;
line-height: 40px;
margin: 0 auto;
text-align: center;
width: 700px;
}
.footer a {color: #FFF;}
.footer a:hover {color: #FAFCB0;}
</style>
</head>
<body>
<div class="container">
<div class="top"> <a href="http://www.free-css.com/"><span>Tropical Evening</span></a> </div>
<div class="header"></div>
<div class="main">
<div class="item">
<div class="date">
<div>OCT</div>
<span>01</span> </div>
<div class="content">
<h1>Porttitor posuere</h1>
<div class="body">
<p>In
hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="http://www.free-css.com/">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>
<blockquote>
<p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sedpurus.</p>
</blockquote>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="http://www.free-css.com/">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.</p>
</div>
</div>
</div>
<div class="item">
<div class="date">
<div>SEP</div>
<span>30</span> </div>
<div class="content">
<h1>Adipiscing</h1>
<div class="body">
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus trum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>
<ul>
<li>Tristique</li>
<li>Aenean</li>
<li>Pretium</li>
</ul>
<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
</div>
</div>
</div>
</div>
<div class="navigation">
<h1>Something</h1>
<ul>
<li><a href="http://www.free-css.com/">pellentesque</a></li>
<li><a href="http://www.free-css.com/">sociis natoque</a></li>
<li><a href="http://www.free-css.com/">semper</a></li>
<li><a href="http://www.free-css.com/">convallis</a></li>
</ul>
<h1>Another thing</h1>
<ul>
<li><a href="http://www.free-css.com/">consequat molestie</a></li>
<li><a href="http://www.free-css.com/">sem justo</a></li>
<li><a href="http://www.free-css.com/">semper</a></li>
<li><a href="http://www.free-css.com/">sociis natoque</a></li>
</ul>
<h1>Third and last</h1>
<ul>
<li><a href="http://www.free-css.com/">sociis natoque</a></li>
<li><a href="http://www.free-css.com/">magna sed purus</a></li>
<li><a href="http://www.free-css.com/">tincidunt</a></li>
<li><a href="http://www.free-css.com/">consequat molestie</a></li>
</ul>
</div>
<div class="clearer"><span></span></div>
<div class="footer"> 2007 <a href="http://www.free-css.com/">CSS Templates</a>. Template design by <a href="http://www.webpagedesign.com.au">Art for the web</a> and <a href="http://templates.arcsin.se">Arcsin</a> </div>
</div>
</body>
</html>
Related examples in the same category