wide-green : Green « Templates « HTML / CSS

wide-green
  

<!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" xml:lang="en" lang="en">
<head>
<title>Wide Green</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*  This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */



/* CSS Document */


/* General */

* {
margin: 0;
padding: 0;
}

html {
height: 100%;
font-size: 62.5%;
}

body {
height: 100%;
text-align: center;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
min-width: 950px;
}

#main {
width: 100%;
background: url('wide-green-img/main-bg.gif') repeat-y center 0;
min-height: 100%;
height: 100%;
position: relative;
}
 
body>#main {
height: auto;
}

a:link, a:visited {
color: #2E6400;
text-decoration: underline;
font-weight: bold;
}

a:hover {
text-decoration: none;
}

.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
content: ' ';
}

.cleaning-box { 
min-height: 1px;
}

.cleaning-box:after {
display: block; 
clear: both; 
visibility: hidden; 
height: 0; 
font-size: 0; 
content: ' ';
}

.noscreen {
display: none;
}

.hidden { /* Skip menu */
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}


/* Paragraphs, headings, ... */

p {
line-height: 170%;
margin-bottom: 10px;
color: #163000;
}

h1 {
font-size: 2.8em;
font-weight: normal;
color: #FFFFFF;
text-align: left;
padding: 49px 0 0 42px;
background: url('wide-green-img/h1-bg-flame.png') no-repeat 0 43px;
}

h1 a:link, h1 a:visited {
font-weight: normal;
text-decoration: none;
color: #FFFFFF;
}

h2 {
font-size: 1.6em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #FFFFFF;
text-align: left;
margin: 3px 0 0 2px;
}

h3 {
font-size: 1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #295B00;
letter-spacing: 1px;
padding-bottom: 3px;
border-bottom: 1px solid #295B00;
margin-bottom: 7px;
}

address {
font-style: normal;
line-height: 180%;
margin-left: 7px;
}

/* Images */

img.float {
float: left;
border: 1px solid #295B00;
margin: 0.5em 0.8em 0.5em 0;
}


/* Header */

#header {
height: 198px;
position: relative;
background: #285800 url('wide-green-img/hd-bg.gif') repeat-x 0 0;
}

#header-in {
width: 900px;
height: 198px;
position: relative;
margin: 0 auto;
}

ul#navigation {
float: right;
margin: 8px 1px 0 0;
display: inline;
color: #FFFFFF;
}

ul#navigation li {
float: left;
display: inline;
list-style-type: none;
text-align: center;
font-size: 0.9em;
}

ul#navigation li a, ul#navigation li a:visited {
text-decoration: none;
color: #FFFFFF;
font-weight: normal;
}

ul#navigation li a:hover {
text-decoration: underline;
}

li#house {
background: url('wide-green-img/house.gif') no-repeat 0 1px;
padding-left: 24px;
}

li#house a {
margin-right: 16px;
}

li#sitemap {
background: url('wide-green-img/sitemap.gif') no-repeat 0 2px;
padding-left: 24px;
margin-left: 16px;
}

li#sitemap a {
margin-right: 16px;
}

li#envelope {
background: url('wide-green-img/envelope.gif') no-repeat 0 2px;
padding-left: 23px;
margin-left: 16px;
}


/* Search form */

form.searching {
width: 210px;
position: absolute;
top: 47px;
right: 0;
}

form.searching fieldset {
border: 0;
}

form.searching input.search {
letter-spacing: 1px;
float: left;
padding: 2px 0 2px 6px;
width: 139px;
border: 1px solid gray;
}

form.searching input.hledat {
letter-spacing: 1px;
padding-left: 0;
margin-left: 4px;
font-weight: bold;
color: #FFFFFF;
float: left;
}

form.searching label {
display: none;
}


/* Menu */

#menu-box {
background: #4A4A4A url('wide-green-img/menu-bg.gif') repeat-x 0 0;
border-bottom: 3px solid black;
}

#menu {
width: 950px;
margin: 0 auto;
}

#menu li {
display: inline;
list-style-type: none;
text-align: center;
}

#menu li.first a {
margin-left: 1.6em;
display: inline;
}

