neutralgreen : Design 4 « Templates « HTML / CSS






neutralgreen

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Neutral Green</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* STANDARD TAG REDEFINITIONS */
BODY{ color: #1D1D1D; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; background-color: #878787; margin: 27px 0 20px 0; padding: 0;  background-image: url(bg_body.gif);  background-attachment: fixed;      }
TD {font-size: 10pt;  }
p { font-size: 10pt;  margin-bottom: 7px; margin-top: 0; }
a{ color: #339F25; text-decoration: none; }
a:hover{ text-decoration: underline; color: #D20000; }
h1, h2, h3, h4, h5{  font-family: "trebuchet ms",arial,tahoma,verdana,sans-serif; letter-spacing: .005em; margin:0 0 1em 0; padding:0;}
form{  margin:0;}

#TOPBORDER{ width:760px; margin-left: auto; margin-right: auto; background-image: url(header.gif); background-repeat: no-repeat; height: 11px; font-size: 1px; }

#TOPNAV{ margin-left: auto; margin-right: auto; text-align: right; width: 740px; font-size: 10px; font-family: "MS Sans Serif", Geneva, sans-serif; padding: 0 10px 0 10px; margin-bottom: 0; margin-top: 0;  background-image: url(bg_margins.gif);  background-color: White;  background-repeat: repeat-y;  height: 30px;            }
  #TOPNAV div{ width: 740px; height: 30px; line-height: 30px; background-image: url(bg_top_caption.gif); background-repeat: repeat-x;  float: right;  }
  #TOPNAV p{ float: right; line-height: 29px;  font-size: 11px;  margin:0; padding:0;   }
  #TOPNAV a{ height: 29px; line-height: 29px; margin: 0; color: #2B4C26; background-repeat: no-repeat;   padding: 0 9px 0 22px;  display: block;  float: left;    background-position: left;           }
  #TOPNAV a.Home{ background-image: url(ico_home.gif);  }
  #TOPNAV a.Contact{ background-image: url(ico_email.gif);  }
  #TOPNAV a.Map{ background-image: url(ico_sitemap.gif);    }
  #TOPNAV a:hover{ color: #CE0000; text-decoration: none; position:relative; top:-1px;}

#HEADER{  width: 730px; padding: 32px 0 0 30px; height:86px; margin-left:auto; margin-right:auto; clear:both;  background-color: #275000;  background-image: url(bg_header.jpg);  background-repeat: no-repeat;    }
  #header-h1{ position:relative;  margin:0; color: #1D411B; font-size: 18pt;  font-weight: normal;  font-family: Arial, Helvetica, sans-serif;   }
  #header-h1 a{ position: absolute; top: -2px; left: -2px; color: White; }
  #header-h1 a:hover{ position: absolute; top: -3px; left: -2px; text-decoration: none; }
  #header-h2{ float: right; font-size: 10pt; padding: 27px 15px 0 0; margin: 0; color: White; font-weight: normal; font-style: italic; }

#NAV{  width: 740px; margin-left:auto; margin-right:auto; clear:both;  background-image: url(bg_margins.gif);  background-repeat: repeat-y;  padding: 0 10px 0 10px;  background-color: White;     }
  #NAV .Wrapper{  height: 30px;  background-image: url(bg_secondnav.gif);  background-repeat: repeat-x;  background-color: #F7F7F7;    }
  #NAV ul{ margin: 0; padding-left: 0; height: 24px; line-height: 24px; display: block; list-style: none;   float: left;        }
  #NAV li{ display: inline;  float: left;  }
  #NAV li a{ height: 30px; line-height: 30px; display: block; padding-left: 25px; padding-right: 25px;   float: left;  font-size: 11px;  font-family: "MS Sans Serif", Geneva, sans-serif;  color: #153A0E;        }
  #NAV li a.Active{ background-color: White; }
  #NAV li a:hover{ background-color: #fafafa; text-decoration: none;  color: #CE0000;    }

#CONTENT{ width: 760px; margin-left: auto; margin-right: auto; }
  #CONTENT .Wrapper{ padding: 0 25px 15px 25px;float: left;  background-image: url(bg_margins.gif);  background-repeat: repeat-y;  background-color: White;   }

#TEXT{ float: right; padding: 0px; margin: 0; width: 475px; }
  #TEXT h2{ margin: 36px 0 15px 0; padding: 6px 0 0 25px; font-weight: bold; color: #999999; font-size: 9pt;  border-bottom: 1px solid #73CA00;  background-image: url(bg_text_h2.gif);  background-repeat: no-repeat;  height: 19px;  text-transform: uppercase;  line-height: 19px;  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  background-position: left;            }
  #TEXT p{  margin-bottom: 1em; line-height:1.4em;}
  #TEXT p.Aligned{ text-align: justify; }
  #TEXT img.Left{ float: left; margin: 3px 15px 5px 0; padding:2px; border:1px solid #CCCCCC;}

#SIDE{ float: left; width: 210px; padding: 0px 0 0 0; display: block;  padding-bottom: 3em;  }
  #SIDE h2{ margin: 36px 0 15px 0; padding: 6px 0 0 25px; font-weight: bold; color: #999999; font-size: 9pt; border-bottom: 1px solid #73CA00; background-image: url(bg_text_h2.gif); background-repeat: no-repeat; height: 19px; text-transform: uppercase; line-height: 19px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; background-position: left; }
  #SIDE p{ font-size: 10px;  font-family: "MS Sans Serif", Geneva, sans-serif;  line-height: 1.5em;  margin-bottom: 12px;       }
  #SIDE p.Aligned{ text-align: justify; }

#FOOTER{  clear:both; width: 710px; margin-left:auto; margin-right:auto;  padding: 0 25px 20px 25px;  background-color: White;  background-image: url(bg_margins.gif);  background-repeat: repeat-y;     }
  #FOOTER .Line{ background-color: #FAFAFA; height: 1px;  margin-bottom: 7px;  }
  #FOOTER .Line span{ background-color: #73CA00; height: 1px; line-height: 1px;  float: left;  display: block;  width: 235px;  margin: 0;  padding: 0;  font-size: 1px;       }
  #FOOTER p{ font-size: 11px; line-height: 18px; margin: 0;  color: #8B8B8B;  font-family: "MS Sans Serif", Geneva, sans-serif;        }
  #FOOTER a{ font-size: 11px; font-weight: normal; text-decoration: none; color: #8B8B8B; }
  #FOOTER a:hover{ color: #B22222; text-decoration: underline; }
  #FOOTER .Side{ float: right; }

#BOTTOMBORDER{ width:760px; margin-left: auto; margin-right: auto; background-image: url(footer.gif); background-repeat: no-repeat; height: 11px; font-size: 1px; }  


</style>


</head>
<body>
<div id="TOPBORDER"></div>
<div id="TOPNAV">
  <div>
    <p><a class="Home" href="http://www.free-css.com/">Home</a> <a class="Contact" href="http://www.free-css.com/">Contact Us</a> <a class="Map" href="http://www.free-css.com/">Map</a></p>
  </div>
</div>
<div id="HEADER">
  <h1>Your Company <a href="http://www.free-css.com/">Your Company</a></h1>
  <h2>Beauty without grace is the hook without the bait.</h2>
</div>
<div id="NAV">
  <div class="Wrapper">
    <ul>
      <li><a class="Active" href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Products</a></li>
      <li><a href="http://www.free-css.com/">Customer Care</a></li>
      <li><a href="http://www.free-css.com/">FAQ</a></li>
      <li><a href="http://www.free-css.com/">Contacts</a></li>
    </ul>
  </div>
</div>
<div id="CONTENT">
  <div class="Wrapper">
    <!-- LEFT SIDE -->
    <div id="SIDE">
      <h2 class="Top">Welcome</h2>
      <p class="Aligned"><b>Lorem ipsum dolor?</b><br />
        Uniskisli et castrum de Insula, in hoc autem capti Eustatius Poer, Gulielmus Graunt, et D. Jnantem rediit. Multas injurias tam in ecclesiasticos quam laicos fecit.</p>
      <p class="Aligned">Uniskisli et castrum de Insula, in hoc autem capti Eustatius Poer, Gulielmus Graunt, et D. Jnantem rediit. Multas injurias tam in ecclesiasticos quam laicos fecit.</p>
      <p class="Aligned"><b>Nullam non justo?</b><br />
        Uniskisli et castrum de Insula, in hoc autem capti Eustatius Poer, Gulielmus Graunt, et D. Jnantem rediit. Multas injurias tam in ecclesiasticos quam laicos fecit.</p>
    </div>
    <!-- MAIN TEXT BLOCK (CENTER) -->
    <div id="TEXT">
      <h2>About our company</h2>
      <p class="Aligned"><img src="neutralgreen-images/photo.jpg" alt="" width="202" height="123" class="Left" />Lorem ipsum dolor sit amet, consectetuer adipiscing <a href="http://www.free-css.com/">elit</a>. Nunc rhoncus, eros nec dictum adipiscing, mauris orci ornare pede, a dictum neque lacus sed ligula. Pellentesque mollis arcu quis lorem. Sed vitae quam et mauris euismod aliquam. Pellentesque quis nisl a ante iaculis volutpat. Duis varius sem at nisi. Etiam mattis scelerisque erat. Maecenas lacus sapien, elementum non, semper id, gravida vel, risus. Suspendisse mi risus, iaculis in, bibendum quis, pulvinar eget, velit. Fusce neque libero, vestibulum a, fermentum vel, rutrum sit amet, mauris. Ut ac dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum nisi congue ligula. </p>
      <p class="Aligned">Nam dignissim ligula vel sapien. Curabitur viverra lacus sagittis sem. Donec pretium pretium sapien. Aenean dapibus, augue quis pulvinar iaculis, velit libero rhoncus dui, a adipiscing elit libero at elit. Donec facilisis mauris quis dui. Donec et justo. Praesent ornare vestibulum quam. Sed ultricies pellentesque mi. Etiam odio. Aenean justo. Fusce quis massa ac risus sodales ultricies. Duis eget eros sed ante placerat dignissim. </p>
      <h2>Solutions</h2>
      <p class="Aligned">Lorem ipsum dolor sit amet, consectetuer adipiscing <a href="http://www.free-css.com/">elit</a>. Nunc rhoncus, eros nec dictum adipiscing, mauris orci ornare pede, a dictum neque lacus sed ligula. Pellentesque mollis arcu quis lorem. Sed vitae quam et mauris euismod aliquam. Pellentesque quis nisl a ante iaculis volutpat. Duis varius sem at nisi. Etiam mattis scelerisque erat. Maecenas lacus sapien, elementum non, semper id, gravida vel, risus. Suspendisse mi risus, iaculis in, bibendum quis, pulvinar eget, velit. Fusce neque libero, vestibulum a, fermentum vel, rutrum sit amet, mauris. Ut ac dui. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum nisi congue ligula. </p>
      <p class="Aligned">Nam dignissim ligula vel sapien. Curabitur viverra lacus sagittis sem. Donec pretium pretium sapien. Aenean dapibus, augue quis pulvinar iaculis, velit libero rhoncus dui, a adipiscing elit libero at elit. Donec facilisis mauris quis dui. Donec et justo. Praesent ornare vestibulum quam. Sed ultricies pellentesque mi. Etiam odio. Aenean justo. Fusce quis massa ac risus sodales ultricies. Duis eget eros sed ante placerat dignissim. </p>
    </div>
    <!-- END CENTER BLOCK -->
  </div>
</div>
<div id="FOOTER">
  <div class="Line"><span></span></div>
  <p> <a href="http://www.free-css.com/">FAQ</a> &middot; <a href="http://www.free-css.com/">Terms &amp; Conditions</a> &middot;<a href="http://www.free-css.com/">Home</a> &middot; <a href="http://www.free-css.com/">Contact Us</a> <span class="Side">Designed by <a href="http://www.gettemplate.com">GetTemplate.com</a></span></p>
  <p>&copy; 2007, Company Name. All rights reserved. </p>
</div>
<div id="BOTTOMBORDER"></div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.characterized
40.charcoal
41.charitable-organization
42.chary
43.chasmogamous
44.chesspiece
45.chic
46.chicanery
47.chromz
48.churchsitev.2
49.citrus-island1-1
50.clementine
51.clicker
52.modernclassic
53.modernmagic
54.modernworld
55.A_Simple_Theme
56.minimalistica
57.miniseries
58.mint-idea
59.minty
60.mirax
61.miscellaneous
62.mistybud
63.mlpdesign02
64.mlpdesign03
65.mlpdesign04
66.mlpdesign08
67.model-4-me
68.model-portfolio
69.modelagency
70.modelportfolio
71.model_2
72.moderna
73.Modified
74.modulation
75.module-mag
76.mokofactory
77.monster
78.mork-horisont
79.mountainbreeze
80.mouse
81.mrtechie
82.multiflex2
83.multiple
84.multiplex
85.music
86.muzzle
87.MyCode
88.mydiary
89.myfamily
90.myhedspacefree08
91.mykindathing
92.myportfolio
93.mystic-garden
94.Mythology
95.myvalentine
96.naeve
97.natheless
98.nationalpark
99.neapolitan
100.neatness
101.nebuladog
102.nedweb
103.NelVoize
104.neoneon
105.neonix
106.neoplanet-01
107.neotech
108.netindustries
109.neuphoric
110.neutral
111.neutraldesk
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year