GreeNadReD : Green « Templates « HTML / CSS

GreeNadReD
    

<!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">
<head>
<title>Two Column Web Site Design Provided By http://www.getcsstemplates.com</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { 
padding : 0;
margin : 0;
} 
body { 
font-family : Arial, Helvetica, sans-serif;
color : #666666;
font-size : 12px;
background-image : url(GreeNadReD-images/bgt3.jpg);
background-repeat : repeat-x;
} 
#wrapper { 
width : 770px;
margin : 0 auto;
} 
#header { 
background-color : #a2e629;
border : 15px solid #fff;
margin : 35px 5px 5px 205px;
height : 200px;
width : 542px;
} 
#header h1 { 
color : #e62842;
font-family : Arial, Helvetica, sans-serif;
font-size : 2.2em;
font-weight : lighter;
padding-top : 145px;
padding-left : 270px;
} 
#header h2 { 
color : #28a0e6;
font-family : Arial, Helvetica, sans-serif;
font-size : 1.2em;
font-weight : lighter;
padding-left : 270px;
} 
#header a { 
color : #28a0e6;
text-decoration : underline;
} 
#header a:hover { 
color : #e62842;
} 
#leftcolumn { 
margin : -220px 5px 0 -10px;
display : inline;
width : 200px;
float : left;
border-left : 15px solid #fff;
background-color : #fff;
min-height : 830px;
background-image : url(GreeNadReD-images/bg2.jpg);
background-repeat : no-repeat;
} 
* html #leftcolumn { 
height : 830px;
} 
.logo h3 { 
color : #0f975e;
font-family : Arial, Helvetica, sans-serif;
font-size : 1.2em;
font-weight : lighter;
padding-left : 26px;
padding-top : 55px;
} 
.logo1 h3 { 
color : #a2e628;
font-family : Arial, Helvetica, sans-serif;
font-size : 1.2em;
font-weight : lighter;
padding-left : 25px;
margin-top : -34px;
} 
.navigation { 
float : left;
margin-left : 0;
margin-top : 130px;
margin-bottom : 10px;
width : 200px;
background-color : #a2e629;
border-top : 1px solid #6d9ca2;
background-color : #a2e629;
} 
.navigation ul, .navigation2 ul { 
margin : 0;
padding : 0;
list-style : none;
} 
.navigation li, .navigation2 li { 
border-bottom : 1px solid #6d9ca2;
list-style : none;
text-transform : lowercase;
} 
.navigation li a, .navigation2 li a { 
color : #6d9ca2;
display : block;
padding : 0.7em 0.7em 0.7em 1em;
text-decoration : none;
font-family : arial;
font-size : 1em;
font-weight : bold;
font-weight : lighter;
color : #28a0e6;
} 
.navigation li a:hover, .navigation2 li a:hover { 
color : #e62842;
} 
.navigation2 { 
float : left;
margin-left : 0;
margin-top : 10px;
margin-bottom : 10px;
width : 200px;
background-color : #a2e629;
border-top : 1px solid #6d9ca2;
} 
#leftcolumn h4 { 
color : #86c215;
font-size : 1em;
padding-top : 1em;
padding-left : 0.7em;
} 
.ads ul { 
margin-left : 0.9em;
margin-top : 0.5em;
margin-bottom : 0.7em;
list-style : none;
} 
.ads li { 
padding-bottom : 0.3em;
} 
.news { 
border : 1px solid #a2e629;
margin-top : 160px;
padding-bottom : 15px;
} 
.news p { 
margin-top : 0;
margin-left : 5px;
margin-right : 5px;
} 
.news b { 
color : #6d9ca2;
} 
.news i { 
color : #ff0000;
line-height : 25px;
} 
.news a { 
color : #6d9ca2;
} 
.news h2 { 
font-family : "arial", helvetica, sans-serif;
font-size : 1.3em;
margin-top : 5px;
margin-left : 5px;
margin-bottom : 15px;
color : #6d9ca2;
} 
#rightcolumn { 
margin : 0 0 0 0;
display : inline;
padding : 4px;
width : 542px;
float : left;
min-height : 130px;
margin : 0 0 0 10px;
} 
* html #rightcolumn { 
height : 130px;
} 
blockquote { 
margin-top : 10px;
margin-left : 5px;
margin-bottom : 10px;
margin-right : 10px;
border : 1px solid;
padding : 5px;
} 
blockquote a { 
color : #207fbb;
text-decoration : none;
} 
#rightcolumn h1 { 
color : #ff0000;
font-family : Arial, Helvetica, sans-serif;
font-size : 1.7em;
padding-top : 10px;
padding-left : 5px;
padding-bottom : 15px;
font-weight : lighter;
text-decoration : underline;
} 
#boxes { 
width : 526px;
height : 280px;
margin-left : 5px;
} 
.box1 { 
background-image : url(GreeNadReD-images/redbg.jpg);
width : 250px;
height : 250px;
float : left;
margin-top : 5px;
} 
.box1 p { 
color : #207fbb;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
margin-top : 10px;
padding-left : 25px;
padding-right : 25px;
text-align : justify;
} 
.box1 h2 { 
margin-top : 10px;
margin-left : 25px;
color : #a2e629;
font-family : Arial, Helvetica, sans-serif;
font-size : 22px;
font-weight : lighter;
} 
.box1 h3 { 
color : #a2e629;
font-family : Arial, Helvetica, sans-serif;
font-weight : lighter;
font-size : 21px;
background-image : url(GreeNadReD-images/globe.gif);
background-repeat : no-repeat;
margin-top : 25px;
margin-left : 25px;
padding-left : 50px;
padding-top : 20px;
padding-bottom : 10px;
} 
.box1 a { 
float : right;
padding-right : 20px;
color : #ff0000;
} 
.box2 { 
background-image : url(GreeNadReD-images/greenbg.jpg);
width : 250px;
height : 250px;
float : right;
margin-top : 5px;
} 
.box2 p { 
color : #207fbb;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
margin-top : 10px;
padding-left : 25px;
padding-right : 25px;
text-align : justify;
} 
.box2 h2 { 
margin-top : 10px;
margin-left : 25px;
color : #ff0000;
font-family : Arial, Helvetica, sans-serif;
font-size : 22px;
font-weight : lighter;
} 
.box2 h3 { 
color : #ff0000;
font-family : Arial, Helvetica, sans-serif;
font-weight : lighter;
font-size : 21px;
background-image : url(GreeNadReD-images/globe.gif);
background-repeat : no-repeat;
margin-top : 25px;
margin-left : 25px;
padding-left : 50px;
padding-top : 20px;
padding-bottom : 10px;
} 
.box2 a { 
float : right;
padding-right : 20px;
color : #74a61c;
} 
.righttext { 
color : #207fbb;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
margin-left : 15px;
margin-right : 10px;
text-align : justify;
} 
.righttext p { 
font-size : 1em;
} 
.righttext a { 
color : #a2e629;
} 
.righttext a:hover { 
color : #ff440c;
} 
#footerbox { 
height : 180px;
color : #ccc;
margin-top : 5px;
margin-bottom : 5px;
margin-left : 5px;
padding : 0;
clear : both;
background-color : #f0ffdd;
background-image : url(GreeNadReD-images/logopic.jpg);
background-repeat : no-repeat;
background-position : 437px ;
background-position: 437px 35px;} 
#footer { 
width : 770px;
position : relative;
margin : 0 auto;
} 
#footer ul { 
width : 500px;
position : absolute;
top : 36px;
left : 49px;
} 
#footer li { 
float : left;
font : 13px/15px Arial, Helvetica, sans-serif;
font-weight : normal;
list-style : none;
} 
#footer ul li a { 
padding : 0 0 0 12px;
color : #ff440c;
text-decoration : none;
} 
.buttonlink { 
float : right;
margin-top : 60px;
margin-right : 125px;
} 
.buttonlink a { 
color : #a2e629;
font-size : 22px;
} 
#footer ul.text { 
width : 275px;
color : #6483ff;
display : block;
position : absolute;
top : 128px;
left : 62px;
} 
#footer ul.text li { 
font-size : 12px;
list-style : none;
} 
#footer ul.text li a { 
display : block;
color : #6483ff;
text-decoration : none;
padding : 0;
} 
#footer ul.text li a:hover { 
text-decoration : underline;
} 
#footer p.copyright { 
color : #6483ff;
font : 11px/15px Tahoma, Arial, Helvetica, sans-serif;
position : absolute;
top : 56px;
left : 61px;
} 
#footerxhtml { 
width : 139px;
height : 24px;
display : block;
position : absolute;
top : 90px;
left : 61px;
} 
#footerxhtml a { 
width : 139px;
height : 24px;
line-height : 24px;
display : block;
position : absolute;
top : 3px;
left : 3px;
margin : 0;
padding : 0 0 0 10px;
color : #ff440c;
text-transform : uppercase;
font-weight : lighter;
text-decoration : none;
} 
#footerhtml a:hover { 
color : #ff440c;
text-decoration : none;
} 
#footercss { 
width : 129px;
height : 24px;
position : absolute;
top : 90px;
left : 165px;
} 
#footercss a { 
width : 129px;
height : 24px;
display : block;
position : absolute;
top : 3px;
left : 3px;
margin : 0;
padding : 0 0 0 10px;
color : #a2e629;
text-transform : uppercase;
text-decoration : none;
line-height : 24px;
font-weight : lighter;
} 
#footercss a:hover { 
color : #a2e629;
text-decoration : none;
} 