#menu li a {
float: left;
color: #FFFFFF;
font-weight: bold;
font-size: 1.1em;
display: block;
padding: 0.9em 1.4em 0.7em 1.4em;
}

#menu li a:hover, #menu li a.active {
color: #000000;
background-color: #DFF300;
font-weight: bold;
font-size: 1.1em;
}


/* Content box */

#content {
background: #FFFFFF url('wide-green-img/content-bg.gif') repeat-x 0 0;
min-height: 624px;
}

#content-box {
width: 950px;
margin: 0 auto;
background-color: #FFFFFF;
text-align: left;
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
padding-bottom: 80px;
min-height: 544px;
}

#content-box-in-left {
width: 70%;
float: left;
background-color: #FFFFFF;
}

#content-box-in-left-in {
margin: 1.8em 1em 7em 1.8em;
}

#content-box-in-right {
width: 29%;
float: right;
background-color: #FFFFFF;
}

#content-box-in-right h3 {
border: 0;
background-color: #252525;
color: #FFFFFF;
padding: 3px 0 4px 10px;
font-size: 1.3em;
}

#content-box-in-right-in {
margin: 1.8em 0 7em 1.5em;
}

#content-box-in-right-in dl {
margin: 0 0 40px 2px;
}

#content-box-in-right-in dt {
margin-bottom: 3px;
font-weight: bold;
background-color: #E8FFC8;
color: #204300;
line-height: 140%;
padding: 1px 0 1px 5px;
}

#content-box-in-right-in dd {
margin: 0 5px 18px 2px;
line-height: 140%;
}


/* Table */

table {
font-size: 1.1em;
border-collapse: collapse;
border: 2px solid #2C5D00;
margin: 15px 0 20px 0;
table-layout: fixed;
width: 90%;
}

th, td {
padding: 3px 13px;
border: 1px solid #2C5D00;
}

th {
text-align: right;
font-weight: bold;
}

td {
text-align: right;
}

.first-row {
background: #F4FF7C;
}

.first-row th {
text-align: center;
font-weight: bold;
border-bottom: 2px solid #2C5D00;
}

.first-column {
background: #FFD162;
border-right: 1px solid #2C5D00;
}

.last-column {
background-color: #FFD162;
border-left: 1px solid #2C5D00;
}

#footer {
width: 100%;
height: 60px;
background: #285800 url('wide-green-img/footer-bg.gif') repeat-x 0 0;
position: absolute;
bottom: 0;
left: 0;
}

#footer-in {
width: 950px;
margin: 0 auto;
}

p.footer-left {
float: left;
width: 450px;
color: #FFFFFF;
text-align: left;
margin: 9px 0 0 15px;
display: inline;
}

p.footer-left a, p.footer-left a:visited {
color: #FFFFFF;
padding: 1px 2px;
}

p.footer-left a:hover {
background-color: #FFFFFF;
color: #2E6600;
}

p.footer-right {
float: right;
width: 450px;
color: #FFFFFF;
text-align: right;
margin: 9px 15px 0 0;
display: inline;
}

p.footer-right a, p.footer-right a:visited {
color: #FFFFFF;
padding: 1px 2px;
}

p.footer-right a:hover {
background-color: #FFFFFF;
color: #2E6600;
}

p.footer-right a, p.footer-right a:visited  {
font-weight: normal;
}


</style>


