green80 : Green « Templates « HTML / CSS

HTML / CSS » Templates » Green 
green80
    

<!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>Green80 Contact</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* global */
html{height: 100%;}

body
font-family: verdana, arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .68em;
}

p
margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
}

h1
font-family: arial, sans-serif;
  font-size: 108%;
  letter-spacing: .1em;
}

h2
margin: 0px;
  padding: 0px 0px 4px 0px;
  font-size: 100%;
}

img{border: 0px;}

a{outline: none;}

/* image positioning - left, right and center */
.left
float: left; 
  padding: 0px 8px 0px 0px;
}

.right
float: right; 
  padding: 0px 0px 0px 8px;
}

.center
display: block;
  text-align: center;
  margin: auto;
}

/* block quote */
blockquote
margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-left: 8px solid;
}

/* unordered list */
ul
margin: 8px 0px 0px 16px;
  padding: 0px;
}

ul li
list-style-type: square;
  margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* ordered list */
ol
margin: 8px 0px 0px 24px;
  padding: 0px;
}

ol li
margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
margin-left: auto; 
  margin-right: auto;
}

/* main container */
#main{width: 780px;}

/* links above the logo / footer */
#links, #footer
width: 726px;
  height: 24px;
  font-size: 88%;
  text-transform: uppercase;
  padding: 12px 21px 0px 19px;
}

#links{text-align: right;}

#footer
text-align: center; 
  border-top: 2px solid;
}

#links a, #footer a{text-decoration: none;}

#links a:hover, #footer a:hover{text-decoration: underline;}

/* logo */
#logo
width: 766px;
  height: 125px;
  border-top: 2px solid;
  border-bottom: 5px solid;
}

#logo h1, #logo h2
margin: 0px;
  letter-spacing: .2em;
}

#logo h1
padding: 28px 0px 0px 19px;
  font-size: 160%;
}

#logo h2
font-family: arial, sans-serif;
  padding: 5px 0px 0px 19px;
  font-size: 108%;
}

/* navigation menu */
#menu
height: 30px;
  width: 766px;
  margin-top: -30px;
  position: relative;
}

#menu ul{margin: 0px auto;

#menu li
float: left; 
  margin: 0px 5px 0px 0px; 
  padding: 0px;
  list-style: none;


#menu li a 
display: block; 
  float: left; 
  height: 22px;
  text-decoration: none; 
  padding: 6px 19px 2px 19px;


/* main content */
#content
width: 766px;
  overflow: hidden;


/* column 1 - contains sidebar items */
#column1
width: 198px;
  margin: 22px 0px 0px 0px;
  float: right;
  padding: 19px 19px 15px 19px;
}

.sidebaritem
text-align: left;
  width: 168px;
  float: left;
  margin: 0px 0px 23px 0px;
  border: 1px solid;
  padding: 14px 8px 14px 19px;
}

.sidebaritem h1
margin: 0px; 
  font-weight: normal;
  padding: 0px 0px 16px 0px;
  text-transform: uppercase;
}

.sidebaritem p
line-height: 16px; 
  padding: 0px 0px 8px 0px;
}

.sidebaritem a, .sidebaritem a:hover
padding: 0px 0px 2px 19px;
  text-decoration: none;
}

.sbilinks{padding: 0px}

.sbilinks ul{margin: 0px auto;

.sbilinks li 
margin: 0px; 
  float: left; 
  list-style: none; 


.sbilinks li a , .sbilinks li a:hover
float: left; 
  height: 16px;
  text-decoration: none; 
  padding: 5px 0px 4px 19px;
  width: 149px;


/* column 2 - page content */
#column2
text-align: justify;
  width: 508px;
  float: left;
  padding: 2px 3px 15px 19px;
}

#column2 h1
font-family: arial, sans-serif;
  padding: 16px 0px 5px 0px; 
  margin: 0px 0px 12px 0px; 
  border-bottom: 1px solid;
  font-size: 150%;
  text-transform: uppercase;
  font-weight: normal;
}

#column2 a, #column2 a:hover
padding: 0px 0px 2px 0px;
  text-decoration: none;
  border-bottom: 1px dashed;
}

