ec-mania
<!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>
<title>EC Mania</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
body{
padding:0; margin:0; background:url(ec-mania-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(ec-mania-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(ec-mania-images/navi_h_bg.gif) repeat-x 0 0;
}
#header ul.navi li a.hover{
background:url(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-images/subscripbe.gif) no-repeat 0 0;
}
#header ul.login li a.sub:hover{
background:url(ec-mania-images/subscripbe_h.gif) no-repeat 0 0;
}
#header ul.login li a.loginHer{
background:url(ec-mania-images/login_here.gif) no-repeat 0 0;
}
#header ul.login li a.loginHer:hover{
background:url(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-images/speacial2007_h.gif) no-repeat 0 0;
}
#special dl{
width:600px; float:left; margin:9px 0 0 0;
}
#special dl dt{
background:url(ec-mania-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(ec-mania-images/sub_div_bg.gif) repeat-y 0 0 #D6D7A0; color:#5C5C5C;
padding:0;
}
.subdiv .nomar{
margin:0;
}
.subdiv p.top{
background:url(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-images/latest_h2_bg.gif) no-repeat 0 0; padding:0 0 0 58px; width:157px;
}
.subdiv h2.moreServices{
background:url(ec-mania-images/more_h2_service.gif) no-repeat 0 0; padding:0 0 0 51px; margin-bottom:19px; width:164px;
}
.subdiv h2.testi{
background:url(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-images/sub_div_bg.gif) repeat-y 0 0 #D6D7A0; color:#5C5C5C;
}
.subdiv2 p.top{
background:url(ec-mania-images/sub_div_top.gif) no-repeat 0 0; width:225px; height:13px; font-size:0;
}
.subdiv2 p.bot{
background:url(ec-mania-images/sub_div_bot.gif) no-repeat 0 0; width:225px; height:20px; font-size:0;
}
.subdiv2 h2{
background:url(ec-mania-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(ec-mania-images/latest_h2_bg.gif) no-repeat 0 0; padding:0 0 0 58px; width:157px;
}
.subdiv2 h2.moreServices{
background:url(ec-mania-images/more_h2_service.gif) no-repeat 0 0; padding:0 0 0 51px; margin-bottom:19px;
}
.subdiv2 h2.testi{
background:url(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-images/newsletter_singup_bg.gif) repeat-y 0 0 #B3B477;
color:#FFFFFF;
}
#highlight form p.top{
background:url(ec-mania-images/newsletter_singup_top.gif) no-repeat 0 0; font-size:0; height:21px;
}
#highlight form p.bot{
background:url(ec-mania-images/newsletter_singup_bot.gif) no-repeat 0 0; font-size:0; height:20px;
}
#highlight form h2{
background:url(ec-mania-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(ec-mania-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(ec-mania-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(ec-mania-images/singup.gif) no-repeat 0 0; margin:7px 0 0 155px;
}
/*--------------< < << footer >> > >---------------*/
#footerbig{
background:url(ec-mania-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;
}
#footer p a:hover{
color:#C3C491;
}
#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>
<div id="header"> <img src="ec-mania-images/logo.gif" alt="" class="logo" />
<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="http://www.free-css.com/" class="hover">Home</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Procidures</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Meeting</a></li>
<li><a href="http://www.free-css.com/">Testimonials</a></li>
<li><a href="http://www.free-css.com/">Future Plans</a></li>
<li class="noborder"><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<form name="serach" method="post" action="http://www.free-css.com/">
<label>Search</label>
<input type="text" name="serch" value="" class="textbox" />
<input type="submit" name="sib" class="go" value="" />
</form>
<ul class="login">
<li><a href="http://www.free-css.com/" class="sub">Subscribe</a></li>
<li><a href="http://www.free-css.com/" class="loginHer"></a></li>
</ul>
</div>
<div id="special">
<h2 class="spea">What Special In 2007</h2>
<a href="http://www.free-css.com/" class="spe2007">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>
<div id="botBody">
<div class="subdiv">
<p class="top"> </p>
<h2 >Members Login</h2>
<form name="login" method="post" action="http://www.free-css.com/">
<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="http://www.free-css.com/" class="reme">Remember Me</a>
<input type="submit" name="submit" value="" class="loginbut" />
<br class="spacer" />
</form>
<p class="bot"></p>
</div>
<div class="subdiv">
<p class="top"> </p>
<h2 class="event">Latest Events</h2>
<div class="subdiv1"> <img src="ec-mania-images/pic.gif" alt="" />
<h3>10.06.07</h3>
<h4>Vivamus rutrum feetm </h4>
<p>Enimnunc fringilla esmorbi pulvinar</p>
<br class="spacer" />
</div>
<div class="subdiv1"> <img src="ec-mania-images/pic2.gif" alt="" />
<h3>18.06.07</h3>
<h4>Quisque laoreet</h4>
<p>Aenean viverra sapien a eni Pellentesque non just</p>
<br class="spacer" />
</div>
<p class="more marTop"><a href="http://www.free-css.com/">more</a></p>
<p class="bot"> </p>
</div>
<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="http://www.free-css.com/">Nunc fringilla egestas pede. Morbi </a></li>
<li><a href="http://www.free-css.com/">Pulvinar condimentum pede. Aliquam </a></li>
<li><a href="http://www.free-css.com/">Mi quam, iaculis non, mollis et, </a></li>
<li><a href="http://www.free-css.com/">Tincidunt non, orci. Quisque blandit </a></li>
<li><a href="http://www.free-css.com/">Erat a erat. Nullam ornare, mi ac </a></li>
<li><a href="http://www.free-css.com/">Placerat ultrices,</a></li>
</ul>
<p class="more"><a href="http://www.free-css.com/">more</a></p>
<p class="bot"> </p>
</div>
<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="http://www.free-css.com/">more</a></p>
<p class="bot"> </p>
</div>
<br class="spacer" />
</div>
<div id="highlight">
<form name="newlette" method="post" action="http://www.free-css.com/">
<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" />
<a href="http://www.free-css.com/" class="freeRes">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>
<div id="footerbig">
<div id="footer">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/"> About us</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">Procidures</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">Meeting</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">Testimonials</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">Future Plans</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<p>Copyrioht Eco Mania 2007 All Rights Reserved</p>
<p>Powered by <a href="http://templatekingdom.com">TemplateKingdom.com</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category