groovyblue : Blue « Templates « HTML / CSS






groovyblue

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Groovy Blue</title>
<style type='text/css'>
/*
Author:    Donny Burnside
Website:  http://www.ginger-ninja.net/
*/

/* Misc. */

* {
  margin:0;
  padding:0;
  }
body {
  font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size:12px;
  background-color:#393939;
  margin:25px 0 4px 0;
  color:#222222;
  }
img {
  border:0;
  }
p {
  margin-bottom:20px;
  line-height:20px;
  }

/* Structure */

#wrapper {
  width:700px;
  margin:0 auto;
  }
#header {
  height:100px;
  line-height:100px;
  background-image:url(groovyblue-images/bg-header.gif);
  background-repeat:no-repeat;
  padding-left:15px;
  }
#navigation {
  float:right;
  margin-right:15px;
  }
#content {
  background-color:#fff;
  background-image:url(groovyblue-images/bg-content.gif);
  background-repeat:no-repeat;
  background-position:top center;
  padding:10px 5px;
  }
#footer {
  text-align:right;
  background-image:url(groovyblue-images/bg-footer.gif);
  background-repeat:no-repeat;
  background-position:top center;
  line-height:24px;
  color:#efefef;
  }

/* Navigation */

#navigation ul {
  list-style-type:none;
  }
#navigation li {
  float:left;
  text-align:center;
  text-transform:lowercase;
  }
#navigation li a {
  display:block;
  height:100px;
  width:75px;
  text-decoration:none;
  color:#ffffff;
  }
#navigation li a:hover {
  color:#222222;
  background:url(groovyblue-images/bg-navigation-hover.gif);
  background-repeat:repeat-x;
  }
#navigation .active {
  color:#222222;
  background:url(groovyblue-images/bg-navigation-hover.gif);
  background-repeat:repeat-x;
  }

/* Headings */

h1 {
  font-size:30px;
  font-weight:normal;
  letter-spacing:-1px;
  }

/* Link Colors */

h1 a {
  color:#fff;
  text-decoration:none;
  }
h1 a:hover {
  color:#fff;
  }

#content a {
  color:#222222;
  text-decoration:none;
  font-weight:bold;
  }
#content a:hover {
  color:#222222;
  text-decoration:underline;
  }

#footer a {
  color:#ffffff;
  text-decoration:none;
  border-bottom:1px dotted #ffffff;
  }
#footer a:hover {
  color:#ffffff;
  }

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <div id="navigation">
      <ul>
        <li><a href="http://www.free-css.com/" class="active">Home</a></li>
        <li><a href="http://www.free-css.com/">Link Two</a></li>
        <li><a href="http://www.free-css.com/">Link Three</a></li>
        <li><a href="http://www.free-css.com/">Link Four</a></li>
      </ul>
    </div>
    <h1><a href="http://www.free-css.com/">Website Title</a></h1>
  </div>
  <div id="content">
    <p>GROOVY BLUE was designed by Donny Burnside of Ginger-Ninja.net and is released under the <a href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons 2.5 license</a>. If you use the design all I ask is that you keep the credit link in the footer. Also, it would be nice if you email me at inbox[at]ginger-ninja.net to let me know how you're using the design. Editable Fireworks .PNG files are included for every image. Enjoy.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="footer"><br />
    &copy; 2006 Your-Website.com | <a href="http://www.free-css.com/">XHTML</a> | Design by <a href="http://www.ginger-ninja.net/">Ginger Ninja!</a> </div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.metamorph_blue
2.metamorph_bluefeather
3.metamorph_blueflower
4.metamorph_blueglowing
5.metamorph_bluemadness
6.metamorph_bluemess_lt2
7.metamorph_bluerock
8.metamorph_bluething
9.metamorph_bluewave
10.metamorph_bubbleblue_lt
11.metamorph_bubblesonblue
12.metamorph_lightblue
13.metamorph_shiningblue
14.metamorph_simpleblue
15.metamorph_uberblue
16.metamorph_wavesinblue
17.blue-hosting
18.blue-neutral
19.blue-pigment1
20.blue-sky
21.blue-white
22.blue-wood
23.Blue 1
24.blue99
25.blueblogtemplate
26.bluebottle
27.BlueBridge
28.bluebrush
29.bluebusiness
30.bluecarbon
31.bluecorporation
32.bluediamond
33.blueflex
34.BlueFlower
35.BlueFresh
36.bluegray
37.blueled
38.blueminimal
39.blueminimalsidebar
40.blueprism
41.Blueshine
42.blueshuffle
43.BlueSpace
44.BlueSquareShadow
45.bluesurge
46.bluethickline
47.bluetoolkit
48.bluewave
49.blueweb
50.blueworld
51.bluey
52.blue_circles
53.blue_sky
54.blue_space
55.blue_trees
56.bublue-studio
57.bussinesblue
58.fain-blue
59.fairyblue
60.basicblue
61.CleanandBlue
62.cleanblue
63.freecss_blue
64.flyingblue
65.easy-blue
66.FunkyCoolBlue
67.genericblue
68.gallery-blue
69.MonsterBlue
70.Simple_Blue
71.wide-blue
72.a_bit_modern_bigBlue
73.mistyblue
74.portal_blue
75.SimplyBlue
76.sleekcssblue
77.Sexy_Blue
78.WonderfulBlue
79.sweetbuzzblue
80.light-blue
81.iblue2b