bluegray : Blue « Templates « HTML / CSS

bluegray

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>BlueGray 1 Column</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<style type='text/css'>
/* Blue Gray Template CSS First Light Web Design 2007 */

body {font-size: 12px;
      font-family: "palatino linotype", "trebuchet ms", "times new roman";
      margin: 0;
      padding: 0;
      background: #F3F3F3 url(bluegray-images/background.png) repeat-x;
      color: #5B6973;
      text-align: center;} /* Needed to center layout in old IE browsers. */

acronym, abbr {cursor: help;
               border-bottom: 1px dotted;}

h1, h2, h3, h4, h5, h6, p {margin: 0 0 25px 0;
                           padding: 0;}

p {line-height: 160%;}

.justify {text-align: justify;}

ul {list-style-type: square;}

img {border: 0;
     margin: 0 0 25px 0;}
       
h1 {font-size: 26px;}
h2 {font-size: 24px;}
h3 {font-size: 22px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}

.bottom-border {border-bottom: 1px solid #D8D8D8;}

a {color: #F60; text-decoration: none; background-color: #F3F3F3;}
a:link {color: #F60; background-color: #F3F3F3;}
a:visited {color: #F60; background-color: #F3F3F3;}
a:hover {color: #4153AD; background-color: #F3F3F3;}

.right {float: right;}

.left {float: left;
       margin: 3px 5px 0 0;}

.clear-fix:after {content: ".";
                  display: block;
                  clear: both;
                  height: 0;
                  visibility: hidden;}

.clear-fix {display: inline-block;}

/* Hide from IE Mac \*/

.clear-fix {display:block;}

/* End hide from IE Mac */
                  
#container {width: 780px;
            margin: 0 auto;
            text-align: left;}

#header {width: 100%;
         height: 144px;
         position: relative;}

#header h1 {margin: 0;}

#logo {position: absolute;
       left: 0;
       top: 66px;
       width: 281px;
       height: 31px;}

#logo img {display: block;}

#logo a {background: transparent;}

/* Begin Search Form CSS */

#search {position: absolute;
         right: 0;
         top: 70px;}

#search input#s {margin-right: 5px;
                 vertical-align: middle;
                 border: 1px solid #6A7A86;
                 padding: 0.24em;
                 width: 135px;
                 background-color: #E4E4E4;
                 color: #6C7074;}

#search input#s:focus {background-color: #F3F3F3;
                       color: #6C7074;}

#search input#submit
 
{background: #6C7074 url(bluegray-images/search_background.png) repeat-x;
 color: #D8DCE0;
 border: 1px solid #515D67;
 vertical-align: middle;
 padding: 0.38em;
 font-size: 0.8em;}

/* End Search Form CSS */

/* Begin main navigation menu. */

#menu {width: 100%;
       height: 42px;
       clear: both;
       background: url(bluegray-images/button_end_gradient.png) center left no-repeat;
       position: relative;}

#menu ul {list-style-type: none;
          margin: 0;
          padding: 0;
          position: absolute;
          left: 2px;
          background: #6A7A86 url(bluegray-images/menu_background.png) repeat-x;
          color: #DCE0E4;}

#menu ul li {display: inline;}

#menu ul li a {text-decoration: none;
               height: 42px;
               padding: 0 17px;
               margin: 0;
               line-height: 42px;
               display: block;
               float: left !important;
               background: url(bluegray-images/button_end_gradient.png) center right no-repeat;
               color: #D8DCE0;
               font-size: 16px;
               font-weight: bold;}

#menu ul li a:hover {background: url(bluegray-images/button_end_gradient.png) center right no-repeat;
                     color: #FFF;}

/* End main navigation menu. */

#wrapper {width: 100%;
          margin-top: 11px;
          padding: 0;} 

#left-column {width: 510px;
              float: left;
              padding: 0;
              margin: 0;}

