sleek-red
<!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" xml:lang="en" lang="en-AU">
<head>
<title>Sleek Red - One Column Layout</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<style type='text/css'>
/***** Standard Elements *****/
body {
margin:0;
padding:0;
background-color:#FFFFFF;
background-image:url(sleek-red-images/bg.gif);
color:#333333;
font-family:helvetica, verdana, arial, helvetica, sans-serif;
font-size:80%;
text-align:center;
}
div {
margin:0;
padding:0;
}
p {
margin:0.8em 0 1em 0;
padding:0;
line-height:1.3em;
}
/*** lists ***/
ol {
margin:0.8em 0 1em 3em;
padding:0;
list-style-type:decimal;
}
ul {
margin:0.8em 0 1em 3em;
padding:0;
list-style-type:square;
}
li {
margin:0 0 0.3em 0;
padding:0;
}
dl {
margin:0.8em 0 1em 0;
padding:0;
}
dt {
margin:0.1em 0;
padding:0;
font-style:italic;
}
dd {
margin:0.1em 0 0.1em 3em;
padding:0;
}
/*** blockquotes ***/
blockquote {
margin:2em 35px 1em 35px;
padding:0 0 0 45px;
background-image:url(sleek-red-images/quote.gif);
background-position:top left;
background-repeat:no-repeat;
}
blockquote p {
margin:0 0 1.2em 0;
padding:0 35px 0 0;
background-image:url(sleek-red-images/quote.gif);
background-position:bottom right;
background-repeat:no-repeat;
line-height:1.5em;
}
/*** tables ***/
table {
border:none;
margin:0 0 1em 0;
width:100%;
}
table caption {
background-color:#EEEEEE;
text-align: center;
margin:0.5em 1px 1px 1px; padding:0.2em;
}
th, td {
border:1px solid #AAAAAA;
padding:0.1em 0.2em;
margin:1px;
text-align:center;
}
th {
background-color:#E9E9E9;
}
/*** images ***/
.rightimg, .leftimg, .centreimg img {
border:1px solid #AAAAAA;
background-color:#E9E9E9;
padding:3px;
margin:6px;
}
.rightimg {float:right;}
.leftimg {float:left;}
div.centreimg {
text-align:center;
}
/*** headings ***/
h2 {
font-size:150%;
padding:0.1em 0;
margin:0 1em 0.6em 0;
text-transform:capitalize;
border-bottom:5px solid #C9DBDB;
clear:both;
}
h3 {
font-size:120%;
margin:0.3em 0 1em 0;
padding:0.1em 0;
border-bottom:5px solid #C9DBDB;
text-transform:capitalize;
}
h4 {
font-size:110%;
margin:0.2em 0;
text-transform:capitalize;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
/*** links ***/
a:link, a:visited {
color:#0066CC;
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
a img {
border:none;
}
.clearer {
clear:both;
}
/***** Structure *****/
#container {
text-align:left;
width:760px;
margin:0 auto;
padding:0 10px;
border-left:10px solid #EEEEEE;
border-right:10px solid #EEEEEE;
background-color:#FFFFFF;
}
#main {
position:relative;
width:100%;
}
#content {
padding:0 15px;
}
/*** Header ***/
#header {
position:relative;
height:150px;
background-image:url(sleek-red-images/headbg.gif);
background-position:top left;
background-repeat:repeat-x;
background-color:#CC0000;
}
h1 {
font-size:220%;
margin:0; padding:0;
position:absolute;
bottom:60px; left:40px;
text-transform:capitalize;
}
h1 span {
color:#FFFFFF;
}
#top {
background-color:#3B3B3B;
color:#999999;
text-align:right;
padding:0.5em 1em 1.5em 1em;
background-image:url(sleek-red-images/topshadow.gif);
background-position:bottom left;
background-repeat:repeat-x;
font-size:90%;
}
/*** Navigation Menus ***/
#nav {
list-style:none;
margin:0; padding:0 0 0 15px;
position:absolute;
bottom:0; left:0;
width:745px;
border-bottom:6px solid #3B3B3B;
}
#nav li {
margin:0; padding:0;
float:left;
border-right:1px solid #FFFFFF;
}
#nav li a {
display:block;
float:left;
margin:0; padding:0.4em 1.3em 0.6em 1.3em;
background-color:#CC0000;
border-top:3px solid #FF2B2B;
color:#FFFFFF;
text-decoration:none;
background-image:url(sleek-red-images/navlibg.gif);
background-position:top left;
background-repeat:repeat-x;
}
#nav li a.currentpage {
background-image:url(sleek-red-images/navlibgcurrent.gif);
border-top:none;
background-color:#3D3D3D;
border-top:3px solid #6B6B6B;
}
#nav li a:hover {
background-color:#DF0000;
background-image:none;
border-top:3px solid #CC0000;
}
#nav li a.currentpage:hover {
background-image:url(sleek-red-images/navlibgcurrent.gif);
border-top:none;
background-color:#3D3D3D;
border-top:3px solid #6B6B6B;
}
#subnav {
list-style:none;
margin:0.3em 0 20px 15px; padding:0;
float:left;
}
#subnav li {
margin:5px 10px 0 0; padding:0.2em 0.6em;
float:left;
border-left:3px solid #C9DBDB;
}
#subnav li a {
text-decoration:none;
}
#subnav li a.currentpage {
color:#333333;
}
.totop {
text-align:right;
padding-right:25px;
}
/*** Footer ***/
#footer {
background-color:#3B3B3B;
color:#999999;
text-align:center;
font-size:90%;
padding:1.5em 2em 0.7em 1em;
background-image:url(sleek-red-images/footshadow.gif);
background-position:top left;
background-repeat:repeat-x;
}
#footer p, #top p {
margin:0.1em 0;
}
#top a, #footer a {
text-decoration:none;
color:#DDDDDD;
}
#top a:hover, #footer a:hover {
color:#999999;
}
</style>
<link rel="stylesheet" type="text/css" href="printstyle1column.css" media="print" />
</head>
<body>
<div id="container">
<div id="top">
<p><a href="http://www.free-css.com/">Free CSS Templates</a> · <a href="http://www.free-css.com/">Sitemap</a></p>
</div>
<div id="header">
<h1>Sleek <span>Red</span></h1>
<ul id="nav">
<li><a href="http://www.free-css.com/" class="currentpage">Home</a></li>
<li><a href="http://www.free-css.com/">About us</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>
<ul id="subnav">
<li><a href="index.html">2 Columns</a></li>
<li><a href="1column.html" class="currentpage">1 Column</a></li>
<li><a href="http://www.free-css.com/">Nowhere</a></li>
</ul>
<div class="clearer"></div>
<div id="main">
<div id="content">
<h2>Welcome to our website!</h2>
<p>This template is valid XHTML and CSS. It comes in a one column and a two column version and comes with a print style sheet. You are free to use this template for personal and commercial projects and you can modify it in any way you like. If you want any help modifying it you can email me or try some of the links on the left.</p>
<blockquote>
<p>This is an example block quote. Lorem ipsum dolor sit amet. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim.</p>
</blockquote>
<p><img src="photos/829070_driftwood_3.jpg" class="rightimg" alt="" />Example photo of driftwood from the North Shore of Auckland, New Zealand. Photo by Sveres from stock.xchng. This image has the class "rightimg". You can also choose to use the class "leftimg".</p>
<p>Aliquam commodo turpis quis nulla dignissim lobortis. Suspendisse pede ligula, pellentesque ac, porttitor nec, iaculis quis, ante. Donec tristique porttitor ante. Praesent a dolor. Aliquam non massa id diam euismod consectetuer. Quisque eleifend sodales lorem. Suspendisse at sapien vitae tellus mollis pretium. Mauris iaculis, lectus sed venenatis faucibus, ante elit interdum metus, et sollicitudin mi sem sed magna. Fusce euismod, diam ac posuere posuere, pede pede hendrerit justo, sed tristique ipsum eros sit amet ligula. Cras arcu magna, scelerisque ut, faucibus sit amet, condimentum pellentesque, lectus. Integer odio felis, mattis id, congue sed, porttitor sed, lorem.</p>
<h2>A heading</h2>
<p>The image below is in a div with class "centreimg".</p>
<div class="centreimg"><img src="photos/829070_driftwood_3.jpg" alt="" /></div>
<h4>Example Lists</h4>
<ul>
<li>Lorem ipsum dolor</li>
<li>Nulla ac elit ut erat</li>
<li>Proin ac sapien et neque</li>
</ul>
<ol>
<li>Lorem ipsum dolor</li>
<li>Nulla ac elit ut erat</li>
<li>Proin ac sapien et neque</li>
</ol>
<h2>Another heading</h2>
<p>Aliquam commodo turpis quis nulla dignissim lobortis. Suspendisse pede ligula, pellentesque ac, porttitor nec, iaculis quis, ante. Donec tristique porttitor ante. Praesent a dolor. Aliquam non massa id diam euismod consectetuer. Quisque eleifend sodales lorem. Suspendisse at sapien vitae tellus mollis pretium. Mauris iaculis, lectus sed venenatis faucibus, ante elit interdum metus, et sollicitudin mi sem sed magna. Fusce euismod, diam ac posuere posuere, pede pede hendrerit justo, sed tristique ipsum eros sit amet ligula. Cras arcu magna, scelerisque ut, faucibus sit amet, condimentum pellentesque, lectus. Integer odio felis, mattis id, congue sed, porttitor sed, lorem.</p>
<h4>Example definition list</h4>
<dl>
<dt>Aliquam commodo</dt>
<dd>Suspendisse pede ligula, pellentesque ac, porttitor nec, iaculis quis, ante.</dd>
<dt>Donec tristique</dt>
<dd>Aliquam non massa id diam euismod consectetuer. Donec tristique porttitor ante.</dd>
<dt>Venenatis faucibus</dt>
<dd>Integer odio felis, mattis id, congue sed, porttitor sed, lorem.</dd>
</dl>
<h4>Example Table</h4>
<table>
<caption>
Table 1. Some letters and numbers.
</caption>
<thead>
<tr>
<th> </th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<th>X</th>
<td>0.001</td>
<td>0.689</td>
<td>3.25</td>
</tr>
<tr>
<th>Y</th>
<td>0.023</td>
<td>1.08</td>
<td>9.21</td>
</tr>
<tr>
<th>Z</th>
<td>0.359</td>
<td>0.120</td>
<td>4.01</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="clearer"></div>
<div class="totop"><a href="#top"><img src="sleek-red-images/up.gif" alt="" /></a></div>
<div id="footer">
<p>© Your Name 2007 · Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> and <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> · Template design by <a href="http://www.opendesigns.org/profile/?user=ad267">Ad267</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category