thingreenline : Green « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Green 




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:auto 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 &amp; 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 (almostobligatory 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 &amp; 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 &amp; 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 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 />
&copy; All your copyright information here. </p>
</div>
</body>
</html>

   
    
    
  














Related examples in the same category
1.metamorph_abstractgreen
2.metamorph_blueandgreen
3.metamorph_bluegreen
4.metamorph_green
5.metamorph_greenfield
6.metamorph_greenfish
7.metamorph_greenice
8.metamorph_greenisland
9.metamorph_greenland
10.metamorph_greenlight_lt
11.metamorph_greenmint
12.metamorph_greenplanet
13.metamorph_greenpound
14.metamorph_greenwood
15.metamorph_greeny
16.cleanandgreen
17.green-day
18.green-mile
19.green-solutions
20.green-stripes
21.green-web
22.greenbusiness
23.greencastle
24.greencogs
25.greencommunity
26.greener
27.greenery
28.greenfeeling
29.greenfest
30.greenforest
31.GreenHome
32.greenlight
33.greenorange
34.greenparks
35.greenpeace
36.greenpeople
37.greenpiece
38.greenred
39.GreenSpan
40.greenspark
41.GreenSquareShadow
42.greensteps
43.greenstripes
44.greenthumb
45.greenway
46.greenworld
47.GreenWOW
48.greeny
49.greenybox
50.greenygrass
51.greenylife
52.greenypat
53.greenzap
54.curiouslygreen
55.gogreen
56.green piece
57.green-blog
58.Green 3
59.green80
60.GreeNadReD
61.greenandplain
62.Green_Corporate_NMK
63.Green_dream
64.Green_Feeling
65.Green_Glass
66.green_light
67.green_mile
68.Green_Template
69.green_web
70.evergreen
71.simplygreen
72.wide-green
73.WonderfulGreen
74.soft_green
75.simplegreen
76.ibex_green
77.liquidgreen
78.leafy_green
79.Green link template
80.Green background template
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.