Large banner image
<!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.gif) 0 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.jpg) 0 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.gif) 0 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.gif) 0 0 no-repeat;
margin: 3px 0 0 16px;
text-indent: -20000px;
}
#topPan ul li.home a:hover {
background: url(Floral-Impact-images/home-hover.gif) 0 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.gif) 0 0 no-repeat;
margin: 3px 0 0 15px;
text-indent: -20000px;
}
#topPan ul li.sitemap a:hover {
background: url(Floral-Impact-images/sitemap-hover.gif) 0 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.gif) 0 0 no-repeat;
margin: 3px 0 0 15px;
text-indent: -20000px;
}
#topPan ul li.contact a:hover {
background: url(Floral-Impact-images/contact-hover.gif) 0 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.gif) 0 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.gif) 0 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.jpg) 0 0 no-repeat;
font-size: 18px;
line-height: 18px;
position: relative;
margin: 0 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.jpg) 13px 0 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.jpg) 13px 0 no-repeat;
text-decoration: none;
}
#btrightPan #planning {
width: 203px;
height: 58px;
display: block;
background: url(Floral-Impact-images/side-frame.jpg) 0 0 no-repeat;
line-height: 18px;
position: relative;
margin: 0 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.jpg) 13px 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.jpg) 13px 1px
no-repeat;
text-decoration: none;
}
#btrightPan #services {
width: 203px;
height: 58px;
display: block;
background: url(Floral-Impact-images/side-frame.jpg) 0 0 no-repeat;
line-height: 18px;
position: relative;
margin: 0 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.jpg) 13px 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.jpg) 13px 1px
no-repeat;
text-decoration: none;
}
#btrightPan #projects {
width: 203px;
height: 58px;
display: block;
background: url(Floral-Impact-images/side-frame.jpg) 0 0 no-repeat;
line-height: 18px;
position: relative;
margin: 0 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.jpg) 13px 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.jpg) 13px 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.gif) 0 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.gif) 0 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.jpg) 100% 100%
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.gif) 0 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.gif) 0 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.jpg) 0 0 no-repeat;
text-indent: -20000px;
}
#bottomleftPan p.online a:hover {
background: url(Floral-Impact-images/online-chat.jpg) 0 0 no-repeat;
text-indent: -20000px;
}
#bottomleftPan form {
width: 250px;
height: 137px;
background: url(Floral-Impact-images/form.gif) 0 100% no-repeat;
position: relative;
}
#bottomleftPan form h2 {
width: 224px;
height: 38px;
display: block;
background: url(Floral-Impact-images/form-h2-bg.gif) 0 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.gif) 116px 6px
no-repeat #fff;
color: #FEA905;
text-decoration: none;
}
#bottomleftPan p.resistred a:hover {
background: url(Floral-Impact-images/registernow-bg.gif) 116px 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.gif) 0 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.gif) 0 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: 0 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: 0 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.gif) 0 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.gif) 0 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.gif) 0 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.gif) 0 0 no-repeat
#3B3B3B;
color: #fff;
text-decoration: none;
}
/*----/FOOTER PANEL----*/
</style>
</head>
<body>
<div id="topPan">
<a href="index.html"><img src="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">"per inceptos hymenaeos. Cras condimentum ullamcorper pede. Sed nec elitfaucibus aliquam vitaodio interdum vulputate."</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>
<li> <a href="http://www.cssportal.com/">CSS Portal</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category