home
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Six Shooter Media Free Template
http://www.sixshootermedia.com/free-templates/
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Home. Free CSS Templates by Six Shooter Media</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/* CSS Document */
* {
margin:0;
padding:0;
outline:none;
}
body {
background:url(home-images/body.jpg) top repeat-x #050507;
font:70% Verdana;
color:#ACACB0;
}
a {
color:#99FF00;
}
a:hover {
text-decoration:none;
}
#header {
height:248px;
display:block;
background:url(home-images/header.jpg) top center no-repeat;
}
h1.main_title {
font:170% Century Gothic;
color:#fff;
font-weight:bold;
margin:20px auto 0;
text-align:center;
}
h1.main_title a {
color:#fff;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
background:#151521;
padding:5px;
}
#navigation {
background:#181825;
width:600px;
border-top:1px solid #2E2E47;
padding:12px 0;
margin:35px auto 1px;
font:100% Georgia;
color:#fff;
letter-spacing:2px;
text-transform:uppercase;
}
#nav li {
list-style:none;
display:inline;
margin-right:0px;
}
#nav a {
padding:12px;
color:#ACACB0;
text-decoration:none;
margin-right:0px;
}
#nav a:hover {
background:url(home-images/nav_link_active.jpg) top repeat-x;
color:#fff;
}
#nav a.active {
background:url(home-images/nav_link_active.jpg) top repeat-x;
color:#fff;
font-weight:bold;
}
#inner_container {
background:url(home-images/inner_container.jpg) top repeat-x #181824;
padding:10px 10px 10px 25px;
}
#sidebar {
width:200px;
padding:10px;
float:right;
background:#232436;
color:#bdbdc1;
}
#container #sidebar h2 {
font-size:90%;
margin:10px 0;
}
#container #sidebar p {
text-indent:0;
font-size:90%;
line-height:17px;
}
#content {
margin-right:240px;
}
blockquote {
background:url(home-images/quote.gif) bottom right no-repeat #292935;
padding:2px 17px;
}
p {
margin:10px 0;
padding:5px;
line-height:20px;
text-indent:25px;
}
p.note {
padding:20px;
background:#2D2D44;
color:#fff;
}
#container h1 {
font:170% Arial;
color:#fff;
margin:15px 0;
}
#container h2 {
font:110% Verdana;
color:#fff;
font-weight:bold;
margin:25px 0 15px;
}
#container ul {
margin:10px 15px;
}
#container ul li {
margin:10px 0;
}
#container img {
background:#070713;
padding:5px;
}
#footer {
width:750px;
background:#151521;
padding:10px;
margin:0 auto;
clear:both;
}
#content table {
width:475px;
background:#1E1E2D;
margin:25px 0;
}
td {
padding:8px;
text-align:center;
background:url(home-images/td.jpg) top left no-repeat #1E1E2D;
font:100% Georgia;
}
th {
color:#fff;
padding:10px;
}
#footer p {
text-indent:0;
}
#footer p.validate {
float:right;
}
</style>
</head>
<body>
<div id="header">
<!-- This is where the image of the house goes -->
</div>
<h1 class="main_title"><a href="http://www.free-css.com/">Home - Free CSS Template by Six Shooter Media</a></h1>
<div id="navigation">
<ul id="nav">
<li><a href="http://www.free-css.com/" class="active">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/">Products</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="container">
<div id="inner_container">
<div id="sidebar">
<h2>Sidebar</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam leo mauris, venenatis eget, dapibus ac, laoreet ut, nunc. Nam ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Etiam et nisi. Duis nunc turpis, ultrices nec, aliquam a, pellentesque quis, neque. Nunc a diam. Duis in mauris vel leo sagittis mattis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non massa. Morbi molestie tristique sem. Nunc condimentum ipsum vel felis. Duis vitae velit. Morbi nulla massa, blandit id, scelerisque a, pharetra sagittis, dolor. Curabitur feugiat aliquam augue. Phasellus cursus ultricies libero. Nam eu elit. Sed sagittis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse mattis nulla a lacus. </p>
<p> Curabitur libero purus, ultrices vel, vulputate ac, dictum ac, nulla. Praesent pulvinar ligula ut nibh vehicula mollis. Nullam vehicula rutrum mi. Proin vehicula. Proin tellus metus, auctor a, congue at, tincidunt ut, dolor. Nam vel lacus. Sed in pede sit amet nulla porttitor tincidunt. Nunc vel mauris eget elit feugiat nonummy. Vestibulum feugiat tortor quis nunc. In at odio eget eros commodo aliquet. Praesent metus. Maecenas vulputate eros ut eros. Nulla augue. Suspendisse ac tortor non nisl tincidunt elementum. Ut nec orci a ante imperdiet scelerisque. Nunc rhoncus auctor arcu. Aliquam erat volutpat. Etiam ac erat. Nam vel enim. </p>
</div>
<div id="content">
<h1>Welcome!</h1>
<p class="note"> Hello and welcome to 'Home' (aptly named I would imagine!) a free web template designed by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>. It's a fairly simple template, but I hope you enjoy it none-the-less! </p>
<h2>Examples</h2>
<p> Here are some examples of common web elements which you are more than likely to user in your own web site. I've laid a few down here, a few otehrs are taken care of in the style sheet also. </p>
<h2>Long text Example</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam leo mauris, venenatis eget, dapibus ac, laoreet ut, nunc. Nam ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Etiam et nisi. Duis nunc turpis, ultrices nec, aliquam a, pellentesque quis, neque. Nunc a diam. Duis in mauris vel leo sagittis mattis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non massa. Morbi molestie tristique sem. Nunc condimentum ipsum vel felis. Duis vitae velit. Morbi nulla massa, blandit id, scelerisque a, pharetra sagittis, dolor. Curabitur feugiat aliquam augue. Phasellus cursus ultricies libero. Nam eu elit. Sed sagittis arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse mattis nulla a lacus. </p>
<p> Curabitur libero purus, ultrices vel, vulputate ac, dictum ac, nulla. Praesent pulvinar ligula ut nibh vehicula mollis. Nullam vehicula rutrum mi. Proin vehicula. Proin tellus metus, auctor a, congue at, tincidunt ut, dolor. Nam vel lacus. Sed in pede sit amet nulla porttitor tincidunt. Nunc vel mauris eget elit feugiat nonummy. Vestibulum feugiat tortor quis nunc. In at odio eget eros commodo aliquet. Praesent metus. Maecenas vulputate eros ut eros. Nulla augue. Suspendisse ac tortor non nisl tincidunt elementum. Ut nec orci a ante imperdiet scelerisque. Nunc rhoncus auctor arcu. Aliquam erat volutpat. Etiam ac erat. Nam vel enim. </p>
<h2>Blockquote Example</h2>
<blockquote>
<p> <em> "But the Forest <em>is</em> queer. Everything in it is very much more alive, more aware of what is going on, so to speak, than things are in the Shire. And the trees do not like strangers. They watch you. They are usually content merely to watch you, as long as daylight lasts, and don't do much. Occasionally the most unfriendly ones may drop a branch, or stick a root out, or grasp at you with a long trailer. But at night things can be most alarming, or so I am told." </em> </p>
<p style="text-align: right;"> - Meriadoc Brandybuck </p>
</blockquote>
<h2>List Example</h2>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h2>Image Example</h2>
<p><img src="http://www.sixshootermedia.com/ssm2/wp-content/themes/Six%20Shooter%20Media/home-images/logo.jpg" alt="" /> </p>
<h2>Table Example</h2>
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>2</td>
<td>23</td>
<td>76</td>
</tr>
<tr>
<td>54</td>
<td>233</td>
<td>1233</td>
</tr>
</table>
</div>
</div>
</div>
<div id="footer">
<p class="validate"><a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">CSS</a><br />
<a href="#content">Top</a></p>
<!-- Please leave this line intact -->
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
<!-- you can delete below here -->
All your copyright information here.</p>
</div>
</body>
</html>
Related examples in the same category