#right-column {width: 240px;
               padding: 0;
               float: right;
               margin: 0;}

p#intro {font-size: 24px;
         font-style: italic;
         margin: 0;}

#learn-more {width: 100%;}

#learn-more a img {display: block;
                   float: right;}

/* Sub-content section */

#sub-outer {width: 100%;
            clear: both;
            padding: 0;
            margin: 0;}

#sub-wrapper {float: left;
              width: 100%;}

#sub-center {margin: 0 270px;}

#sub-right {float: left;
            width: 240px;
            margin-left: -240px;}

#sub-left {float: left;
           width: 240px;
           margin-left: -780px;}

/* End sub-content section */

/* The footer is outside of the main container and has an extra 10px in width to compensate visually for the background shadows. */ 

#footer {width: 790px;
         height: 56px;
         margin: 0 auto;
         background: #F3F3F3 url(bluegray-images/footer_background.png) repeat-x;
         color: #5B6973;
         clear: both;
         text-align: left;
         padding: 0;
         position: relative;}

#footer-content {padding: 19px 15px;}

#footer-right {position: absolute;
               right: 0;
               top: 0;
               width: 15px;
               height: 56px;
               background: #F3F3F3 url(bluegray-images/footer_right.png) no-repeat;
               color: #5B6973;}
               
#footer-left {position: absolute;
              left: 0;
              top: 0;
              width: 15px;
              height: 56px;
              background: #F3F3F3 url(bluegray-images/footer_left.png) no-repeat;
              color: #5B6973;}

#footer p {margin: 0;}

#footer a {background: transparent;}

#footer-navigation {float: right;
                    margin: 0;}

/* Featured services */

.featured-wrapper {background: #6A7A86 url(bluegray-images/featured_background.png) repeat-y;
                   color: #DCE0E4;
                   width: 100%;
                   margin-bottom: 50px;}

.featured-content {padding: 0;
                   margin: -8px 0 0;
                   font-size: 14px;}

.featured-content ul {margin: 0;
                      padding: 0 0 10px 25px;
                      font-style: italic;
                      list-style-type: none;
                      line-height: 124%;}

.featured-content p {margin: 0;
                     padding: 0 10px 10px;
                     line-height: 125%;}

.featured-content a {background: transparent;}

.featured-content a img {padding: 0;
                         margin: 0;
                         display: block;}

.featured-top {width: 240px;
               height: 18px;
               background: #6A7A86 url(bluegray-images/featured_top.png) no-repeat;
               color: #DCE0E4;}

/* End Featured Services CSS */

/* Featured news */

.headline {margin: 0 0 5px;
           padding: 0;
           font-size: 12px;}

.date {color: #F60;
       background-color: #F3F3F3;
       float: right;}

/* A single column division. Good for terms of use, privacy policy, etc. */

#single-column {width: 100%;
                clear: both;
                margin-top: 11px;
                padding: 0;}

</style>


