EcoMania
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GC mania</title>
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
body{
padding:0; margin:0; background:url(EcoMania-images/bg.gif) repeat-x 0 0 #D6D7A0; color:#111406;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif ;
}
div, h1, h2, h3, h4, h5, img, form, ul, p, dl{
padding:0; margin:0;
}
ul{
list-style-type:none; font-size:0;
}
.spacer{
clear:both; line-height:0; font-size:0;
}
/*--------------< < << header part start >> > >---------------*/
#header{
width:994px; margin:0 auto; background:url(EcoMania-images/header_pic.gif) no-repeat 0 0; position:relative;
height:280px;
}
#header img.logo{
display:block; font-size:0; position:absolute; left:49px; top:52px;
}
#header p{
position:absolute; font-size:13px; width:194px; height:23px; line-height:23px; text-align:center;
background-color:#F7F8D7; color:#111406; left:35px; top:25px; font-weight:normal;
}
#header ul.navi{
height:43px; position:absolute; left:245px; top:53px;
}
#header ul.navi li{
float:left; border-right:#ECEDB5 1px solid;
}
#header ul.navi li.noborder{
border-right:none;
}
#header ul.navi li a{
display:block; padding:0 13px; font-size:11px; font-weight:bold; line-height:43px; background-color:inherit;
text-decoration:none; color:#FFFFFF;
}
#header ul.navi li a:hover{
background:url(EcoMania-images/navi_h_bg.gif) repeat-x 0 0;
}
#header ul.navi li a.hover{
background:url(EcoMania-images/navi_h_bg.gif) repeat-x 0 0; cursor:text;
}
#header form{
position:absolute; left:647px; top:14px; height:25px;
}
#header form label{
padding:0 0 0 32px; margin:0; background:url(EcoMania-images/search_icon.gif) no-repeat 0 0; width:58px;
height:25px; line-height:25px; color:#000000; float:left; font-size:13px; font-weight:bold; background-color:inherit;
}
#header form input.textbox{
width:203px; height:21px; border-bottom:#D4CEAA 1px solid; border-right:#D4CEAA 1px solid; border-top:#302A14 1px solid;
border-left:#302A14 1px solid; float:left; margin:0 1px 0 0;
}
#header form input.go{
width:29px; height:22px; float:left; cursor:pointer; font-size:0; border:none; background:url(EcoMania-images/go.gif) no-repeat 0 0;
}
#header h1{
position:absolute; left:21px; top:171px; font-size:13px; line-height:22px; color:#8AD9D3; font-weight:bold;
background-color:inherit;
}
#header h1 span{
display:block; font:normal 44px/44px Arial, Helvetica, sans-serif; color:#FFFFFF ; background-color:inherit;
}
#header ul.login{
width:98px; position:absolute; right:22px; top:184px;
}
#header ul.login li{
display:block; margin:0 0 11px 0;
}
#header ul.login li a{
display:block; font-size:0; text-indent:-2000px; text-decoration:none; width:98px; height:25px;
}
#header ul.login li a.sub{
background:url(EcoMania-images/subscripbe.gif) no-repeat 0 0;
}
#header ul.login li a.sub:hover{
background:url(EcoMania-images/subscripbe_h.gif) no-repeat 0 0;
}
#header ul.login li a.loginHer{
background:url(EcoMania-images/login_here.gif) no-repeat 0 0;
}
#header ul.login li a.loginHer:hover{
background:url(EcoMania-images/login_here_h.gif) no-repeat 0 0;
}
/*--------------< < << What Special In 2007 >> > >---------------*/
#special{
width:954px; margin:5px auto 0 auto; padding:0 20px; background:url(EcoMania-images/special_bg.gif) repeat-x 0 0 #191919;
color:#FFFFFF;
}
#special h2.spea{
width:600px; float:left; margin:17px 0 0 0; font:bold 28px/28px Arial, Helvetica, sans-serif; display:block;
}
#special a.spe2007{
background:url(EcoMania-images/speacial2007.gif) no-repeat 0 0; width:351px; height:148px; float:right; font-size:0;
text-indent:-2000px; text-decoration:none;
}
#special a.spe2007:hover{
background:url(EcoMania-images/speacial2007_h.gif) no-repeat 0 0;
}
#special dl{
width:600px; float:left; margin:9px 0 0 0;
}
#special dl dt{
background:url(EcoMania-images/special_arrow.gif) no-repeat 0 6px; padding:0 0 0 14px; color:#B5B67C; background-color:inherit;
font-size:13px; font-weight:bold; line-height:20px; margin:0 0 4px 0;
}
#special dl dt span{
color:#fff; background-color:#911515; padding:0 3px;
}
/*--------------< < << bottom body part >> > >---------------*/
#botBody{
width:954px; margin:0 auto; padding:0 0 0 0;
}
.subdiv{
width:225px !important; float:left; margin:0 15px 0 0; background:url(EcoMania-images/sub_div_bg.gif) repeat-y 0 0 #D6D7A0; color:#5C5C5C;
padding:0;
}
.subdiv .nomar{
margin:0;
}
.subdiv p.top{
background:url(EcoMania-images/sub_div_top.gif) no-repeat 0 0; width:225px; height:13px; font-size:0; padding:0 ; margin:0;
display:block;
}
.subdiv p.bot{
background:url(EcoMania-images/sub_div_bot.gif) no-repeat 0 0; width:225px; height:20px; font-size:0; padding:0; margin:0;
display:block;
}
.subdiv h2{
background:url(EcoMania-images/member_h2.gif) no-repeat 0 0 #fffffe; margin:0 5px 0 5px; display:block; padding:0 0 0 44px;
height:41px; color:#FFFFFF; font:bold 16px/41px Arial, Helvetica, sans-serif; width:171px;
}
.subdiv h2.event{
background:url(EcoMania-images/latest_h2_bg.gif) no-repeat 0 0; padding:0 0 0 58px; width:157px;
}
.subdiv h2.moreServices{
background:url(EcoMania-images/more_h2_service.gif) no-repeat 0 0; padding:0 0 0 51px; margin-bottom:19px; width:164px;
}
.subdiv h2.testi{
background:url(EcoMania-images/testimonia_h2_bg.gif) no-repeat 0 0; margin-bottom:19px;
}
.subdiv form{
margin:0 0 61px 10px; width:194px;
}
.subdiv form label{
width:193px; float:left; height:27px; font:normal 10px/27px Arial, Helvetica, sans-serif;
}
.subdiv form input.textbox{
width:189px; height:23px; border-bottom:#D4CEAA 1px solid; border-right:#D4CEAA 1px solid; border-top:#302A14 1px solid;
border-left:#302A14 1px solid; float:left; margin:0 1px 0 0;
}
.subdiv form input.check{
width:16px; height:16px; float:left; margin:10px 7px 0 0;
}
.subdiv form a.reme{
font:bold 11px/16px Arial, Helvetica, sans-serif; color:#830808; background-color:#FFFFFF; text-decoration:none; float:left;
margin:9px 0 0 0;
}
.subdiv form a.reme:hover{
color:#000000; background-color:#FFFFFF;
}
.subdiv form input.loginbut{
width:50px; height:16px; float:right; cursor:pointer; font-size:0; border:none;
background:url(EcoMania-images/login_but.gif) no-repeat 0 0; margin:10px 0 0 0;
}
.subdiv .subdiv1{
width:192px; margin:15px 0 0 18px;
}
.subdiv h4{
color:#830808; background-color:#FFFFFF; font-size:11px; font-weight:normal; line-height:16px; margin:0 2px 0 20px;
display:block;
}
.subdiv h4.green{
color:#5A6C04; background-color:#FFFFFF; font-size:11px;line-height:16px; margin:0 2px 5px 20px;
display:block; font-weight:bold;
}
.subdiv .subdiv1 h3{
color:#136C66; background-color:#FFFFFF; font:bold 11px/16px Arial, Helvetica, sans-serif;
float:left; width:140px;
}
.subdiv .subdiv1 h4{
float:left; width:140px; margin:0; padding:0; font-weight:bold;
}
.subdiv .subdiv1 p{
font-size:10px; text-decoration:underline; width:140px; float:left;
}
.subdiv .subdiv1 img{
display:block; font-size:0; float:right;
}
.subdiv p.marTop{
padding:13px 0 0 0;
}
.subdiv p.more{
margin:12px 0 0 160px;
}
.subdiv p.more a{
width:50px; height:16px; background:url(EcoMania-images/more.gif) no-repeat 0 0 #fffffe; text-decoration:none; text-align:center;
font-weight:bold; font-size:10px; color:#FFFFFF; display:block;
}
.subdiv p.more a:hover{
background:url(EcoMania-images/more_h.gif) no-repeat 0 0;
}
.subdiv ul.servi{
margin:0 0 0 20px; padding:0 0 24px 0;
}
.subdiv ul.servi li{
display:block; background:url(EcoMania-images/subdiv_arrow.gif) no-repeat 0 7px; padding:0 0 0 12px;
}
.subdiv ul.servi li a{
text-decoration:underline; font-size:11px; line-height:18px; color:#5C5C5C; background-color:#FFFFFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif
}
.subdiv ul.servi li a:hover{
text-decoration:none;
}
.subdiv p.text{
font-size:11px; font-weight:bold; line-height:16px; padding:0 0 5px 0; margin: 0 0 0 20px;
}
.subdiv2{
width:225px; float:left; margin:0; background:url(EcoMania-images/sub_div_bg.gif) repeat-y 0 0 #D6D7A0; color:#5C5C5C;
}
.subdiv2 p.top{
background:url(EcoMania-images/sub_div_top.gif) no-repeat 0 0; width:225px; height:13px; font-size:0;
}
.subdiv2 p.bot{
background:url(EcoMania-images/sub_div_bot.gif) no-repeat 0 0; width:225px; height:20px; font-size:0;
}
.subdiv2 h2{
background:url(EcoMania-images/member_h2.gif) no-repeat 0 0 #fffffe; margin:0 5px 0 5px; display:block; padding:0 0 0 44px;
height:41px; color:#FFFFFF; font:bold 16px/41px Arial, Helvetica, sans-serif;
}
.subdiv2 h2.event{
background:url(EcoMania-images/latest_h2_bg.gif) no-repeat 0 0; padding:0 0 0 58px; width:157px;
}
.subdiv2 h2.moreServices{
background:url(EcoMania-images/more_h2_service.gif) no-repeat 0 0; padding:0 0 0 51px; margin-bottom:19px;
}
.subdiv2 h2.testi{
background:url(EcoMania-images/testimonia_h2_bg.gif) no-repeat 0 0; margin-bottom:19px; padding:0 0 0 51px;
}
.subdiv2 .subdiv3{
width:192px; margin:15px 0 0 18px;
}
.subdiv2 h4{
color:#830808; background-color:#FFFFFF; font-size:11px; font-weight:normal; line-height:16px; margin:0 2px 0 20px;
display:block;
}
.subdiv2 h4.green{
color:#5A6C04; background-color:#FFFFFF; font-size:11px;line-height:16px; margin:0 2px 5px 20px;
display:block; font-weight:bold;
}
.subdiv2 .subdiv1 h3{
color:#136C66; background-color:#FFFFFF; font:bold 11px/16px Arial, Helvetica, sans-serif;
float:left; width:140px;
}
.subdiv2 .subdiv1 h4{
float:left; width:140px; margin:0; padding:0; font-weight:bold;
}
.subdiv2 .subdiv1 p{
font-size:10px; text-decoration:underline; width:140px; float:left;
}
.subdiv2 .subdiv1 img{
display:block; font-size:0; float:right;
}
.subdiv2 p.marTop{
padding:13px 0 0 0;
}
.subdiv2 p.more{
margin:12px 0 0 160px;
}
.subdiv2 p.more a{
width:50px; height:16px; background:url(EcoMania-images/more.gif) no-repeat 0 0 #fffffe; text-decoration:none; text-align:center;
font-weight:bold; font-size:10px; color:#FFFFFF; display:block;
}
.subdiv2 p.more a:hover{
background:url(EcoMania-images/more_h.gif) no-repeat 0 0;
}
.subdiv2 p.text{
font-size:11px; font-weight:bold; line-height:16px; padding:0 0 5px 0; margin: 0 0 0 20px;
}
/*--------------< < << Highlights >> > >---------------*/
#highlight{
width:954px; margin:0 auto; padding:16px 0 40px 0;
}
#highlight h2.hight{
background:url(EcoMania-images/higlight_h2.gif) no-repeat 0 0; border-bottom:#EEF6CD 3px solid;
font:bold 26px/38px Arial, Helvetica, sans-serif; float:left; width:633px; padding:0 0 0 46px;
}
#highlight h3{
font-size:18px; line-height:23px; color:#AE4607; background-color:#D6D7A0; width:686px;
float:left; font-weight:normal; padding:15px 0 11px 0;
}
#highlight p.text{
width:686px; float:left; padding:0 0 23px 0; font-size:13px; line-height:19px;
}
#highlight p.text strong{
color:#0B534E; background-color:#D6D7A0;
}
#highlight form{
width:223px; float:right; background:url(EcoMania-images/newsletter_singup_bg.gif) repeat-y 0 0 #B3B477;
color:#FFFFFF;
}
#highlight form p.top{
background:url(EcoMania-images/newsletter_singup_top.gif) no-repeat 0 0; font-size:0; height:21px;
}
#highlight form p.bot{
background:url(EcoMania-images/newsletter_singup_bot.gif) no-repeat 0 0; font-size:0; height:20px;
}
#highlight form h2{
background:url(EcoMania-images/newsletter_singup_h2.gif) no-repeat 0 0 #B3B477; height:39px; margin:0 2px 0 4px; padding:0 0 0 14px;
color:#4D5C0D; font:bold 16px/39px Arial, Helvetica, sans-serif;
}
#highlight form label{
height:26px; font:bold 12px/26px Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#B3B477; margin:0 0 0 18px;
}
#highlight form input.textbox{
width:184px; height:23px; border-bottom:#D4CEAA 1px solid; border-right:#D4CEAA 1px solid; border-top:#302A14 1px solid;
border-left:#302A14 1px solid; margin:0 1px 0 18px;
}
#highlight form a.freeRes{
background:url(EcoMania-images/free_register.gif) no-repeat 0 0; height:71px; text-decoration:none; text-indent:-2000px;
display:block; margin:11px 0 19px 9px;
}
#highlight form a.freeRes:hover{
background:url(EcoMania-images/free_register_h.gif) no-repeat 0 0;
}
#highlight form input.singup{
width:50px; height:16px; cursor:pointer; font-size:0; border:none;
background:url(EcoMania-images/singup.gif) no-repeat 0 0; margin:7px 0 0 155px;
}
/*--------------< < << footer >> > >---------------*/
#footerbig{
background:url(EcoMania-images/footer_bg.gif) repeat-x 0 0 #2F2F1B; color:#C3C491; padding:22px 0 0 0;
}
#footer{
width:954px; margin:0 auto; padding:0 0 23px 0;
}
#footer p{
text-align:center; margin:4px 0 0 0;font-size:11px; line-height:16px;
}
#footer p a{
color:#FFFFFF; text-decoration:none;
background-color:inherit;
}
#footer p a:hover{
color:#C3C491;
background-color:inherit;
}
#footer ul{
margin:0 0 0 214px; height:22px;
}
#footer ul li{
float:left; padding:0 3px; font-size:11px; color:#FFFFFF; line-height:22px; background-color:inherit;
}
#footer ul li a{
color:#FFFFFF; line-height:22px; background-color:inherit; text-decoration:none;
}
#footer ul li a:hover{
color:#C3C491; background-color:inherit;
}
</style>
</head>
<body>
<!--header start -->
<div id="header">
<a href="index.html"><img src="EcoMania-images/logo.gif" alt="GC Mania" border="0" class="logo" title="GC Mania" /></a>
<p>Vestibulum pretium, metus sed</p>
<h1>
<span>Look Towords A New Future</span>
Aenean viverra sapien a enim. Pellentesque non justo. </h1>
<ul class="navi">
<li><a href="#" class="hover" title="Home">Home</a></li>
<li><a href="#" title="About us">About us</a></li>
<li><a href="#" title="Procidures">Procidures</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Support">Support</a></li>
<li><a href="#" title="Meeting">Meeting</a></li>
<li><a href="#" title="Testimonials">Testimonials</a></li>
<li><a href="#" title="Future Plans">Future Plans</a></li>
<li class="noborder"><a href="#" title="Contact">Contact</a></li>
</ul>
<form name="serach" method="post" action="#">
<label>Search</label>
<input type="text" name="serch" value="" class="textbox" />
<input type="submit" name="sib" class="go" value="" title="Go" />
</form>
<ul class="login">
<li><a href="#" class="sub" title="Subscribe">Subscribe</a></li>
<li><a href="#" class="loginHer" title="Login Here"></a></li>
</ul>
</div>
<!--header end -->
<!--Special In 2007 start -->
<div id="special">
<h2 class="spea">What Special In 2007</h2>
<a href="#" class="spe2007" title="Special 2007">Special 2007</a>
<dl>
<dt>Egestas urna. Proin velit. Vivamus congue dolor ac lacus. Proin <span>lacus</span> lectaretras</dt>
<dt>Gravida sem <span>ligula vel nisl.</span></dt>
<dt>Curabitur <span>congue</span> est at erat. Suspendisse </dt>
</dl>
<br class="spacer" />
</div>
<!--Special In 2007 end -->
<!--not body part start -->
<div id="botBody">
<!--member start -->
<div class="subdiv">
<p class="top"> </p>
<h2 >Members Login</h2>
<form name="login" method="post" action="#">
<label>Enter Your Name</label>
<input type="text" name="text" value="" class="textbox" />
<label>Enter Your Password</label>
<input type="password" name="password" value="" class="textbox" />
<input type="checkbox" name="che" value="" class="check" />
<a href="#" class="reme" title="Remember Me">Remember Me</a>
<input type="submit" name="submit" value="" class="loginbut" title="Login" />
<br class="spacer" />
</form>
<p class="bot"></p>
</div>
<!--member end -->
<!--latest start -->
<div class="subdiv">
<p class="top"> </p>
<h2 class="event">Latest Events</h2>
<!--sub div 1 start -->
<div class="subdiv1">
<img src="EcoMania-images/pic.gif" alt="pic01" title="pic01" />
<h3>10.06.07</h3>
<h4>Vivamus rutrum feetm </h4>
<p>Enimnunc fringilla esmorbi pulvinar</p>
<br class="spacer" />
</div>
<!--sub div end -->
<!--sub div 2 start -->
<div class="subdiv1">
<img src="EcoMania-images/pic2.gif" alt="pic02" title="pic02" />
<h3>18.06.07</h3>
<h4>Quisque laoreet</h4>
<p>Aenean viverra sapien a eni Pellentesque non just</p>
<br class="spacer" />
</div>
<!--sub div end -->
<p class="more marTop"><a href="#" title="more">more</a></p>
<p class="bot"> </p>
</div>
<!--latest end -->
<!--more service start -->
<div class="subdiv">
<p class="top"> </p>
<h2 class="moreServices">More Services</h2>
<h4>Curabitur congue est at erat.</h4>
<ul class="servi">
<li><a href="#">Nunc fringilla egestas pede. Morbi </a></li>
<li><a href="#">Pulvinar condimentum pede. Aliquam </a></li>
<li><a href="#">Mi quam, iaculis non, mollis et, </a></li>
<li><a href="#">Tincidunt non, orci. Quisque blandit </a></li>
<li><a href="#">Erat a erat. Nullam ornare, mi ac </a></li>
<li><a href="#">Placerat ultrices,</a></li>
</ul>
<p class="more"><a href="#" title="more">more</a></p>
<p class="bot"> </p>
</div>
<!--more service end -->
<!--testimonial start -->
<div class="subdiv2">
<p class="top"> </p>
<h2 class="testi">Testimonials</h2>
<h4><strong>L.Brian</strong></h4>
<h4 class="green">On 23rd June 2007</h4>
<p class="text"><i>Nunc fringilla egestas pede. Morbi Pulvinar </i></p>
<h4><strong>L.Brian</strong></h4>
<h4 class="green">On 23rd June 2007</h4>
<p class="text"><i>Nunc fringilla egestas pede. Morbi Pulvinar </i></p>
<p class="more"><a href="#" title="more">more</a></p>
<p class="bot"> </p>
</div>
<!--testimonial end -->
<br class="spacer" />
</div>
<!--bot bgody part end -->
<!-- hightlight part start -->
<div id="highlight">
<form name="newlette" method="post" action="#">
<p class="top"> </p>
<h2>Newsletter Signup</h2>
<label>Enter Your Email Id</label>
<input type="text" name="te" value="" class="textbox" />
<input type="submit" name="submit" value="" class="singup" title="singup" />
<a href="#" class="freeRes" title="Registration">Registration</a>
<p class="bot"> </p>
</form>
<h2 class="hight">Highlights</h2>
<h3>Blandit erat a erat. Nullam ornare, mi ac placerat ultrices, pede arcu ornare tellus, id molestie ligula erat at
felis nullam neque neque, dictum quis</h3>
<p class="text">
Curabitur malesuada aliquam urna. <strong>Nulla sodales pharetra neque.</strong> Vestibulum pretium, metus sed tincidunt tristique, ante
sapien pellentesque nisi, ac lobortis ante orci ut felis. Sed semper, enim id fringilla pos. Quisque laoreet, elit at
tincidunt porta, massa tortor porttitor magna, </p>
<p class="text">
At vehicula pede dui id enim. <strong>Pellentesque rhoncus metus quis nulla.</strong> Donec tellus metus, vehicula nec, scelerisque
commodo, egestas eget, enim. Nulla in nulla. Aliquam risus. Suspendisse eleifend tellus. </p>
<br class="spacer" />
</div>
<!--hightlight part end -->
<!--100% div -->
<div id="footerbig">
<!--footer start -->
<div id="footer">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li>|</li>
<li><a href="#" title="About us">About us</a></li>
<li>|</li>
<li><a href="#" title="Procidures">Procidures</a></li>
<li>|</li>
<li><a href="#" title="Services">Services</a></li>
<li>|</li>
<li><a href="#" title="Support">Support</a></li>
<li>|</li>
<li><a href="#" title="Meeting">Meeting</a></li>
<li>|</li>
<li><a href="#" title="Testimonials">Testimonials</a></li>
<li>|</li>
<li><a href="#" title="Future Plans">Future Plans</a></li>
<li>|</li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
<p>Copyrioht Eco Mania 2010 All Rights Reserved</p>
<p>powered by premium <a href="http://www.flashmint.com/">Flash Templates</a></p>
</div>
<!--footer end -->
</div>
<!--100% footer end -->
</body>
</html>
Related examples in the same category