deserted
<!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>Deserted</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 {
margin-top: 20px;
background: #404040 url(deserted-images/img01.gif) repeat-x;
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
h1, h2, h3 {
margin-bottom: 1em;
text-transform: uppercase;
color: #FFFFFF;
}
h1 { font-size: 2.8em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.2em; }
p, blockquote, ul, ol {
margin-bottom: 1.5em;
text-align: justify;
line-height: 1.8em;
}
blockquote, ul, ol {
margin-left: 3em;
}
blockquote {
margin-right: 3em;
}
a {
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
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 {
}
/* Boxed */
.boxed {
}
.boxed .title {
margin: 0;
padding: 5px 15px;
background: url(deserted-images/img08.gif) no-repeat left center;
text-transform: uppercase;
font-size: small;
}
.boxed .content {
padding: 15px;
background: url(deserted-images/img09.gif) repeat-x;
}
.boxed ol, .boxed ul {
margin-left: 0;
list-style-position: inside;
}
/* Logo */
#logo {
width: 760px;
height: 200px;
margin: 0 auto;
background: #000000 url(deserted-images/img02.jpg) no-repeat;
}
#logo h1 {
float: left;
width: 600px;
margin: 0;
padding: 164px 0 0 0;
text-align: right;
letter-spacing: 5px;
font-size: 18px;
}
#logo h2 {
float: right;
margin: 0;
padding: 170px 20px 0 0;
font-size: 11px;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Page */
#page {
width: 760px;
margin: 0 auto;
background: #000000;
}
/* Content */
#content {
float: left;
width: 480px;
padding: 20px;
background: url(deserted-images/img03.jpg) no-repeat;
}
#welcome {
padding-bottom: 20px;
}
#olist {
clear: left;
float: left;
width: 230px;
}
#ulist {
float: left;
width: 230px;
padding-left: 20px;
}
/* Sidebar */
#sidebar {
float: right;
width: 200px;
padding: 20px;
background: url(deserted-images/img04.jpg) no-repeat;
}
#sidebar blockquote {
margin-left: 0;
margin-right: 0;
}
/* Menu */
#menu {
margin-bottom: 19px;
}
#menu h2 {
display: none;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
padding-top: 1px;
background: url(deserted-images/img07.gif) repeat-x;
}
#menu li.first {
background: none;
}
#menu a {
display: block;
width: 165px;
padding: 7px 10px 7px 25px;
text-transform: uppercase;
background: url(deserted-images/img08.gif) no-repeat 10px 50%;
text-decoration: none;
letter-spacing: 1px;
font-size: x-small;
font-weight: bold;
}
#menu a:hover {
background-color: #0A0A0A;
}
/* Footer */
#footer {
width: 760px;
margin: 0 auto;
padding: 20px 0;
background: url(deserted-images/img05.gif) repeat-x;
}
#footer p {
margin: 0;
text-align: center;
font-size: x-small;
color: #000000;
}
#footer a {
color: #000000;
}
</style>
</head>
<body>
<div id="logo">
<h1><a href="http://www.free-css.com/">Deserted</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div id="page">
<div id="content">
<div id="welcome">
<p style="margin: 0;"><img src="deserted-images/img06.jpg" alt="" width="160" height="200" class="left" /></p>
<h2 class="title">Welcome to Deserted!</h2>
<p><strong>Deserted</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>
<!-- end #welcome -->
<div id="olist" class="boxed">
<h2 class="title">An Ordered List In A Box</h2>
<div class="content">
<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 enatis</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</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</a></li>
<li><a href="http://www.free-css.com/">Sed quis odio sagittis leo</a></li>
</ol>
</div>
</div>
<!-- end #olist -->
<div id="ulist" class="boxed">
<h2 class="title">Boxed Bulleted List</h2>
<div class="content">
<ul>
<li><a href="http://www.free-css.com/">Etiam malesuada rutrum</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</a></li>
<li><a href="http://www.free-css.com/">Sed quis odio sagittis leo</a></li>
<li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
<li><a href="http://www.free-css.com/">Vestibulum luctus enatis</a></li>
<li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
</ul>
</div>
</div>
<!-- end #ulist -->
</div>
<!-- end #content -->
<div id="sidebar">
<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li class="first"><a href="http://www.free-css.com/" accesskey="1">Homepage</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">About Us</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Product Catalog</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Our Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Customer Support</a></li>
<li><a href="http://www.free-css.com/" accesskey="6">Community Forums</a></li>
<li><a href="http://www.free-css.com/" accesskey="7">Contact Us</a></li>
</ul>
</div>
<!-- end #menu -->
<div class="boxed">
<h2 class="title">A Sidebar's Blockquote</h2>
<div class="content">
<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>
</div>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 1px;"></div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal">Copyright © 2007 Deserted. 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