#column2 a:hover{border-bottom: 1px solid;}

/* contact page - form layout */
form{margin-top: 0px;}

div.row
clear: both;
  width: 448px;
}

div.row span.formlabel 
float: left;
  width: 150px;
  text-align: left;
}

div.row span.forminput
float: right;
  text-align: right;


div.spacer
clear: both;
  width: 80px;
}

input, textarea
width: 259px; 
  font-family: verdana, arial, sans-serif;
  font-size: 100%;
  border: 1px solid;
  margin: 2px;
}

.submit
font-family: verdana, arial, sans-serif;
  font-size: 100%; 
  border: 1px solid;
  width: 70px;
  height: 22px;
  cursor: pointer;
}


</style>


<link rel="stylesheet" type="text/css" href="green80-style/colour.css" />
</head>
<body>
<div id="main">
  <div id="links"> <a href="http://www.free-css.com/">another link</a> | <a href="http://www.free-css.com/">another link</a> | <a href="http://www.free-css.com/">another link</a> | <a href="http://www.free-css.com/">another link</a> </div>
  <div id="logo">
    <h1>GREEN_80</h1>
    <h2>A slogan can be placed here if you really want to?</h2>
  </div>
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/">home</a></li>
      <li><a href="page1.html">layout 2</a></li>
      <li><a href="http://www.free-css.com/">link 2</a></li>
      <li><a href="http://www.free-css.com/">link 3</a></li>
      <li><a id="selected" href="contact.html">contact</a></li>
    </ul>
  </div>
  <div id="content">
    <div id="column1">
      <div class="sidebaritem">
        <h1>latest news</h1>
        <h2>01.09.2006</h2>
        <p>This is where you can put your latest news.</p>
        <p><a href="http://www.free-css.com/">read more ...</a></p>
        <p></p>
        <p></p>
        <h2>01.09.2006</h2>
        <p>This is where you can put your latest news.</p>
        <p><a href="http://www.free-css.com/">read more ...</a></p>
      </div>
      <div class="sidebaritem">
        <h1>additional links</h1>
        <div class="sbilinks">
          <ul>
            <li><a href="http://www.free-css.com/">open designs</a></li>
            <li><a href="http://www.free-css.com/">learn XHTML</a></li>
            <li><a href="http://www.free-css.com/">learn CSS</a></li>
            <li><a href="http://www.free-css.com/">get firefox</a></li>
          </ul>
        </div>
      </div>
      <div class="sidebaritem">
        <h1>other information</h1>
        <p> This space can be used for additional information such as a contact phone number, address
          or maybe even a graphic. </p>
      </div>
    </div>
    <div id="column2">
      <h1>contact</h1>
      <form action="http://www.free-css.com/">
        <p>Below is an example of how a contact form might look with this template:<br />
          <br />
        </p>
        <div class="row"> <span class="formlabel">your name</span> <span class="forminput">
          <input type="text" name="yourname" />
          </span> </div>
        <div class="row"> <span class="formlabel">your email address</span> <span class="forminput">
          <input type="text" name="youremail" />
          </span> </div>
        <div class="row"> <span class="formlabel">your enquiry</span> <span class="forminput">
          <textarea rows="5" cols="18" name="yourenquiry" class="textarea"></textarea>
          </span> </div>
        <div class="spacer">&nbsp;</div>
        <div class="row"> <span class="formlabel"></span> <span class="forminput">
          <input type="submit" value="submit" class="submit" />
          </span> </div>
        <p><br />
          <br />
          NOTE: A contact form such as this would require some way of emailing the input to a specified email address.</p>
      </form>
    </div>
  </div>
  <div id="footer"> copyright &copy; 2006 your name | <a href="http://www.free-css.com/">email@emailaddress</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.dcarter.co.uk">design by dcarter</a> </div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;"> Design provided by Free Web Templates - your source for <a href="http://www.free-css.com/">free website templates</a> </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.GreeNadReD
60.greenandplain
61.Green_Corporate_NMK
62.Green_dream
63.Green_Feeling
64.Green_Glass
65.green_light
66.green_mile
67.Green_Template
68.green_web
69.evergreen
70.simplygreen
71.wide-green
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
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.