<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/style-ie.css" media="screen, projection, tv" /><![endif]-->
<link rel="stylesheet" href="css/style-print.css" type="text/css" media="print" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="main">
  <div id="header">
    <div id="header-in">
      <ul id="navigation">
        <li id="house"><a href="http://www.free-css.com/">Homepage</a>|</li>
        <li id="sitemap"><a href="http://www.free-css.com/">Sitemap</a>|</li>
        <li id="envelope"><a href="http://www.free-css.com/">Contact us</a></li>
      </ul>
      <h1><a href="http://www.free-css.com/">Wide Green</a></h1>
      <h2>Your slogan, your sevices, your offer&hellip;</h2>
      <form  class="searching" action="http://www.free-css.com/">
        <fieldset>
        <label>Searching</label>
        <input class="search" type="text" onfocus="if(this.value==this.defaultValue)this.value=''" 
        onblur="if(this.value=='')this.value=this.defaultValue" value="Search term&hellip;" />
        <input class="hledat" type="image" src="wide-green-img/search-button.gif" name="" alt="Search" />
        </fieldset>
      </form>
    </div>
  </div>
  <div id="menu-box" class="cleaning-box"> <a href="#skip-menu" class="hidden">Skip menu</a>
    <ul id="menu">
      <li class="first"><a href="http://www.free-css.com/" class="active">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Portfolio</a></li>
      <li><a href="http://www.free-css.com/">Price list</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
  <hr class="noscreen" />
  <div id="skip-menu"></div>
  <div id="content">
    <div id="content-box">
      <div id="content-box-in-left">
        <div id="content-box-in-left-in">
          <h3>LOREM IPSUM DOLOR SIT AMET</h3>
          <img src="wide-green-img/image.jpg" alt="" width="141" height="101" class="float" />
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec non metus nec dui dignissim elementum. Maecenas commodo malesuada augue. Fusce at arcu sed diam facilisis placerat. Morbi venenatis, odio in gravida dictum, odio enim viverra libero, a <a href="http://www.free-css.com/">volutpat nisl</a> dui sed quam. Proin venenatis gravida nunc. Aliquam justo felis, consequat nec, ultricies vel, sollicitudin eleifend, dolor. Nullam nec eros. Etiam semper mi et erat. Curabitur vel leo. Suspendisse potenti. Maecenas aliquet fermentum tellus. Curabitur purus dolor, congue eu, pulvinar eleifend, ultricies dictum, nisi. Aliquam erat volutpat. Donec pulvinar est vel leo.</p>
          <div class="cleaner">&nbsp;</div>
          <p>Phasellus mollis. Vivamus sapien. Proin imperdiet. Sed ultrices erat sit amet massa. Praesent quis mi. Pellentesque eu neque. Sed congue felis eget risus. Morbi nulla lectus, viverra ac, elementum eu, faucibus tempor, purus. Pellentesque venenatis, eros vel viverra varius, est velit tristique tellus, in commodo est arcu nec nisi. Phasellus pulvinar, magna at gravida pretium, diam massa lobortis sem, quis <a href="http://www.free-css.com/">pharetra neque</a> ante ac velit. Vivamus semper. Quisque fermentum turpis quis mauris. Sed massa ipsum, consectetuer non, ornare vitae, rhoncus eu, mauris. Curabitur id purus. Vivamus laoreet.</p>
          <h3>LOREM IPSUM DOLOR SIT AMET</h3>
          <table>
            <col class="first-column" />
            <col span="6" />
            <col class="last-column" />
            <tr class="first-row">
              <th></th>
              <th>2002</th>
              <th>2003</th>
              <th>2004</th>
              <th>2005</th>
              <th>2006</th>
              <th>2007</th>
              <th>&sum;</th>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
            <tr>
              <th>Lorem</th>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
          </table>
        </div>
      </div>
      <hr class="noscreen" />
      <div id="content-box-in-right">
        <div id="content-box-in-right-in">
          <h3>News</h3>
          <dl>
            <dt>February 2008</dt>
            <dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
            <dt>February 2008</dt>
            <dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
            <dt>February 2008</dt>
            <dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
            <dt>February 2008</dt>
            <dd>Donec massa dui, rhoncus nec, ornare sit amet, euismod vitae, mi.</dd>
          </dl>
          <h3>Contact information</h3>
          <address>
          <strong>Company</strong><br />
          Street<br />
          City<br />
          Phone: 0 123 456 789<br />
          Fax: 0 123 456 789<br />
          E-mail: info&#64; company.com
          </address>
        </div>
      </div>
      <div class="cleaner">&nbsp;</div>
    </div>
  </div>
  <hr class="noscreen" />
  <div id="footer">
    <div id="footer-in">
      <p class="footer-left">&copy; <a href="http://www.free-css.com/">Your website name</a>, 2008.</p>
      <p class="footer-right"><a href="http://www.mantisatemplates.com/">Free web templates</a> by Mantis-a</p>
    </div>
  </div>
</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.	WonderfulGreen
73.	soft_green
74.	simplegreen
75.	thingreenline
76.	ibex_green
77.	liquidgreen
78.	leafy_green
79.	Green link template
80.	Green background template