gunmetal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Gunmetal</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
background:#121212;
font:1em Trebuchet MS;
word-spacing:2px;
color:#545454;
margin:0;
}
* {
margin:0;
padding:0;
}
a {
color:#999;
border-bottom:1px dotted #232323;
text-decoration:none;
padding:2px 4px 2px 4px;
}
a:hover {
border-bottom:1px dotted #99CC33;
background:#101010;
}
h2 {
font:24px Arial, sans-serif;
color:#99CC33;
letter-spacing:-1px;
font-weight:normal;
margin:15px 0 15px 0;
}
h2.first {
margin:0 0 15px 0;
}
h2 a {
color:#99CC33;
text-decoration:none;
border:none;
padding:0;
}
h2 a:hover {
border:none;
background:none;
}
h3 {
font-size:1.2em;
color:#ccc;
font-weight:normal;
margin:15px 0 15px 0;
}
p {
line-height:24px;
margin:25px 0 25px 0;
}
blockquote {
font-size:1.7em;
margin:35px 150px 35px 0;
color:#787878;
background:url(gunmetal-images/blockquote.gif) top left no-repeat;
padding:15px 0 0 0;
font-family:Georgia, "Times New Roman", Times, serif;
}
blockquote p {
line-height:40px;
}
#sidebar {
width:263px;
background:url(gunmetal-images/sidebar.jpg) top left no-repeat;
float:left;
padding:20px 20px 50px 20px;
}
#sidebar p {
font-size:0.9em;
}
#sidebar a {
color:#ccc;
border:none;
}
#sidebar a:hover {
text-decoration:underline;
color:#eee;
border:none;
}
#sidebar h1 {
color:#fff;
font-size:1.7em;
}
#sidebar h1 a {
color:#fff;
text-decoration:none;
padding:0;
}
#sidebar h1 a:hover {
text-decoration:none;
}
ol#nav {
margin:25px 15px 25px 30px;
font-size:1.3em;
}
ol li {
margin:15px 0 15px 0 !important;
margin:-10px 0;
}
#nav a {
display:block;
margin:0;
color:#99CC33;
border:none;
}
#nav a b {
float:right;
display:none;
color:#333;
}
#nav a:hover {
background:none;
border:none;
text-decoration:none;
}
#nav a:hover b {
display:inline;
}
#content {
margin:0 10% 0 300px;
background:url(gunmetal-images/content.jpg) top left no-repeat;
padding:20px;
}
#content ul {
margin:15px 15px 15px 15px;
list-style:none;
}
#content ul li {
margin:10px 0;
padding:0 0 0 15px;
background:url(gunmetal-images/bp.gif) left no-repeat;
}
#content img {
padding:1px;
background:#000;
border:3px solid #333;
}
.postdata {
font:11px Verdana;
margin:-6px 0 -15px 0;
color:#777;
}
#footer {
padding:30px;
text-align:center;
border-top:3px solid #333;
margin:50px 0 0 0;
background:#000;
</style>
</head>
<body>
<div id="sidebar">
<h1><a href="http://www.free-css.com/">Gunmetal</a></h1>
<p> A simple, fluid, light on dark template by Six Shooter Media. </p>
<ol id="nav">
<li><a href="http://www.free-css.com/"><b></b>Home</a></li>
<li><a href="http://www.free-css.com/"><b></b>About</a></li>
<li><a href="http://www.free-css.com/"><b></b>Contact</a></li>
<li><a href="http://www.free-css.com/"><b></b>Example Link</a></li>
<li><a href="http://www.free-css.com/"><b></b>Example Link 2</a></li>
<li><a href="http://www.free-css.com/"><b></b>Example Link 3</a></li>
</ol>
</div>
<div id="content">
<h2 class="first"><a href="http://www.free-css.com/" id="intro">Introduction</a></h2>
<p class="postdata"> Posted on 01.01.05 by <a href="http://www.free-css.com/">Author</a> || <a href="http://www.free-css.com/">21 Comments</a> </p>
<p> Hello and welcome to my latest Open Source template: <strong>Gunmetal</strong>. This template is something a little new for me in terms of template design, two key visual elements of this design are something I (amazingly) have yet to incorporate into one of my free templates. Those two elements are a Fluid Width and a Light on Dark colour scheme. Fluid Width? Yeah, this simply means that the content of the web page expands and contracts in accordance to the size of the browser window. Light on Dark? Yessir. All of my templates so far have been based on a light background with dark text, Gunmetal obviously, is the other way around! </p>
<p> The main aims of this template are to produce (as usual with my templates) something that looks as aesthetically appealing as possible whilst using as few images as I can, and also to create a page that is a pleasure to read in terms of typography. </p>
<h2><a href="http://www.free-css.com/" id="author">About the Author</a></h2>
<p class="postdata"> Posted on 01.01.05 by <a href="http://www.free-css.com/">Author</a> || <a href="http://www.free-css.com/">21 Comments</a> </p>
<p> Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website Six Shooter Media, but I (obviously) also enjoy creating Open Source web templates for general use! </p>
<p> Another site of mine that you might find interesting if you're setting up a site with a free tmeplate like this is Buy a Button. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! </p>
<h2>Some Examples</h2>
<p class="postdata"> Posted on 01.01.05 by <a href="http://www.free-css.com/">Author</a> || <a href="http://www.free-css.com/">21 Comments</a> </p>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h3>Blockquote Example</h3>
<blockquote>
<p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
</blockquote>
<h3>List Example</h3>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h2><a href="#contact" id="contact">Contact</a></h2>
<p class="postdata"> Posted on 01.01.05 by <a href="http://www.free-css.com/">Author</a> || <a href="http://www.free-css.com/">21 Comments</a> </p>
<p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
</div>
<div id="footer"> Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
All your copyright information here. </div>
</body>
</html>
Related examples in the same category