pomodoro
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Pomodoro by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 20px 0;
padding: 0;
background: #FFFFFF url(pomodoro-images/img1.gif);
font: normal small Arial, Helvetica, sans-serif;
color: #666666;
}
h1, h2, h3 {
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-style: italic;
color: #A33000;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1.2em;
margin: 0;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
text-decoration: none;
color: #A33000;
}
a:hover {
text-decoration: underline;
}
li {
color: #A33000;
}
li a:link {
border-bottom: 1px dotted #A33000;
color: #666666;
}
li a:hover {
border-bottom: 1px solid #A33000;
text-decoration: none;
color: #A33000;
}
img.float {
float: left;
margin: 5px 15px 10px 0;
border: 5px solid #A33000;
}
/* Header */
#header {
width: 700px;
height: 160px;
margin: 0 auto;
padding: 10px;
background: #A33000 url(pomodoro-images/img3.jpg) no-repeat 10px 10px;
}
#header * {
margin: 0;
padding: 0;
float: left;
text-decoration: none;
font-size: 18px;
font-style: italic;
color: #FFFFFF;
}
#header h1 {
padding: 128px 0 0 18px;
font-weight: bold;
}
#header h2 {
padding: 128px 0 0 0;
}
/* Content */
#content {
width: 700px;
margin: 0 auto;
background: #FFFFFF url(pomodoro-images/img2.gif);
border: 10px solid #A33000;
border-top: none;
}
#colOne {
float: left;
width: 180px;
padding: 20px 10px;
}
#colOne ul {
margin-left: 0;
padding-left: 1em;
list-style: square inside;
}
#colTwo {
float: left;
width: 280px;
padding: 20px 10px;
}
#colThree {
float: left;
width: 180px;
padding: 20px 10px;
}
#colThree ul {
margin-left: 0;
padding-left: 1em;
list-style: square inside;
}
/* Footer */
#footer {
padding: 10px;
text-align: center;
font-size: smaller;
}
#footer * {
color: #D6947A;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="#">Pomodoro</a></h1>
<h2><a href="http://freecsstemplates.org/">by Free Css Templates </a></h2>
</div>
<div id="content">
<div id="colOne">
<h2>Menu</h2>
<ul>
<li><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title="">About Us</a></li>
<li><a href="#" accesskey="3" title="">Products</a></li>
<li><a href="#" accesskey="4" title="">Services</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
</ul>
<h2>Recent Updates</h2>
<h3>Etiam suscipit et</h3>
<p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="#">More…</a></p>
<h3>Fusce dolor totique</h3>
<p>Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada. <a href="#">More…</a></p>
<h3>Nunc pellentesque</h3>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">More…</a></p>
<h3>Suspendis potenti</h3>
<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. <a href="#">More…</a></p>
</div>
<div id="colTwo">
<h2>Welcome to Pomodoro!</h2>
<p><em><strong>Pomodoro</strong></em> is a free template from <a href="http://freecsstemplates.org/"><strong>Free CSS Templates</strong></a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. All photos are from <a href="http://pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://freecsstemplates.org/">my site</a> in some way. Enjoy :)</p>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
<ol>
<li><a href="#">Suspendisse quis gravida massa felis.</a></li>
<li><a href="#">Vivamus sagittis bibendum erat.</a></li>
<li><a href="#">Nullam et orci in erat viverra ornare.</a></li>
<li><a href="#">Suspendisse quis gravida massa felis.</a></li>
<li><a href="#">Curabitur malesuada turpis nec ante.</a></li>
</ol>
<h3> </h3>
<h3>Lorem Ipsum Dolore </h3>
<p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. </p>
<img src="pomodoro-images/img4.jpg" alt="" width="120" height="160" class="float" />
<p>Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum.</p>
</div>
<div id="colThree">
<h2>Nunc pellentese</h2>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">More…</a></p>
<h3>Ipsum Dolorem</h3>
<ul>
<li><a href="#">Sed bibendum tellus nibh</a></li>
<li><a href="#">Vivamus commodo iaculis</a></li>
<li><a href="#">Sed bibendum risus atis</a></li>
<li><a href="#">Nulla ullamcorper arcu </a></li>
<li><a href="#">Vestibulum ultricies dui </a></li>
<li><a href="#">Proin a dui non elit</a></li>
<li><a href="#">Praesent utumsan ipsum </a></li>
<li><a href="#">In posuere risus ac felis</a></li>
<li><a href="#">Proin facilisis sagittis</a></li>
<li><a href="#">In fringilla aliquet odio</a></li>
<li><a href="#">Quisque sodales arcu</a></li>
<li><a href="#">Nam tincidunt lipsum </a></li>
</ul>
<h3>Nulla vel mollis</h3>
<ul>
<li><a href="#">Pellentesque consequat</a></li>
<li><a href="#">Morbi condimentum </a></li>
<li><a href="#">Cras tempor pulvinar dolor</a></li>
<li><a href="#">Pellentesque vel magna</a></li>
<li><a href="#">Purus placerat imperdiet</a></li>
<li><a href="#">Duis ultrices pede vel ip</a></li>
<li><a href="#">Etiam eu libero eget est</a></li>
<li><a href="#">Faucibus fermentum.</a></li>
<li><a href="#">Vestibulum vulputate felis</a></li>
<li><a href="#">Cras sollicitudin pede et</a></li>
<li><a href="#">Maecenas interdum ante</a></li>
<li><a href="#">Nullam lacinia eleifend elit</a></li>
<li><a href="#">Curabitur cursus tristique</a></li>
<li><a href="#">Curabitur convallis feugia</a></li>
<li><a href="#">Donec aliquam mauris at</a></li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>Copyright © 2006 Pomodoro. Designed by <a href="http://freecsstemplates.org"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>
Related examples in the same category