</style>


</head>

<body>
<div id="wrapper">
  <div id="header"> 
  <h1>Free Web Site Design</h1>
  <h2>Provided by: <a href="http://www.getcsstemplates.com">Free CSS Web Site Design</a></h2>
  </div>
  <div id="leftcolumn"> 
  <div class="logo">
  <h3>Red'N'Green <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;V1.0</h3>
  </div>
  <div class="logo1">
  <h3>Red'N'Green <br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;V1.0</h3>
  </div>
     <div class ="navigation">
    <ul>
      <li><a href="http://www.getcsstemplates.com">Free CSS Templates</a></li>
      <li><a href="#">Link Two</a></li>
      <li><a href="#">Link Three</a></li>
      <li><a href="#">Link Four</a></li>

    </ul>
       </div>
     <h4>Ads here</h4>

     <div class ="ads">
                <ul>
      <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>

    </ul>
       </div>
     <div class ="navigation2">
    <ul>
      <li><a href="#">Link Five</a></li>
      <li><a href="#">Link Six</a></li>
      <li><a href="#">Link Seven</a></li>
      <li><a href="#">Link Eight</a></li>

    </ul>
       </div>
       <div class="news">  
     <h2>News</h2>

    <p><i>Feb. 22th 2006</i></p>
    <p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit.<br />
    <a href="#">Donec rutrum neque eu nisl.</a></p>
    <br />
    <p><i>Feb. 17th 2006</i></p>
    <p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit.<br />
    <a href="#">Donec rutrum neque eu nisl.</a></p>
       </div>
  </div>
   
   <div id="rightcolumn">
                        <blockquote>
                       <p>This is a free 100% CSS/XHTML valid <strong>Web Site Design</strong> from <a href="http://www.getcsstemplates.com">Get CSS Web Design Templates for Free</a>. You can link back to my  site if you use this template but you don't have to.</p>
                      </blockquote>
   <div id="boxes">
   <div class="box1">
   <h2>Lorem Ipsum Dolor</h2>
   <h3>Something Here</h3>
   <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>
   <a href="#">read more</a>
   </div>
   <div class="box2">
   <h2>Lorem Ipsum Dolor</h2>
   <h3>Something Here</h3>
   <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>
   <a href="#">read more</a>
   </div>
   </div>
   <div class="righttext">
   <h1>Lorem ipsum dolor sit amet</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus.</p>
   </div>
<div class="righttext">
   <h1>Lorem ipsum dolor sit amet</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Duis sem urna, dictum ac, vehicula in, luctus eget, lectus.</p>
   </div>
</div>

<div id="footerbox">
  <div id="footer">
    <ul>
    <li><a href="http://www.getcsstemplates.com"> Web Site Design </a>| </li>
    <li><a href="#">Link 2</a> | </li>
    <li><a href="#">Link 3 </a>| </li>
    <li><a href="#">Link 4</a> | </li>
    <li><a href="#">Link 5 </a> </li>
  </ul>
  <p class="copyright">&copy;www.getcsstemplates.com 2007 all right reaserved</p>
  <div class="buttonlink"><a href="http://www.getcsstemplates.com">CSS Web Design</a></div>

   <div id="footerxhtml"><a href="http://validator.w3.org">VALID XHTML</a></div> 
   
   <div id="footercss"><a href="http://jigsaw.w3.org">VALID CSS</a></div>
   <ul class="text">
    <li>Web Site Design By:</li>
  <li><a href="http://www.getcsstemplates.com">Get CSS Web Design for Free</a></li>
  </ul>
   </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.	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