flash_web
<!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=iso-8859-1" />
<title>Flash Web</title>
<style type='text/css'>
/* CSS Document */
/* CSS Document */
body{
background:url(flash_web-images/bg.gif) repeat-x 0 0 #FDF9EE; color:#4E4628;
font:normal 14px/19px Arial, Helvetica, sans-serif;
margin:0; padding:0;}
div, h1, h2, h3, h4, h5, h6, form, label, input, span, ul, li, p, a{
margin:0; padding:0;}
ul{
list-style:none;}
.spacer{
font-size:0; line-height:0; clear:both;}
/* ----------------- top navigation start --------------------- */
#topNav{
width:728px; position:relative;
margin:0 auto; padding:8px 0 0 50px;}
#topNav img{
border:none; float:left; margin:0 34px 0 0;}
#topNav ul{
background:url(flash_web-images/top_ul_bg.gif) no-repeat 0 8px;
width:503px; height:23px; padding:8px 0 0 8px; margin:0 0 0 217px;}
#topNav ul li{
background-color:#E1DBC7; color:#0B0B0B; float:left;
font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform:uppercase;}
#topNav ul li a{
background-color:#E1DBC7; color:#0B0B0B;
font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:uppercase; text-align:center; text-decoration:none;
width:65px; height:23px; display:block;}
#topNav ul li a.hover{
background:url(flash_web-images/top_btn_h.gif) no-repeat 0 0 #E1DBC7; color:#FFFFFF;
font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:uppercase; text-align:center; text-decoration:none;
width:65px; height:23px; display:block;}
#topNav ul li a:hover{
background:url(flash_web-images/top_btn_h.gif) no-repeat 0 0 #E1DBC7; color:#FFFFFF;
font:bold 11px/23px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:uppercase; text-align:center; text-decoration:none;
width:65px; height:23px; display:block;}
/* ----------------- top navigation end --------------------- */
/* ----------------- shadow start --------------------------- */
#topShadow{
background:url(flash_web-images/top_shadow.gif) no-repeat 0 0 #FDF9EE; color:#4E4628;
width:778px; height:34px; margin:9px 0 0; float:left;}
#bottomShadow{
background:url(flash_web-images/bottom_shadow.gif) no-repeat 0 0 #FDF9EE; color:#4E4628;
width:778px; height:24px; float:left;}
/* ----------------- shadow end --------------------------- */
/* ----------------- body start --------------------------- */
#body{
width:778px; margin:0 auto; position:relative;}
#bodyPannel{
background:url(flash_web-images/midle_bg.gif) repeat-y 0 0 #FDF9EE; color:#4E4628;
width:722px; padding:0 28px; float:left;}
#bodyPannel form.search{
background-color:#FFFFFF; color:#000000; border:#ECE8DB 1px solid;
width:248px; padding:7px 17px 27px 17px; float:left;}
#bodyPannel form.search h2{
background:url(flash_web-images/search_h2_bg.gif) no-repeat 0 0 #FFFFFF; color:#786E4E;
width:197px; padding:0 0 10px 50px; float:left;
font:normal 24px/42px Georgia, "Times New Roman", Times, serif;}
#bodyPannel form.search h2 span{
background-color:#FFFFFF; color:#0B0B0B;
font:normal 24px/42px Georgia, "Times New Roman", Times, serif;}
#bodyPannel form.search label{
background-color:#FFFFFF; color:#0B0B0B; margin:0 0 8px 0; float:left;
font:bold 10px/28px Arial, Helvetica, sans-serif; text-transform:uppercase;}
#bodyPannel form.search input{
background-color:#EFEBDE; color:#0B0B0B; border:#C3BCA4 1px solid;
width:158px; height:22px; padding:2px; margin:0 0 8px 0; float:right;
font:normal 14px/20px Arial, Helvetica, sans-serif;}
#bodyPannel form.search p{
background-color:#FFFFFF; color:#CC0000; float:left; margin:6px 0 0 0;
font:normal 13px/15px Arial, Helvetica, sans-serif;}
#bodyPannel form.search input.check{
background-color:#EFEBDE; color:#0B0B0B; border:#C3BCA4 1px solid;
width:15px; height:15px; float:left; margin:6px 0 0 9px;}
#bodyPannel form.search input.submit{
background:url(flash_web-images/submit_bg.gif) no-repeat 37px 0 #FFFFFF; color:#0B0B0B; border:none;
width:53px; height:13px; float:right; margin:7px 0 0 0; padding:0 23px 0 0; cursor:pointer;
font:normal 10px/13px Arial, Helvetica, sans-serif; text-transform:uppercase;}
#eventLink{
width:345px; padding:0 0 0 70px; float:left;}
#eventLink h2{
background:url(flash_web-images/event_link_bg.gif) no-repeat 0 7px #FFFFFF; color:#786E4E;
padding:6px 0 10px 48px;
font:normal 28px/42px Georgia, "Times New Roman", Times, serif;}
#eventLink h2 span{
background-color:#FFFFFF; color:#0B0B0B;
font:normal 28px/42px Georgia, "Times New Roman", Times, serif;}
#eventLink ul{
float:left; padding:0 0 0 5px;}
#eventLink ul li{
font:normal 13px/19px Arial, Helvetica, sans-serif;
background:url(flash_web-images/red_arrow.gif) no-repeat 0 7px #FFFFFF; color:#4E4628;
padding:0 0 0 6px;}
#eventLink ul li a{
font:normal 13px/19px Arial, Helvetica, sans-serif; text-decoration:none;
background-color:#FFFFFF; color:#4E4628;
padding:0 4px; display:block;}
#eventLink ul li a:hover{
font:normal 13px/19px Arial, Helvetica, sans-serif; text-decoration:none;
background-color:#F4EFDF; color:#4E4628;
padding:0 4px; display:block;}
#eventLink a.more{
background:url(flash_web-images/more_bg.gif) no-repeat 66px 0 #FFFFFF; color:#0B0B0B; float:right;
font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;
padding:0 20px 0 0; margin:5px 10px 0 0;}
#eventLink a.more:hover{
background:url(flash_web-images/more_bg_h.gif) no-repeat 66px 0 #FFFFFF; color:#0B0B0B; float:right;
font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;
padding:0 20px 0 0; margin:5px 10px 0 0;}
#midle{
background:url(flash_web-images/picture.gif) no-repeat 0 0 #FFFFFF; color:#4E4628;
padding:270px 0 0 0;}
#midle h2{
background-color:#FFFFFF; color:#0B0B0B;
font:normal 28px/46px Georgia, "Times New Roman", Times, serif;}
#midle h2 span{
background-color:#FFFFFF; color:#A60101;
font:normal 28px/46px Georgia, "Times New Roman", Times, serif;}
#midle p{
font:normal 14px/19px Arial, Helvetica, sans-serif; background-color:#FFFFFF; color:#4E4628;}
#midle a.more{
background:url(flash_web-images/more_bg.gif) no-repeat 66px 0 #FFFFFF; color:#0B0B0B; float:right;
font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;
padding:0 20px 0 0; margin:5px 35px 0 0;}
#midle a.more:hover{
background:url(flash_web-images/more_bg_h.gif) no-repeat 66px 0 #FFFFFF; color:#0B0B0B; float:right;
font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;
padding:0 20px 0 0; margin:5px 35px 0 0;}
#colorBg{
background-color:#FCFAF3; float:left; color:#0B0B0B;
margin:18px 0 0 0; padding:18px 40px 18px 38px; width:642px;}
#futurePlans{
width:298px; float:left;}
#futurePlans h2.text1{
background-color:#FCFAF3; color:#0B0B0B;
font:normal 28px/40px Georgia, "Times New Roman", Times, serif;}
#futurePlans h2.text1 span{
background-color:#FCFAF3; color:#A60101;
font:normal 28px/40px Georgia, "Times New Roman", Times, serif;}
#futurePlans ul{ float:left;}
#futurePlans ul li{
font:normal 13px/19px Arial, Helvetica, sans-serif; color:#4E4628;
background:url(flash_web-images/red_bullet.gif) no-repeat 0 6px #FCFAF3; padding:0 0 0 10px;}
#futurePlans ul li a{
font:bold 13px/19px Arial, Helvetica, sans-serif; text-decoration:none;
background-color:#FCFAF3; color:#4E4628; display:block;}
#futurePlans ul li a:hover{
font:bold 13px/19px Arial, Helvetica, sans-serif; text-decoration:none;
background-color:#EAE6D9; color:#4E4628; display:block;}
#futurePlans p{
background:url(flash_web-images/boeder.gif) repeat-x 0 14px #FCFAF3; color:#0B0B0B;
height:13px; line-height:13px; padding:14px 0 19px 0;}
#futurePlans p a.more{
background:url(flash_web-images/more_bg.gif) no-repeat 76px 0 #FCFAF3; color:#0B0B0B; float:right;
font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;
padding:0 20px 0 10px; margin:0;}
#futurePlans p a.more:hover{
background:url(flash_web-images/more_bg_h.gif) no-repeat 76px 0 #FCFAF3; color:#0B0B0B; float:right;
font:bold 10px/13px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;
padding:0 20px 0 10px; margin:0;}
#newsLetter{
margin:0 auto;}
#newsLetter span.nltop{
background:url(flash_web-images/newsletter_top.gif) no-repeat 0 0 #FCFAF3; color:#000000;
line-height:0; font-size:0; height:15px; display:block;}
#newsLetter span.nlbottom{
background:url(flash_web-images/newsletter_bottom.gif) no-repeat 0 0 #FCFAF3; color:#000000;
line-height:0; font-size:0; height:14px; display:block;}
#newsLetter form.newsLetter{
background:url(flash_web-images/newsletter_midle.gif) repeat-y 0 0 #FCFAF3; color:#000000;
width:298px; padding:0 16px; float:left;}
#newsLetter form.newsLetter h2.text2{
background:url(flash_web-images/newsletter_h2_bg.gif) no-repeat 0 0; color:#786E4E;
padding:0 0 10px 55px; float:left; width:228px; height:37px;
font:normal 24px/30px Georgia, "Times New Roman", Times, serif;}
#newsLetter form.newsLetter h2.text2 span{
background-color:#FFFFFF; color:#0B0B0B;
font:normal 24px/30px Georgia, "Times New Roman", Times, serif;}
#newsLetter form.newsLetter label{
background-color:#FFFFFF; color:#0B0B0B; margin:0 0 8px 0; float:left;
font:bold 10px/28px Arial, Helvetica, sans-serif; text-transform:uppercase;}
#newsLetter form.newsLetter input{
background-color:#EFEBDE; color:#0B0B0B; border:#C3BCA4 1px solid;
width:168px; height:22px; padding:2px; margin:0 0 8px 15px; float:left;
font:normal 14px/20px Arial, Helvetica, sans-serif;}
#newsLetter form.newsLetter input.submit{
background:url(flash_web-images/submit_bg.gif) no-repeat 45px 0 #FFFFFF; color:#0B0B0B; border:none;
width:60px; height:13px; float:right; margin:7px 34px 0 0; padding:0 30px 0 0; cursor:pointer;
font:normal 10px/13px Arial, Helvetica, sans-serif; text-transform:uppercase;}
#contact{
width:312px; float:right;}
#contact span.ctop{
background:url(flash_web-images/contact_top.gif) no-repeat 0 0 #FCFAF3; color:#000000;
line-height:0; font-size:0; height:14px; display:block;}
#contact span.cbottom{
background:url(flash_web-images/contact_bottom.gif) no-repeat 0 0 #FCFAF3; color:#000000;
line-height:0; font-size:0; height:25px; display:block;}
#contact form.contact{
background:url(flash_web-images/contact_midle.gif) repeat-y 0 0 #FCFAF3; color:#000000;
width:272px; padding:0 20px; float:left;}
#contact form.contact h2.text3{
background:url(flash_web-images/contact_h2_bg.gif) no-repeat 0 0 #FFFFFF; color:#0B0B0B;
padding:0 0 10px 55px; float:left; width:228px; height:37px;
font:normal 24px/30px Georgia, "Times New Roman", Times, serif;}
#contact form.contact h2.text3 span{
background-color:#FFFFFF; color:#A60101;
font:normal 24px/30px Georgia, "Times New Roman", Times, serif;}
#contact form.contact label{
background-color:#FFFFFF; color:#0B0B0B; margin:0 0 8px 0; float:left;
font:bold 10px/28px Arial, Helvetica, sans-serif; text-transform:uppercase;}
#contact form.contact input{
background-color:#EFEBDE; color:#0B0B0B; border:#C3BCA4 1px solid;
width:168px; height:22px; padding:2px; margin:0 0 8px 15px; float:right;
font:normal 14px/20px Arial, Helvetica, sans-serif;}
#contact form.contact textarea{
background-color:#EFEBDE; color:#0B0B0B; border:#C3BCA4 1px solid;
width:168px; height:66px; padding:2px; margin:0 0 13px 15px; float:right;
font:normal 14px/20px Arial, Helvetica, sans-serif;}
#contact form.contact input.submit{
background:url(flash_web-images/submit_bg.gif) no-repeat 45px 0 #FFFFFF; color:#0B0B0B; border:none;
width:60px; height:13px; float:right; margin:0 0 0 10px; padding:0 20px 0 0; cursor:pointer;
font:normal 10px/13px Arial, Helvetica, sans-serif; text-transform:uppercase;}
#contact form.contact input.reset{
background:url(flash_web-images/more_bg.gif) no-repeat 45px 0 #FFFFFF; color:#0B0B0B; border:none;
width:60px; height:13px; float:right; margin:0; padding:0 15px 0 0; cursor:pointer;
font:normal 10px/13px Arial, Helvetica, sans-serif; text-transform:uppercase;}
/* ----------------- body end --------------------------- */
/* ----------------- footer start --------------------------- */
#footer{
position:relative; margin:0 auto; width:678px; padding:12px 0 50px;}
#footer a.xhtml{
background-color:#CC0000; color:#FFFFFF; width:49px; height:16px; margin:0 6px 0 0;
font:bold 13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
display:block; text-align:center; text-decoration:none; float:left;}
#footer a.xhtml:hover{
background-color:#0B0B0B; color:#FFFFFF; width:49px; height:16px; margin:0 6px 0 0;
font:bold 13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
display:block; text-align:center; text-decoration:none; float:left;}
#footer a.css{
background-color:#0B0B0B; color:#FFFFFF; width:38px; height:16px;
font:bold 13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
display:block; text-align:center; text-decoration:none; float:left;}
#footer a.css:hover{
background-color:#CC0000; color:#FFFFFF; width:38px; height:16px;
font:bold 13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
display:block; text-align:center; text-decoration:none; float:left;}
#footer ul{
float:right;}
#footer ul li{
float:left; color:#0B0B0B; background-color:#FDF9EE;
font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#footer ul li a{
color:#0B0B0B; background-color:#FDF9EE; padding:0 8px; text-decoration:none;
font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#footer ul li a:hover{
color:#0B0B0B; background-color:#EFEBDE; padding:0 8px; text-decoration:none;
font:normal 12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#footer p{
color:#A90000; background-color:#FDF9EE; padding:0 8px; float:right;
font:normal 12px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#footer p.tworld{
color:#0B0B0B; background-color:#FDF9EE; padding:0 8px; float:right;
font:normal 12px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#footer p.tworld a{
color:#0B0B0B; background-color:#FDF9EE; text-decoration:none;
font:normal 12px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#footer p.tworld a:hover{
color:#0B0B0B; background-color:#EFEBDE; text-decoration:none;
font:normal 12px/19px "Trebuchet MS", Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<!-- top navigation start -->
<div id="topNav">
<a href="index.html" title="Flash Web"><img src="flash_web-images/logo_text.gif" alt="Flash Web" width="179" height="35" border="0" /></a>
<ul>
<li><a href="#" title="Home" class="hover">Home</a></li>
<li><a href="#" title="About us">About Us</a></li>
<li><a href="#" title="Support">Support</a></li>
<li><a href="#" title="Works">Works</a></li>
<li><a href="#" title="Ideas">Ideas</a></li>
<li><a href="#" title="Profits">Profits</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
<!-- top navigation end -->
<!-- body start -->
<div id="body">
<!-- top shadow start -->
<div id="topShadow"></div>
<!-- top shadow end -->
<!-- body pannel start -->
<div id="bodyPannel">
<!-- login form start-->
<form method="post" action="#" name="login" class="search">
<h2>members <span>area</span></h2>
<label>your name</label><input name="name" type="text" id="name" />
<label>password</label><input name="password" type="password" id="password" />
<p>remember my password</p><input name="" type="checkbox" value="" class="check" /><input name="login" type="submit" id="login" value="login" title="Login" class="submit" />
</form>
<!-- login form end-->
<div id="eventLink">
<h2>events <span>links</span></h2>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscingelit. </a></li>
<li><a href="#">Dolor lectus sollicitudineu, condimentum eu,tinciduntsit </a></li>
<li><a href="#">Ametenim. Mauris nunc felis dignissi iddapibus nec, </a></li>
<li><a href="#">Eorem ipsum dolor sit amet,</a></li>
</ul>
<a href="#" title="read more" class="more">read more</a>
</div><br class="spacer" />
<div id="midle">
<h2>flash web - <span>about us</span></h2>
<p>Flash Web is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p>We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
<a href="#" title="read more" class="more">read more</a><br class="spacer" />
</div>
<div id="colorBg">
<div id="futurePlans">
<h2 class="text1">future <span>plans</span> </h2>
<ul>
<li><a href="#">Phasellus sit amet odio ultricies purus aliqum convallis. Pellentesque vestibulum.</a> Phasellus sit amet odio ultricies purus aliquam convallis. Pellentesque vestibulum. </li>
</ul><br class="spacer" />
<p><a href="#" title="read more" class="more">read more</a> </p>
<div id="newsLetter">
<span class="nltop"></span>
<form method="post" action="#" name="newsletter" class="newsLetter">
<h2 class="text2">newsletter <span>signup</span></h2>
<label>your email id</label><input name="email" type="text" id="email" />
<input name="signup" type="submit" class="submit" id="signup" value="signup" title="Signup" />
<br class="spacer" />
</form><br class="spacer" />
<span class="nlbottom"></span></div>
</div>
<div id="contact">
<span class="ctop"></span>
<form method="post" action="#" name="newsletter" class="contact">
<h2 class="text3">contact <span>form</span></h2>
<label>your name</label><input name="contactname" type="text" id="contactname" />
<label>phone no</label><input name="phno" type="text" id="phno" />
<label>email id</label><input name="contactemail" type="text" id="contactemail" />
<label>comments</label><textarea name="comments" cols="20" rows="10" id="comments"></textarea>
<br class="spacer" />
<input name="submit" type="submit" class="submit" id="submit" value="submit" title="Signup" />
<input name="reset" type="reset" class="reset" id="reset" value="reset" title="Reset" />
</form><br class="spacer" />
<span class="cbottom"></span>
</div>
</div>
</div>
<!-- body pannel end -->
<!-- top shadow start -->
<div id="bottomShadow"></div><br class="spacer" />
<!-- bottom shadow end -->
</div>
<!-- body end -->
<!-- footer start -->
<div id="footer">
<a href="http://validator.w3.org/check?uri=referer" target="_blank" title="XHTML Validation" class="xhtml">xhtml</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="CSS Validation" class="css">css</a>
<ul>
<li><a href="#" title="Home" class="hover">Home</a>|</li>
<li><a href="#" title="About Us">About Us</a>|</li>
<li><a href="#" title="Support">Support</a>|</li>
<li><a href="#" title="Works">Works</a>|</li>
<li><a href="#" title="Ideas">Ideas</a>|</li>
<li><a href="#" title="Profits">Profits</a>|</li>
<li><a href="#" title="Contact">Contact</a></li>
</ul><br class="spacer" />
<p>Flash Web. All rights reserved.</p><br class="spacer" />
<p class="tworld">Designed By : <a href="http://www.templateworld.com/" target="_blank">Template World</a></p>
</div>
<!-- footer end -->
</body>
</html>
Related examples in the same category