thingreenline
<!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>Thin Green Line</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body {
background-color:#fff;
background-image:url(thingreenline-images/backgrounds/body.jpg);
background-position:top;
background-repeat:repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:75%;
color:#777;
margin:0;
}
* {
padding:0;
margin:0
}
#container {
width:770px;
margin:0 auto 0 auto;
}
#header {
height:69px;
}
#header h1 {
font-family:Century Gothic, "Trebuchet MS", Tahoma, Verdana;
font-size:250%;
color:#333;
letter-spacing:-1px;
padding:15px 50px 0 10px;
float:left;
border-right:1px solid #eee;
}
#header h1 a {
color:#000;
text-decoration:none;
}
#header h3 {
padding:33px 0 5px 40px;
font-size:100%;
color:#ccc;
font-weight:normal;
margin: 0 0 0 270px; /* Adjust this value for the space between the site title and the slogan */
border-right:1px solid #eee;
}
#sidebar_bottom {
background-image:url(thingreenline-images/backgrounds/sidebarbottom.jpg);
height:53px;
}
#nav {
margin:0 20px 0 0 !important;
margin:0 10px 0 0;
padding:0;
float:right;
}
#nav li {
margin:0;
padding:0;
list-style:none;
float:left;
}
#nav li a {
display:block;
padding:5px 10px 14px 10px;
margin:0 1px 0 1px;
color:#666;
text-decoration:none;
font-weight:bold;
}
#nav li a:hover, .active {
background-image:url(thingreenline-images/backgrounds/menu_a_hover.gif);
background-position:bottom;
background-repeat:repeat-x;
color:#000;
}
.clear {
clear:both;
}
#sidebar {
width:210px;
background-color:#fff;
padding:30px 20px 20px 20px;
float:left;
margin:-20px 0 0 0;
}
#content {
margin:0 0 0 270px;
padding:30px 30px 20px 20px;
}
#content h1 {
font-family:"Trebuchet MS", Tahoma, Verdana;
font-size:24px;
text-transform:uppercase;
letter-spacing:1px;
margin:10px 0 20px 0;
color:#BFEF01;
}
#content h2 {
font-size:16px;
color:#333;
font-family:"Trebuchet MS", Tahoma, Verdana;
margin:10px;
}
#content p {
line-height:20px;
word-spacing:2px;
padding:0 0 0 20px;
text-indent:20px;
margin:20px 0 20px 0;
}
#content ul {
margin:15px 0 15px 20px;
padding:0;
border-top:1px solid #eee;
}
#content li {
margin:10px 0 10px 0;
padding:0 0 10px 15px;
list-style:none;
border-bottom:1px solid #eee;
background-image:url(thingreenline-images/backgrounds/li.gif);
background-position:top left;
background-repeat:no-repeat;
}
#content #sideblock {
width:180px;
padding:10px;
background-color:#fff;
float:right;
font-size:90%;
margin:0 0 0 20px;
}
.sidebarfooter {
background-color:#eee;
text-align:left;
padding:7px 5px 7px 5px;
font-size:80%;
}
.sidebarfooter a {
background-color:#f6f6f6;
padding:3px;
text-decoration:none;
}
.sidebarfooter a:hover {
color:#000;
background-color:#fff;
}
#content #sideblock h1 {
text-transform:none;
font-size:120%;
color:#000;
margin:0;
letter-spacing:0;
}
#sideblock p {
text-indent:0;
line-height:17px;
padding:5px;
margin:5px 0 5px 0;
color:#bbb;
}
#sideblock ul {
margin:0 0 5px 5px;
border:none;
}
#sideblock li {
margin: 0;
background-image:none;
padding:0;
border:none;
}
#sideblock li a {
text-decoration:none;
display:block;
background-color:#fff;
padding:5px 5px 5px 10px;
color:#888;
}
#sideblock li a:hover {
background-color:#f9f9f9;
color:#666;
background-image:url(thingreenline-images/backgrounds/sideblock_li_a_hover.gif);
background-position:left;
background-repeat:no-repeat;
}
blockquote {
background-image:url(thingreenline-images/backgrounds/bq.jpg);
background-position:top;
background-repeat:repeat-x;
padding:5px 35px 5px 5px;
border:1px solid #eee;
font-family:"Trebuchet MS", Tahoma, Verdana;
}
#content a {
color:#444;
padding:2px;
text-decoration:none;
}
#content a:hover {
background-color:#EBFF99;
color:#000;
}
a:hover {
text-decoration:none;
}
#sidebar a {
color:#333;
}
#sidebar h1 {
font-family:Century Gothic, "Trebuchet MS", Tahoma, Verdana;
font-size:20px;
color:#777;
font-weight:normal;
letter-spacing:-1px;
}
#sidebar p {
font-size:90%;
line-height:19px;
margin:10px 0 10px 0;
}
#footer {
padding:20px;
border-top:2px solid #ccff00;
color:#ccc;
text-align:center;
}
#footer a {
color:#999;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.free-css.com/">Thin Green Line</a></h1>
<h3>Because blue and red are boring.</h3>
</div>
<ul id="nav">
<li><a href="http://www.free-css.com/" class="active">Home</a></li>
<li><a href="#intro">Introduction</a></li>
<li><a href="#css">CSS & XHTML</a></li>
<li><a href="#author">The Author</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<br class="clear" />
<div id="sidebar">
<h1>Hello!</h1>
<p> And so we have the (almost) obligatory side bar column thing. Here you can put absolutely any thing you want! Great huh? Yep. </p>
<h1>Animated Gifs</h1>
<p> Aren't <a href="http://www.free-css.com/">animated gifs</a> great!!! Often considered to be one of the biggest design no-no's out there. But, if you know me then you know I like to take a bad thing and make it good. While animation in web design itself is off putting (for me at least), I think that small animations like the menu on this site help accentuate certain features and also add some 'cool' factor to a site. Well, that's what I think... </p>
<div class="sidebarfooter"> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> <a href="http://www.sixshootermedia.com">6sm</a> <a href="http://www.getfirefox.com">Get FF</a> </div>
<div id="sidebar_bottom"></div>
</div>
<div id="content">
<h1><a href="http://www.free-css.com/" id="intro"></a>Introduction</h1>
<p> Hello and welcome to "Thin Green Line" another template by me! Anyone who knows me by now will know that I love plain templates which offer a lot of whitespace and maybe one or two features which make it stand out. In this template, that feature would be the use of animated gifs. Sure, they're regarded as horrible things but I think they can be used quite nicely, as I have tried to demonstrate in this template. </p>
<p> A note on the slogan in the header: The gap between the grey line and the slogan is adjusted in the css. If your site title is longer than "Thin Green Line" then you may have to adjust this value! </p>
<h1><a href="http://www.free-css.com/" id="css"></a>CSS & XHTML</h1>
<p> As you would expect, this web site makes use of css for its entire layout. No nasty tables here baby! The markup is also valid XHTML 1.1 strict. CSS & XHTML are important for the following reasons: </p>
<ul>
<li>Accessibility. Big subject. Read more <a href="http://www.w3.org/WAI/">here</a>.</li>
<li>Keeping file sizes small</li>
<li>Search Engine Optimisation</li>
<li>Loads more</li>
</ul>
<p> Anyway, this site validates as both <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1 Strict</a> compliant. Which is nice. </p>
<h1><a href="http://www.free-css.com/" id="author"></a>About the Author</h1>
<p> Hi! My names Jay and I'm a 19 year old web designer from England. My main projects are conducted through my website <a href="http://www.sixshootermedia.com">Six Shooter Media</a>. But I also run various other sites. These include <a href="http://www.jameskoster.co.uk">my blog</a>, nothing special really, and, more interestingly for people setting up new sites with these templates I run a tutorials web site which gives you some good techniques for spicing up your web sites. Be it a template site or something else, there's bound to be somehting interesting there, so take a look at <a href="http://www.sixshootermedia.com/Pretty_as_a_Picture">Pretty as a Picture</a>. </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 <a href="http://www.buyabutton.net">Buy a Button</a>. 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! Anyway, <a href="http://www.buyabutton.net">Take a look</a>! </p>
<h1>Some Examples</h1>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h2>Blockquote Example</h2>
<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>
<h2>List Example</h2>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h1><a href="#contact" id="contact"></a>Contact</h1>
<p> If you decide to use this template please <a href="http://www.free-css.com/">drop me a line</a> 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>
<div id="footer">
<p> Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
Featured on <a href="http://www.sixshootermedia.com/Pretty_as_a_Picture">Pretty as a Picture</a>, <a href="http://www.openwebdesign.org">OWD.org</a> and <a href="http://www.oswd.org">OSWD.org</a>.<br />
© All your copyright information here. </p>
</div>
</body>
</html>
Related examples in the same category