Green_Template : Green « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Green

Green_Template

    


<html>
<head><title>Green Template</title>
<meta name="Keywords" content="#">
<meta name="Description" content="#">
<meta name="author" content="http://www.getcsstemplates.com" />
<style type='text/css'>
/*new site style sheet*/

 body{
background-color: #ffffff;
}

p{
font-family: sans-serif;
padding-top: 5px;
text-align: justify;
padding-left: 10px;
padding-right: 10px;
font-size: .8em;
color: #93cd59;
}

h1{
color: #3b9003;
font-family: sans-serif;
font-size: 1em;
padding-left: 3px;
}

a{
color: #3b9003;
text-decoration: none;}

a:hover{
text-decoration: underline;
}

blockquote{
font-size: .8em;
font-style: italic;
border: 1px #a5e965 solid;
background-color: #ffffff;
background-image: url(Green_Template-images/bg.gif);
background-repeat: repeat-x;
}

blockquote h2{
font-size: .9em;
font-weight: bold;
}

#box{
position: absolute;
width: 710px;
top: 0px;
margin-left: 140px;
background-color: #e0ffd5;
padding-bottom: 15px;
}

#box p{
padding-left: 5px;
padding-right: 560px;
}

h2{
color: #7ed50c;
font-family: sans-serif;
font-size: .9em;
padding-left:3px;
}

#main{
position: absolute;
top: 70px;
left: 310px;
width: 550px;
} 

#top{
background-color: #a5e965;
position: absolute;
top: 0px;
left: 0px;
width: 550px;
height: 35px;
padding-top: 5px;

}

#top UL{
display: inline; 
font-size: 12px;
color: #3b9003;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
}

#top UL LI{
padding-right: 0px;
display: block;
padding-left: 0px;
float: left;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
}

#top LI a{
padding-right: 7px;
padding-left: 7px;
font-size: 12px;
padding-bottom: 0px;
color: #3b9003;
padding-top: 4px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
}

#top LI a:hover{
color: #196a31;
font-size: 12px;
text-decoration: underline;
}

#topleft{
position: absolute;
top: 25px;
left: 0px;
width: 183px;
height: 150px;
background-color: #FFFFFF;
}

#topcenter{
position: absolute;
top: 25px;
left: 183px;
width: 184px;
height: 150px;
background-color: #d8ffbf;
}

#topright{
position: absolute;
top: 25px;
left: 367px;
width: 183px;
height: 150px;
background-color: #FFFFFF;
}

#textarea{
position: absolute;
top: 175px;
left: 0px;
width: 550px;
background-color: #d8ffbf;
border-left: 1px #d9d9d9 solid;
border-right: 1px #d9d9d9 solid;
}

#textarea p{
font-size: .9em;
}

#footer{
position: absolute;
left: 0px;
width: 550px;
background-color: #a5e965;
padding-bottom: 0px;
}

#footer p{
font-size: .6em;
text-align: right;
color: #067519;}

#right{
position: absolute;
top: 95px;
left: 860px;
width: 140px;
background-color: #a5e965;
}

#right p{
padding-bottom: 15px;
color: #dbffce;
}

#lb{
position: absolute;
left: 0px;
width: 140px;
background-color: #e0ffd5;
}

#lb p{
color: #637E75;
}

#subnav{
float:left;
padding-top:100px;
font-family: sans-serif;
}
    
#subnavcontainer {
width: 140px;  
}

#subnavcontainer ul{
padding-top:10px;
margin-left: 0;
padding-left: 3px;
list-style-type: none;
}

#subnavcontainer a{
display:block;
padding:3px;
width:140px;
background-color:transparent;
border-bottom:1px solid #a5e965;
}

#subnavcontainer a:link, #subnavlist a:visited{
color:#a5e965;
text-decoration:none;
font-weight: bold;
}

#subnavcontainer a:hover{
background-color:#a5e965;
color:#fff;
}

.subnavheader{
width:120px;
padding-left: 3px;
margin-bottom:-10px;
}

</style>


</head>
<body>
<div id="box">
<h1>YourCompanyDotCom.</h1>
<h2>Put your company slogan here</h2>

          <div id="subnav">
            <h1 class="subnavheader">Sub Menu</h1>
            <div id="subnavcontainer">              
                <ul id="subnavlist">
                  <li><a href="#">Link one</a></li>
                  <li><a href="#">Link two</a></li>
                  <li><a href="#">Link three</a></li>
                  <li><a href="#">Link four</a></li>
                  <li><a href="#">Link five</a></li>
                </ul>
            </div>
          </div>
        



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p></div>
<div id="main">
<div id="top"><ul>
 <li><a href="#">Home</a></li>  
 <li><a href="#">Link One</a></li>  
 <li><a href="#">Link Two</a></li>  
 <li><a href="#">Link Three</a></li>  
 <li><a href="#">Link Four</a></li>  
 <li><a href="#">Link Five</a></li> 
</ul>
</div>
<div id="topleft">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis.</p></div>
<div id="topcenter">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis.</p></div>
<div id="topright">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis.</p></p></div>
<div id="textarea">
<Img src="Green_Template-images/01.jpg">

<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.<br />
Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum.</p>

<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>

<blockquote>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>
</blockquote>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

<div id="footer"><p>Copyright &copy; 2006 <a href="index.html">YourSiteDotCom</a> <b>: :</b> Design by: <a href="http://www.getcsstemplates.com">Free CSS Templates</a></p></div></div></div>
<div id="right">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>
<div id="lb">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p></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_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