outtabox
<!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
Title : Outtabox
Version : 1.0
Released : 20070521
Description: A two-column fixed width template suitable for small websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Outtabox 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
*/
* {
margin: 0;
padding: 0;
}
body {
margin: 20px 0;
background: #859C0E;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #554D49;
}
h1, h2, h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #000000;
}
h1 {
margin-bottom: .75em;
font-size: 182%;
}
p, blockquote, ul, ol {
margin-bottom: 1.8em;
line-height: 1.6em;
}
p {
}
blockquote {
}
ul, ol {
list-style-position: inside;
}
ul {
}
ol {
}
a {
color: #859C0E;
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
width: 680px;
margin: 0 auto;
padding: 0 0 0 0;
background: url(outtabox-images/img01.gif) no-repeat 74px 18px;
}
#header h1 {
margin: 0;
padding: 0 196px 0 0;
text-transform: uppercase;
text-align: right;
letter-spacing: 5px;
font: normal 36px Georgia, "Times New Roman", Times, serif;
color: #000000;
}
#header h1 a {
color: #000000;
}
#header h2 {
margin: -5px 0 0 0;
padding: 0 210px 0 0;
text-transform: lowercase;
text-align: right;
font: normal 30px Garamond, "Times New Roman", Times, serif;
font-style: italic;
}
#header a {
text-decoration: none;
}
/* Page */
#page {
width: 580px;
margin: 0 auto;
padding: 0 0 0 100px;
background: url(outtabox-images/img02.gif) repeat-y 100px 0px;
}
/* Content */
#content {
float: left;
width: 329px;
padding: 40px 30px 0 25px;
}
#content .image {
position: relative;
margin: 3px 20px 0 -100px;
float: left;
border: 5px solid #000000;
}
#content .image img {
border: 5px solid #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width: 180px;
padding: 50px 0 0 0;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none outside;
}
#sidebar li {
margin-bottom: 15px;
}
#sidebar li ul {
}
#sidebar li li {
margin: 0;
padding: 5px 0;
background: url(outtabox-images/img06.gif) repeat-x left bottom;
}
#sidebar h2 {
margin-bottom: 10px;
padding-left: 15px;
text-transform: uppercase;
background: url(outtabox-images/img05.gif) no-repeat left center;
border-bottom: 1px solid #000000;
font-size: 100%;
font-weight: bold;
}
#sidebar h3 {
margin: 0;
padding-left: 15px;
font-size: 85%;
}
#sidebar p {
margin: 0;
line-height: normal;
}
#sidebar a {
padding-left: 15px;
background: url(outtabox-images/img07.gif) no-repeat 5px 50%;
text-decoration: none;
color: #FFFFFF;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
width: 470px;
height: 60px;
margin: 0 auto;
padding: 15px 210px 0 0;
background: url(outtabox-images/img04.gif) no-repeat 100px 0px;
}
#footer p {
margin: 0;
text-align: right;
font-size: 77%;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="header">
<h1><a href="#">Outtabox</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<!-- end div#header -->
<div id="page">
<div id="content">
<h1>Welcome to Outtabox!</h1>
<p><strong>Outtabox</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from <a href="http://www.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://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
<p class="image" style="height: 130px;"><img src="outtabox-images/img03.jpg" alt="" width="120" height="120" /></p>
<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 dictum porta lectus.</p>
<p>Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget:</p>
<ol>
<li><a href="http://www.freecsstemplates.org/">Integer sit amet pede vel arcu aliquet pretium...</a></li>
<li><a href="http://www.freecsstemplates.org/">Lorem ipsum dolor sit amet, consectetuer...</a></li>
<li><a href="http://www.freecsstemplates.org/">Phasellus nec erat sit amet nibh pellentesque...</a></li>
</ol>
</div>
<!-- end div#content -->
<div id="sidebar">
<ul>
<li id="menu">
<h2>Pages</h2>
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<!-- end li#menu -->
<li id="news">
<h2>Recent Updates</h2>
<ul>
<li>
<h3>May 21, 2007</h3>
<p><a href="#">Lorem ipsum dolor…</a></p>
</li>
<li>
<h3>May 17, 2007</h3>
<p><a href="#">Integer sit amet…</a></p>
</li>
<li>
<h3>May 14, 2007</h3>
<p><a href="#">Phasellus nec erat…</a></p>
</li>
</ul>
</li>
<!-- end li#news -->
</ul>
</div>
<!-- end div#sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end div#page -->
<div id="footer">
<p id="legal">Copyright © 2007 Outtabox. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
<!-- end div#footer -->
</body>
</html>
Related examples in the same category