hotballoons
<!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">
<head>
<title>Hot Balloons</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #99ADD3;
}
h1, h2, h3 {
color: #345BA8;
}
h1 {
font-size: 152%;
}
h2 {
font-size: 129%;
}
h3 {
font-size: 100%;
font-weight: bold;
}
p, blockquote, ul, ol {
line-height: 180%;
}
blockquote, ul, ol {
margin-left: 3em;
}
a {
color: #345BA8;
}
a:hover {
text-decoration: none;
}
.boxed {
margin: 10px;
border: 1px solid #E9EAEB;
}
.boxed .title {
padding: 5px 10px;
background: #F7F7F7;
}
.boxed .content {
padding: 10px;
}
/* Page */
#page {
width: 740px;
margin: 0 auto;
background: url(hotballoons-images/img01.jpg) repeat-y left top;
}
#content {
float: right;
width: 533px;
}
#sidebar {
float: left;
width: 207px;
}
/* Logo */
#logo {
width: 533px;
height: 150px;
background: url(hotballoons-images/img02.jpg) no-repeat left top;
}
#logo h1 {
padding: 80px 0 0 19px;
letter-spacing: -1px;
font-size: 197%;
font-weight: normal;
}
#logo h2 {
padding: 0px 0 0 20px;
font-size: 85%;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
padding: 20px 0;
}
/* News */
#news {
}
#news .title {
padding: 15px;
}
#news .content {
padding: 0 15px;
font-size: 85%;
}
#news ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#news li {
margin-bottom: 15px;
}
/* Footer */
#footer {
padding: 5px 0;
background: #3F6EB6;
text-align: center;
font-size: 77%;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="page">
<div id="content">
<div id="logo">
<h1><a href="http://www.free-css.com/">Hot Balloons</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="welcome" class="boxed">
<h1 class="title">Welcome to Hot Balloons!</h1>
<div class="content">
<p><strong>Hot Balloons</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from PDPhoto.org. You"re free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
</div>
</div>
<div id="sample1" class="boxed">
<h2 class="title">Wisi Maecenas Ligula</h2>
<div class="content">
<ul>
<li><a href="http://www.free-css.com/">Mauris vulputate dolor sit amet</a></li>
<li><a href="http://www.free-css.com/">Nulla luctus eleifend purus</a></li>
<li><a href="http://www.free-css.com/">Praesent scelerisque lorem</a></li>
<li><a href="http://www.free-css.com/">Ut nonummy rutrum sem</a></li>
<li><a href="http://www.free-css.com/">Pellentesque tempus quam</a></li>
<li><a href="http://www.free-css.com/">Fusce ultrices fringilla metus</a></li>
<li><a href="http://www.free-css.com/">Praesent mattis condimentuml</a></li>
</ul>
</div>
</div>
<div id="sample2" class="boxed">
<h2 class="title">Pellentesque Tempus</h2>
<div class="content">
<ol>
<li><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</a></li>
<li><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent.</a></li>
<li><a href="http://www.free-css.com/">Quisque dictum integer nisl risus sagittis convallis rutrum.</a></li>
</ol>
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="menu">
<ul>
<li class="active"><a href="http://www.free-css.com/" accesskey="H" title="Homepage"><b>H</b>ome</a></li>
<li><a href="http://www.free-css.com/" accesskey="P" title="Browse Our Collections"><b>C</b>ollections</a></li>
<li><a href="http://www.free-css.com/" accesskey="S" title="Get Customer Support">Customer <b>S</b>upport</a></li>
<li><a href="http://www.free-css.com/" accesskey="U" title="About Us">About <b>U</b>s</a></li>
<li><a href="http://www.free-css.com/" accesskey="C" title="Contact Us"><b>C</b>ontact Us</a></li>
</ul>
</div>
<div id="news">
<h2 class="title">News & Updates</h2>
<div class="content">
<ul>
<li>
<h3>April 30: <a href="http://www.free-css.com/">Lorem Ipsum Dolor</a></h3>
<p>In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. <a href="http://www.free-css.com/">Read more…</a></p>
</li>
<li>
<h3>April 27: <a href="http://www.free-css.com/">Sagittis Et Convallis</a></h3>
<p>Donec leo, vivamus fermentum nibh in augue praesent lorem ipsum dolor a lacus at urna congue rutrum. <a href="http://www.free-css.com/">Read more…</a></p>
</li>
<li>
<h3>April 14: <a href="http://www.free-css.com/">Integer Nisl Risus</a></h3>
<p>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">Read more…</a></p>
</li>
<li>
<h3>April 12: <a href="http://www.free-css.com/">Vivamus Fermentum</a></h3>
<p>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">Read more…</a></p>
</li>
<li>
<h3>April 09: <a href="http://www.free-css.com/">Integer Nisl Risus</a></h3>
<p>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">Read more…</a></p>
</li>
</ul>
</div>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 1px;"></div>
</div>
<!-- end #page -->
<div id="footer">
<p>Copyright © 2007 Hot Balloons Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
</div>
</body>
</html>
Related examples in the same category