<!--[if lt IE 7]>
  <link rel="stylesheet" href="iefixes.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
  <div id="header">
    <div id="logo"> <a href="http://www.free-css.com/"><img style="width: 281px; height: 31px;" src="bluegray-images/logo.png" alt="" /></a> </div>
    <form id="search" method="get" action="http://www.free-css.com/">
      <div>
        <input type="text" value="Search Our Site" id="s" maxlength="64" name="keywords" onfocus="if(this.value=='Search Our Site')value=''" onblur="if(this.value=='')value='Search Our Site';" />
        <input type="submit" id="submit" value="Search" />
      </div>
    </form>
  </div>
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About Us</a></li>
      <li><a href="http://www.free-css.com/">News</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Contact Us</a></li>
      <li><a href="http://www.free-css.com/">Resources</a></li>
    </ul>
  </div>
  <div id="single-column">
    <h1>Header</h1>
    <p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id, aliquet sit amet, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id elit a risus imperdiet luctus. Vestibulum vitae enim sed sapien elementum blandit. Vestibulum vel quam. Morbi tincidunt suscipit arcu. Aliquam iaculis, purus in convallis laoreet, tortor neque blandit mauris, nec dictum odio libero pulvinar quam. Suspendisse ipsum elit, pellentesque vel, ullamcorper vel, egestas tincidunt, erat. Phasellus blandit ullamcorper erat. Curabitur volutpat dolor in dolor. Aliquam ac erat.</p>
    <p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id, aliquet sit amet, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id elit a risus imperdiet luctus. Vestibulum vitae enim sed sapien elementum blandit. Vestibulum vel quam. Morbi tincidunt suscipit arcu. Aliquam iaculis, purus in convallis laoreet, tortor neque blandit mauris, nec dictum odio libero pulvinar quam. Suspendisse ipsum elit, pellentesque vel, ullamcorper vel, egestas tincidunt, erat. Phasellus blandit ullamcorper erat. Curabitur volutpat dolor in dolor. Aliquam ac erat.</p>
    <h2>Header</h2>
    <p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id, aliquet sit amet, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id elit a risus imperdiet luctus. Vestibulum vitae enim sed sapien elementum blandit. Vestibulum vel quam. Morbi tincidunt suscipit arcu. Aliquam iaculis, purus in convallis laoreet, tortor neque blandit mauris, nec dictum odio libero pulvinar quam. Suspendisse ipsum elit, pellentesque vel, ullamcorper vel, egestas tincidunt, erat. Phasellus blandit ullamcorper erat. Curabitur volutpat dolor in dolor. Aliquam ac erat.</p>
    <p class="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse arcu enim, commodo id, auctor id, aliquet sit amet, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id elit a risus imperdiet luctus. Vestibulum vitae enim sed sapien elementum blandit. Vestibulum vel quam. Morbi tincidunt suscipit arcu. Aliquam iaculis, purus in convallis laoreet, tortor neque blandit mauris, nec dictum odio libero pulvinar quam. Suspendisse ipsum elit, pellentesque vel, ullamcorper vel, egestas tincidunt, erat. Phasellus blandit ullamcorper erat. Curabitur volutpat dolor in dolor. Aliquam ac erat.</p>
  </div>
</div>
<div id="footer">
  <div id="footer-left"></div>
  <div id="footer-right"></div>
  <div id="footer-content">
    <div id="footer-navigation"> <a href="http://www.free-css.com/">Terms </a>&middot; <a href="http://www.free-css.com/">Privacy Policy </a>&middot; <a href="http://www.free-css.com/">Site Map </a>&middot; Design by <a href="http://www.firstlightwebdesign.com">First Light Web Design</a> </div>
    <p>Copyright &copy; 2007 Your Site.  All rights reserved.</p>
  </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.	blueled
37.	blueminimal
38.	blueminimalsidebar
39.	blueprism
40.	Blueshine
41.	blueshuffle
42.	BlueSpace
43.	BlueSquareShadow
44.	bluesurge
45.	bluethickline
46.	bluetoolkit
47.	bluewave
48.	blueweb
49.	blueworld
50.	bluey
51.	blue_circles
52.	blue_sky
53.	blue_space
54.	blue_trees
55.	bublue-studio
56.	bussinesblue
57.	fain-blue
58.	fairyblue
59.	basicblue
60.	CleanandBlue
61.	cleanblue
62.	freecss_blue
63.	flyingblue
64.	easy-blue
65.	FunkyCoolBlue
66.	genericblue
67.	gallery-blue
68.	MonsterBlue
69.	Simple_Blue
70.	wide-blue
71.	a_bit_modern_bigBlue
72.	mistyblue
73.	portal_blue
74.	SimplyBlue
75.	sleekcssblue
76.	Sexy_Blue
77.	WonderfulBlue
78.	sweetbuzzblue
79.	light-blue
80.	groovyblue
81.	iblue2b