desertsand
<!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>Desert Sand</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: #EAC99A url(desertsand-images/img01.jpg);
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #A38560;
}
h1, h2, h3 {
font-weight: normal;
color: #B27217;
}
h1 {
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.2em;
font-weight: bold;
}
p, blockquote, ul, ol {
margin-bottom: 2em;
line-height: 180%;
}
p {
}
blockquote {
}
ul {
list-style: none;
}
ul li {
padding-left: 1em;
background: url(desertsand-images/img06.gif) no-repeat left center;
}
ol {
margin-left: 3em;
}
ol li {
}
pre, code {
}
pre {
}
code {
}
a {
color: #D65601;
}
a:hover {
text-decoration: none;
}
a:visited {
}
img {
}
input, textarea, select {
}
input {
}
textarea {
}
select {
}
.bg {
background: url(desertsand-images/img02.jpg) repeat-x;
}
/* Header */
#header {
width: 720px;
height: 70px;
margin: 0 auto;
padding-top: 40px;
}
/* Logo */
#logo {
float: left;
}
#logo h1 {
margin: 0;
font-size: 2em;
}
#logo h2 {
margin: 0;
padding-left: .1em;
font-size: 1em;
font-weight: bold;
}
#logo a {
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
}
#menu h2 {
display: none;
}
#menu ul {
margin: 0;
padding-top: 2.35em;
list-style: none;
}
#menu li {
display: inline;
padding-left: 2em;
background: none;
}
#menu a {
text-decoration: none;
letter-spacing: -1px;
color: #FFFFFF;
}
#menu a:hover {
}
/* Wrapper */
#wrapper {
width: 760px;
margin: 0 auto;
}
/* Sidebar */
#sidebar {
float: left;
width: 230px;
background: url(desertsand-images/img04.jpg) repeat-y;
}
#sidebar .title {
margin: 0;
padding: 20px 20px 0 20px;
background: url(desertsand-images/img03.jpg) no-repeat;
}
#sidebar .content {
padding: 20px;
}
#sidebar .bottom {
height: 33px;
background: url(desertsand-images/img05.jpg) repeat-x left bottom;
}
/* Content */
#content {
float: right;
width: 500px;
}
/* Splash */
#splash {
text-align: center;
background: url(desertsand-images/img09.jpg) repeat-y;
}
#splash .top {
padding: 20px 20px 16px 20px;
background: url(desertsand-images/img08.jpg) no-repeat;
}
#splash .bottom {
height: 33px;
background: url(desertsand-images/img05.jpg) repeat-x left bottom;
}
/* Welcome */
#welcome {
padding: 0 20px;
}
/* Samples */
#samples {
padding: 20px;
background: url(desertsand-images/img05.jpg) repeat-x;
}
/* Footer */
#footer {
width: 720px;
margin: 0 auto;
}
#footer p {
font-size: 10px;
}
</style>
</head>
<body>
<div class="bg">
<div id="header">
<div id="logo">
<h1><a href="http://www.free-css.com/">Desert Sand</a></h1>
<h2><a href="http://www.free-css.com/">By Free CSS Templates</a></h2>
</div>
<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li><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">Products</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Contact Us</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="content">
<div id="splash">
<div class="top"><img src="desertsand-images/img07.jpg" alt="" width="460" height="180" /></div>
<div class="bottom"></div>
</div>
<div id="welcome">
<h2>Welcome to Desert Sand!</h2>
<p><strong>Desert Sand</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 photo is 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. Enjoy :)</p>
</div>
<div id="samples">
<h2>Common Markup Examples</h2>
<p>This is a paragraph followed by an unordered list of links. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</p>
<ul>
<li><a href="http://www.free-css.com/">Integer sit amet pede vel arcu aliquet pretium.</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="http://www.free-css.com/">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="http://www.free-css.com/">Pellentesque quis elit non lectus gravida blandit.</a></li>
<li><a href="http://www.free-css.com/">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
</ul>
<h3>A Heading Level Three</h3>
<blockquote>
<p>This is a blockquote. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</p>
</blockquote>
<h3>A Heading Level Three</h3>
<p>Another paragraph example followed by an ordered list:</p>
<ol>
<li>Integer sit amet pede vel arcu aliquet pretium.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
</ol>
</div>
</div>
<div id="sidebar">
<h3 class="title">Urna Congue Rutrum</h3>
<div class="content">
<p>Donec leo. Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros, porttitor eu, tempus id, varius non, nibh.</p>
<ul>
<li><a href="http://www.free-css.com/">Duis enim nulla luctus</a></li>
<li><a href="http://www.free-css.com/">Eu dapibus lacinia venenatis</a></li>
<li><a href="http://www.free-css.com/">Id quam vestibulum imperdiet</a></li>
<li><a href="http://www.free-css.com/">Magna nec eleifend rutrum</a></li>
<li><a href="http://www.free-css.com/">Nunc lectus vestibulum velit</a></li>
<li><a href="http://www.free-css.com/">Euismod lacinia quam nisl</a></li>
<li><a href="http://www.free-css.com/">Quisque erat vestibulum</a></li>
<li><a href="http://www.free-css.com/">Pellentesque justo mollis</a></li>
<li><a href="http://www.free-css.com/">Suscipit justo nulla blandit</a></li>
<li><a href="http://www.free-css.com/">Libero in blandit augue justo</a></li>
<li><a href="http://www.free-css.com/">Fusce mattis viverra elit</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
<div class="bottom"></div>
</div>
</div>
<div id="footer">
<p><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Terms of Use</a><br />
©2007 Desert Sand. All Rights Reserved.</p>
</div>
</div>
</body>
</html>
Related examples in the same category