floral_impact : Flower « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Flower 




floral_impact
    

<!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>Floral Impact     </title>
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:url(floral_impact-images/main-bg.gif0 0 repeat-x #fff; color:#7D7D7D; font:14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, form, label, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*----TOP PANEL----*/
#topPan{width:778px; height:184px; background:url(floral_impact-images/header.jpg0 0 no-repeat; position:relative;}
#topPan img.logo{width:448px; height:45px; position:absolute; top:139px; right:0px;}

#topPan ul{width:140px; height:29px; background:url(floral_impact-images/top-nav.gif0 0 no-repeat; position:absolute; top:23px; left:195px;}
#topPan ul li{float:left;}

#topPan ul li.home{width:47px; height:29px; float:left;}
#topPan ul li.home a{width:18px; height:16px; display:block; background:url(floral_impact-images/home-hover.gif0 0 no-repeat; margin:3px 0 0 16px;  text-indent:-20000px;}
#topPan ul li.home a:hover{background:url(floral_impact-images/home-hover.gif0 0 no-repeat;}

#topPan ul li.sitemap{width:43px; height:29px; float:left;}
#topPan ul li.sitemap a{width:18px; height:16px; display:block; background:url(floral_impact-images/sitemap-nor.gif0 0 no-repeat; margin:3px 0 0 15px;  text-indent:-20000px;}
#topPan ul li.sitemap a:hover{background:url(floral_impact-images/sitemap-hover.gif0 0 no-repeat;}

#topPan ul li.contact{width:43px; height:29px; float:left;}
#topPan ul li.contact a{width:18px; height:16px; display:block; background:url(floral_impact-images/contact-nor.gif0 0 no-repeat; margin:3px 0 0 15px;  text-indent:-20000px;}
#topPan ul li.contact a:hover{background:url(floral_impact-images/contact-hover.gif0 0 no-repeat;}
/*----/TOP PANEL----*/

/*----BODY TOP PANEL----*/
#bodytopPan{width:778px; position:relative; padding:13px 0 0;}
/*----Body Top Left Panel----*/
#btleftPan{width:490px; float:left; padding:0 36px;}
#btleftPan h2{width:290px; height:53px; background:#fff; color:#FF9209; font:30px/53px Georgia, "Times New Roman", Times, serif;}

#btleftPan p span{font-weight:bold;}

#btleftPan p.more{width:73px; height:25px; margin:0 0 0 417px; font:12px/24px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase;}
#btleftPan p.more a{width:53px; height:25px; display:block; background:url(floral_impact-images/rollover-nor.gif0 0 no-repeat #FAFAFA; color:#fff; padding:0 0 0 20px; text-decoration:none;}
#btleftPan p.more a:hover{background:url(floral_impact-images/rollover-hover.gif0 0 no-repeat #FAFAFA; color:#A67B03; text-decoration:none;}
/*----/Body Top Left Panel----*/

/*----Body Top Right Panel----*/
#btrightPan{width:203px; float:left; font-family:Arial, Helvetica, sans-serif;}

#btrightPan #graph{width:203px; height:58px; display:block; background:url(floral_impact-images/side-frame.jpg0 0 no-repeat; font-size:18px; line-height:18px; position:relative; margin:auto;}
#btrightPan #graph h2{width:60px; height:22px; display:block; background:#fff; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #graph p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #graph a{width:202px; height:58px; display:block; background:url(floral_impact-images/graph-nor.jpg13px no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #graph a:hover{background:url(floral_impact-images/graph-hover.jpg13px no-repeat; text-decoration:none;}

#btrightPan #planning{width:203px; height:58px; display:block; background:url(floral_impact-images/side-frame.jpg0 0 no-repeat;  line-height:18px; position:relative; margin:auto;}
#btrightPan #planning h2{width:60px; height:22px; display:block; background:#fff; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #planning p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #planning a{width:202px; height:58px; display:block; background:url(floral_impact-images/planning-nor.jpg13px 1px no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #planning a:hover{background:url(floral_impact-images/planning-hover.jpg13px 1px no-repeat; text-decoration:none;}

#btrightPan #services{width:203px; height:58px; display:block; background:url(floral_impact-images/side-frame.jpg0 0 no-repeat;  line-height:18px; position:relative; margin:auto;}
#btrightPan #services h2{width:60px; height:22px; display:block; background:#fff; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #services p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #services a{width:202px; height:58px; display:block; background:url(floral_impact-images/services-nor.jpg13px 1px no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #services a:hover{background:url(floral_impact-images/services-hover.jpg13px 1px no-repeat; text-decoration:none;}

#btrightPan #projects{width:203px; height:58px; display:block; background:url(floral_impact-images/side-frame.jpg0 0 no-repeat;  line-height:18px; position:relative; margin:auto;}
#btrightPan #projects h2{width:60px; height:22px; display:block; background:#fff; color:#FF8700; font-size:18px; position:absolute; top:7px; left:86px;}
#btrightPan #projects p{font-size:14px; position:absolute; top:30px; left:86px;}
#btrightPan #projects a{width:202px; height:58px; display:block; background:url(floral_impact-images/projects-nor.jpg13px 1px no-repeat; font-size:0px; text-decoration:none; margin:0 0 0 1px; text-indent:-2000px}
#btrightPan #projects a:hover{background:url(floral_impact-images/projects-hover.jpg13px 1px no-repeat; text-decoration:none;}

/*----/Body Top Right Panel----*/

/*----Body Middle Panel----*/
#bodymiddlePan{width:708px; padding:0 34px 0 36px; clear:both;}

#bodymiddlePan h3{width:300px; height:65px; background:#fff; color:#7D7D7D; font:30px/65px Georgia, "Times New Roman", Times, serif;}
#bodymiddlePan ul{width:707px; height:100px; margin:0px;}
#bodymiddlePan ul li{width:707px; height:28px;}
#bodymiddlePan ul li a{width:688px; height:20px; display:block; background:url(floral_impact-images/bullet.gif0 6px no-repeat #fff; color:#7D7D7D; font-size:16px; line-height:20px; text-decoration:none; padding:0 0 0 20px;}
#bodymiddlePan ul li a:hover{background:url(floral_impact-images/bullet.gif0 6px no-repeat #fff; color:#5C5C5C; text-decoration:none;}

#bodymiddlePan h4{width:628px; height:24px; display:block; float:left; background:url(floral_impact-images/border-line.jpg100100% no-repeat #fff; color:#CCC502; font-size:30px; line-height:24px; padding:0px; margin:0px;}

#bodymiddlePan p.more{width:73px; height:25px; display:block; float:left; font:12px/24px Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; margin:0 0 0 6px;}
#bodymiddlePan p.more a{width:53px; height:25px; display:block; background:url(floral_impact-images/rollover-nor.gif0 0 no-repeat #FAFAFA; color:#fff; padding:0 0 0 20px; text-decoration:none;}
#bodymiddlePan p.more a:hover{background:url(floral_impact-images/rollover-hover.gif0 0 no-repeat #FAFAFA; color:#A67B03; text-decoration:none;}
/*----/Body Middle Panel----*/

/*----Body Bottom Panel----*/
#bodybottomPan{width:706px; padding:0px 36px; clear:both;}
/*----Bottom Left Panel----*/
#bottomleftPan{width:250px; float:left; padding:27px 0 0;}

#bottomleftPan p.online{width:250px; height:107px;}
#bottomleftPan p.online a{width:250px; height:107px; display:block; background:url(floral_impact-images/online-chat.jpg0 0 no-repeat; text-indent:-20000px;}
#bottomleftPan p.online a:hover{background:url(floral_impact-images/online-chat.jpg0 0 no-repeat; text-indent:-20000px;}

#bottomleftPan form{width:250px; height:137px; background:url(floral_impact-images/form.gif0 100% no-repeat; position:relative;}
#bottomleftPan form h2{width:224px; height:38px; display:block; background:url(floral_impact-images/form-h2-bg.gif0 0 no-repeat #fff; color:#716D12; font:20px/40px Georgia, "Times New Roman", Times, serif; padding:7px 0 0 26px;}
#bottomleftPan form label{width:150px; height:18px; display:block; background:#fff; color:#7D7D7D; font:13px/18px Arial, Helvetica, sans-serif; font-weight:bold;}
#bottomleftPan form label.labeltopmarginone{position:absolute; top:49px; left:26px;}
#bottomleftPan form label.labeltopmargintwo{position:absolute; top:92px; left:26px;}

#bottomleftPan form input{width:135px; height:17px; font-size:14px;}
#bottomleftPan form input.inputtopmarginone{position:absolute; top:69px; left:26px;}
#bottomleftPan form input.inputtopmargintwo{position:absolute; top:110px; left:26px;}
#bottomleftPan form input.botton{width:60px; height:23px; display:block; background:#fff; color:#7D7D7D; border:none; position:absolute; top:110px; right:20px; font:16px/23px Georgia, "Times New Roman", Times, serif; font-weight:bold;}

#bottomleftPan h3{width:250px; height:28px; background:#fff; color:#7D7D7D; font:22px/23px Arial, Helvetica, sans-serif; padding:11px 0 0;}

#bottomleftPan p.resistred{width:250px; height:22px; font:18px/22px Arial, Helvetica, sans-serif;}
#bottomleftPan p.resistred a{width:250px; height:22px; display:block; background:url(floral_impact-images/registernow-bg.gif116px 6px no-repeat #fff; color:#FEA905; text-decoration:none; }
#bottomleftPan p.resistred a:hover{background:url(floral_impact-images/registernow-bg.gif116px 6px no-repeat #fff; color:#C98703; text-decoration:none; }

/*----/Bottom Left Panel----*/

/*----Bottom Right Panel----*/
#bottomrightPan{width:407px; float:left; padding:42px 0 0 49px;}
#bottomrightPan h2{width:350px; height:33px; font:30px/33px Georgia, "Times New Roman", Times, serif; background:#fff; color:#FF8500;}
#bottomrightPan h3{width:115px; height:40px; font:18px/40px Georgia, "Times New Roman", Times, serif; background:url(floral_impact-images/athorname-border.gif0 15px no-repeat #fff; color:#FF8500; padding:0 0 0 291px;}

#bottomrightPan p{padding:6px 0;}
#bottomrightPan p span{font-weight:bold;}

#bottomrightPan p.greencaptiontext{background:#fff; height:72px; color:#ABA501; font:18px/24px Georgia, "Times New Roman", Times, serif; font-style:italic; padding:10px 0 0;}
/*----/Bottom Right Panel----*/

/*----FOOTER PANEL----*/
#footermainPan{height:126px; background:url(floral_impact-images/footerbg.gif0 0 repeat-x #F1F1F1; color:#585858; font:13px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; clear:both; padding:68px 0 0;}

#footerPan{width:706px; position:relative; padding:0 0 0 36px;}

#footerPan ul{width:480px; height:20px; position:relative; margin:auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#585858; background:#F1F1F1; text-decoration:none; font-size:12px;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:260px; position:relative; margin:auto; background:#F1F1F1; color:#9F5300;  font-size:13px;}

#footerPan ul.templateworld{width:250px; background:#F1F1F1; color:#585858; display:block; position:absolute; top:70px; left:285px; font-size:10px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#F1F1F1; display:block; color:#585858; text-decoration:none; padding:0px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:45px; left:285px;}
#footerPanhtml a{width:66px; height:24px; display:block; background:url(floral_impact-images/html-nor.gif0 0 no-repeat #F1F1F1; color:#fff; font-size:14px; line-height:24px; font-weight:bold; text-decoration:none;text-transform:uppercase; padding:0 0 0 4px;}
#footerPanhtml a:hover{background:url(floral_impact-images/html-hover.gif0 0 no-repeat #3B3B3B; color:#fff;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:45px; left:360px;}
#footerPancss a{width:50px; height:24px; display:block; background:url(floral_impact-images/css-nor.gif0 0 no-repeat #F1F1F1; color:#fff; font-size:14px; line-height:24px; font-weight:bold; text-decoration:none; text-transform:uppercase; padding:0 0 0 8px;}
#footerPancss a:hover{background:url(floral_impact-images/css-hover.gif0 0 no-repeat #3B3B3B; color:#fff; text-decoration:none;}
/*----/FOOTER PANEL----*/

</style>


</head>

<body>
<div id="topPan">
  <a href="index.html"><img src="floral_impact-images/logo.jpg" title="Floral Impact" alt="Floral Impact" width="448" height="45" border="0" class="logo" /></a>
    <ul>
      <li class="home"><a href="#">home</a></li>
      <li class="sitemap"><a href="#">site map</a></li>
      <li class="contact"><a href="#">contact</a></li>
    </ul>
</div>
<div id="bodytopPan">
  <div id="btleftPan">
    <h2>who we are</h2>
  <p>Floral Impact is a <span>free, tableless, W3C-compliant</span> 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>
  <p>If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 10 new free templates in the coming month.</p>
  <p class="more"><a href="#">more</a></p>
  </div>
  <div id="btrightPan">
    <div id="graph">
      <h2>Graph</h2>
      <p>Aenean congue</p>
      <a href="#">graph</a>
  </div>
    <div id="planning">
      <h2>Planning</h2>
      <p>Aenean congue</p>
      <a href="#">graph</a>
    </div>
    <div id="services">
      <h2>Services</h2>
      <p>Aenean congue</p>
      <a href="#">graph</a>
    </div>
    <div id="projects">
      <h2>Projects</h2>
      <p>Aenean congue</p>
      <a href="#">graph</a>
    </div>
  </div>
  
</div>
<div id="bodymiddlePan">
  <h3>Latest previews</h3>
  <ul>
    <li><a href="#">tellus.faucibus aliquam. In faucibus aliquet velit. Vivamus eget mauris. mnec odio. Class aptent</a> </li>
    <li><a href="#">taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras </a> </li>
    <li><a href="#">condimentuullamcorper pede. Sed nec elitfaucibus aliquam vitaodio interdum vulputate.</a> </li>
  </ul>
  <h4>want to know more?</h4>
  <p class="more"><a href="#">more</a></p>
</div>
<div id="bodybottomPan">
  <div id="bottomleftPan">
    <p class="online"><a href="#">online chat</a></p>
  <form action="" method="post">
    <h2>member login</h2>
    <label class="labeltopmarginone">Your Name:</label>
    <input name="Your Name" type="text" id="yourname" class="inputtopmarginone" />
    <label class="labeltopmargintwo">Password:</label>
    <input name="Password" type="password" id="password" class="inputtopmargintwo" />
    <input name="Login" type="submit" class="botton" id="Login" value="Login" />
  </form>
  <h3>Not registered?</h3>
  <p class="resistred"><a href="#">register now</a></p>
  </div>
  <div id="bottomrightPan">
    <h2>testimonials</h2>
  <p><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis Class aptent taciti lectarcu egestas luctus. Nullam dignissim tempor tellus.</span> Maur orci nec leovelitlit</p>
  <p>tellus.faucibus aliquam. In faucibus aliquet velit. Vivamus eget mauris. mnec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra,</p>
  <p class="greencaptiontext">&quot;per inceptos hymenaeos. Cras condimentum ullamcorper pede. Sed nec elitfaucibus aliquam vitaodio interdum vulputate.&quot;</p>
  <h3>P Nickelson</h3>
  </div>
</div>

<div id="footermainPan">
  <div id="footerPan">
    <ul>
    <li><a href="#">Home</a>| </li>
    <li><a href="#">About Us</a>| </li>
    <li><a href="#">Graph</a>| </li>
    <li><a href="#">Planning</a>| </li>
    <li><a href="#">Service</a>| </li>
    <li><a href="#">Project</a>| </li>
    <li><a href="#">Contact</a></li>
    </ul>
    <p class="copyright">¬©floralimpact. All right reserved.</p>
  <div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a></div>
  <div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
    <ul class="templateworld">
    <li>design by:</li>
  <li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
  </ul>
  </div>
</div>
</body>
</html>

   
    
    
    
  














Related examples in the same category
1.metamorph_flower
2.metamorph_flowergallery
3.metamorph_superflower
4.flower 2
5.flower-shop
6.flowerbuds
7.flowerily
8.flowermum
9.Flowerpremium
10.flowery
11.metamorph_floral
12.metamorph_florist
13.blossom
14.blossoms
15.metamorph_blossom
16.metamorph_roseanddrops
17.floral-design
18.floral
19.flourish
20.ftdflowered
21.rose
22.rosekist
23.rs-garden
24.safflower
25.Tulips
26.lily
27.lilypads
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.