carbonated
<!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>Carbonated</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 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: small;
}
h1, h2, h3 {
margin-bottom: 20px;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #333333;
}
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.4em; font-weight: bold; }
p, blockquote, ul, ol {
margin-bottom: 1.5em;
line-height: 1.8em;
}
blockquote, ul, ol {
margin-left: 3em;
}
blockquote {
margin-right: 3em;
}
a {
color: #0065CC;
}
a:hover {
text-decoration: none;
color: #CC0000;
}
img { border: none; }
img.left {
float: left;
margin: 0 15px 15px 0;
}
img.right {
float: right;
margin: 0 15px 0 15px;
}
hr { display: none; }
.hr {
height: 36px;
margin-bottom: 15px;
background: url(carbonated-images/img06.gif) repeat-x left center;
}
/* Header */
#header {
width: 700px;
height: 150px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
width: 240px;
height: 150px;
text-align: center;
}
#logo h1 {
margin: 0;
padding-top: 50px;
font-size: 2.6em;
}
#logo h2 {
font-size: 1em;
}
#logo a {
text-decoration: none;
color: #333333;
}
/* Menu */
#menu {
float: right;
width: 460px;
height: 147px;
background: #0065CC url(carbonated-images/img01.gif) no-repeat left bottom;
border-top: 3px solid #000099;
}
#menu ul {
margin: 0;
padding-top: 60px;
text-align: center;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
padding: 0 20px;
border-left: 1px solid #FFFFFF;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu .first a {
border: none;
}
/* Page */
#page {
width: 700px;
margin: 0 auto;
background: url(carbonated-images/img03.gif) repeat-y;
}
/* Content */
#content {
float: right;
width: 420px;
padding: 20px;
}
/* Sidebar */
#sidebar {
float: left;
width: 200px;
padding: 60px 20px 20px 20px;
background: url(carbonated-images/img02.gif) no-repeat;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#sidebar li {
margin-bottom: 20px;
}
#sidebar li ul {
list-style: disc inside;
}
#sidebar li li {
margin: 0;
}
#sidebar dl {
}
#sidebar dt {
}
#sidebar dd {
margin-bottom: 10px;
}
#sidebar ol {
margin-left: 0;
list-style-position: inside;
}
#sidebar h2 {
margin-bottom: 20px;
padding-bottom: 10px;
background: url(carbonated-images/img05.gif) repeat-x left bottom;
color: #000000;
}
#sidebar blockquote {
margin-left: 0;
margin-right: 0;
}
#sidebar a {
color: #FFFFFF;
}
/* Footer */
#footer {
width: 700px;
margin: 0 auto;
padding: 10px 0;
background: url(carbonated-images/img06.gif) repeat-x;
border-top: 1px solid #FFFFFF;
font-size: x-small;
}
#footer p {
margin: 0;
line-height: normal;
color: #999999;
}
#footer a {
color: #999999;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="http://www.free-css.com/">Carbonated</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="menu">
<ul>
<li class="first"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<p><img src="carbonated-images/img04.jpg" alt="" width="420" height="200" /></p>
<h2>Welcome to Carbonated!</h2>
<p><strong>Carbonated</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>Enjoy :)</em></p>
<div class="hr">
<hr />
</div>
<h2>Examples of Common Tags</h2>
<p>This is an example of a paragraph followed by a blockquote:</p>
<blockquote>
<p>“Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio.”</p>
</blockquote>
<h3>Heading Level Three</h3>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh.</p>
<p>This is another example of a paragraph followed by an ordered list:</p>
<p>An ordered list example:</p>
<ol>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number thre</li>
</ol>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>News & Events</h2>
<dl>
<dt><strong>April 5, 2007</strong></dt>
<dd>In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. <a href="http://www.free-css.com/">More…</a></dd>
<dt><strong>April 2, 2007</strong></dt>
<dd>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. <a href="http://www.free-css.com/">More…</a></dd>
<dt><strong>March 30, 2007</strong></dt>
<dd>Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. <a href="http://www.free-css.com/">More…</a></dd>
</dl>
</li>
<li>
<h2>Numbered List</h2>
<ol>
<li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
<li><a href="http://www.free-css.com/">Vestibulum luctus venenatis</a></li>
<li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
<li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
<li><a href="http://www.free-css.com/">Aenean elementum facilisis</a></li>
<li><a href="http://www.free-css.com/">Ut tincidunt elit vitae augue</a></li>
<li><a href="http://www.free-css.com/">Sed quis odio sagittis leo</a></li>
</ol>
</li>
<li>
<h2>A Sidebar's Blockquote</h2>
<blockquote>
<p>“Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.”</p>
</blockquote>
<ul>
<li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
<li><a href="http://www.free-css.com/">Vestibulum luctus venenatis</a></li>
<li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal">Copyright © 2007 Carbonated. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
</div>
</body>
</html>
Related examples in the same category