BusinessName
<!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>Welcome to Business Name</title>
<style type='text/css'>
/* CSS Document */
body{
margin:0px; background:url(images/bodybg.jpg) repeat-x left top #FFF;
color:#4D4747;
}
.spacer {
clear:both; padding:0; margin:0;
}
#frame{
width:768px; padding:0 5px; background-color:#FFF; margin:0 auto;
color:#4D4747;
}
img {
border:none;
}
/* Header part style start from here */
#headcontainer{
width:768px; height:308px; margin:auto; color:#4D4747;
background:#FFF url(images/banner.jpg) no-repeat 0 17px; position:relative;
}
#headcontainer h1 {
display:none;
}
#headcontainer .logo {
margin:98px 0 0 50px;
padding:0;
position:absolute;
left: 1px;
}
#headcontainer ul {
padding:34px 35px 0px 0px; margin:0; list-style-type:none; position:absolute;
}
#headcontainer ul li {
background:url(images/topnav-bor.gif) repeat-y 100% 0; padding:0 0px 0 0; margin:0; float:right; line-height:14px;
}
#headcontainer ul li.nobor {
background:none; padding:0 0px 0 0; margin:0; float:right; line-height:14px;
}
#headcontainer ul li a {
text-decoration:none; display:block; padding:0; margin:0; text-indent:-2000px;/*border-right:1px dotted #A6A3A3;*/ float:left; outline:none;
}
#headcontainer ul li a.home {
background:url(images/icon-hme.gif) no-repeat 0 50%; width:18px; /*border:1px solid #000;*/
}
#headcontainer ul li a.sitemap {
background:url(images/icon-sitemap.gif) no-repeat 50% 50%; width:26px; /*border:1px solid #000;*/
}
#headcontainer ul li a.message {
background:url(images/icon-message.gif) no-repeat 50% 50%; width:25px; /*border:1px solid #000;*/
}
/* Header part style end here */
/* main part style start from here */
/* left panel start from here */
#maincontainer{
width:768px; background-color:#FFFFFF; margin:0 auto; position:relative; color:#4D4747;
}
#leftnavcontainer{
width:226px; padding:0px 0 0; float:left; margin:0 auto;
}
#leftnavcontainer ul {
margin:0; padding:0; list-style-type:none; float:right;
}
#leftnavcontainer ul li {
width:177px; margin:0; padding:0 0 2px;
}
#leftnavcontainer ul li a{
display:block; color:#FFFFFF; text-decoration:none; padding:4px 0 4px 8px;
font:bold 12px Arial, Helvetica, sans-serif; height:15px; background-color:inherit;
}
#leftnavcontainer ul li a:hover{
text-decoration:none;
}
#leftnavcontainer ul li a.grey {
background-color:#66768F; color:#FFFFFF;
}
#leftnavcontainer ul li a.grey:hover {
background-color:#4B576B; color:#FFFFFF;
}
#leftnavcontainer ul li a.green {
background-color:#98C52A; color:#FFFFFF;
}
#leftnavcontainer ul li a.green:hover {
background-color:#618014; color:#FFFFFF;
}
#leftnavcontainer ul li a.red {
background-color:#D43329; color:#FFFFFF;
}
#leftnavcontainer ul li a.red:hover {
background-color:#B51F15; color:#FFFFFF;
}
#leftnavcontainer ul li a.orange {
background-color:#E9982D; color:#FFFFFF;
}
#leftnavcontainer ul li a.orange:hover {
background-color:#BE7310; color:#FFFFFF;
}
#leftnavcontainer ul li a.yellow {
background-color:#F2EC12; color:#FFFFFF;
}
#leftnavcontainer ul li a.yellow:hover {
background-color:#C1BC06; color:#FFFFFF;
}
/* left panel end from here */
/* right panel start from here */
#body{
width:537px; padding:0 0 0 5px; background-color:#FFFFFF; color:#4D4747;
float:left; margin:0 auto;
}
#welcomecontacienr{
width:491px; background-color:#FAF5EB; padding:20px 28px 20px 18px; color:#4D4747;
}
#welcomecontacienr h2.welcome {
background:url(images/welcome.gif) no-repeat 0 0; margin:0; padding:0;/* border:1px solid #000;*/
text-indent:-2000px;
}
#welcomecontacienr p {
background:url(images/welcomepic.jpg) no-repeat 0 14px; background-color:inherit;
padding:14px 0 0 140px; font: normal 12px/14px Arial, Verdana, Helvetica, sans-serif;
text-align:justify; color:#4D4747; margin:0;
}
#welcomecontacienr p span {
color:#155282; font-weight:bold; padding:0 0 4px; margin:0; display:block; background-color:inherit;
}
#welcomecontacienr p a{
font:normal 12px Arial, Helvetica, sans-serif; color:#FF0000;
text-decoration:none; text-align:right; float:right; background-color:inherit;
}
#welcomecontacienr p a:hover{
text-decoration:underline;
}
/*body bottom div*/
#bodybttom{
width:537px; padding:5px 0 0; margin:0;
}
/*bleft*/
#bleft{
width:173px; padding:0 0 5px 0; float:left; margin:0 20px 0 0;
}
/*news events*/
#newscontainer{
width:139px; border:1px solid #155282; color:#4D4747;
background-color:#CFE1F0; margin:0 0 5px; padding:9px 14px 19px 18px;
}
#newscontainer h2.news-events {
background:url(images/newsandevents.gif) no-repeat 0 0; padding:0; margin:0; text-indent:-2000px;
}
#newscontainer p {
font:normal 12px Arial, Helvetica, sans-serif; padding:10px 0 0; margin:0;
}
#newscontainer p span {
display:block; font-weight:bold; color:#000000; padding:0 0 6px; background-color:inherit;
}
#newscontainer p a{
font:normal 12px Arial, Helvetica, sans-serif; color:#4D4747; background-color:inherit;
text-decoration:none; text-align:right; padding:2px 0 0; float:right;
}
#newscontainer p a:hover{
text-decoration:underline;
}
/*news events*/
/*sign up container*/
#sigupcontainer{
width:171px; padding:0; border:1px solid #999999;
background-color:#F3F3F3; margin:0; color:#797979;
}
#sigupcontainer h2.newsletter {
background:url(images/newsletter.gif) no-repeat 18px 6px; text-indent:-2000px;
border-bottom:1px solid #CC0000; background-color:#DEDEDE;
padding:6px 0 0; margin:0; color:#797979;
}
#sigupcontainer form {
margin:0; padding:12px 8px 12px 14px;
}
#sigupcontainer form label {
font:bold 11px Arial, Helvetica, sans-serif; color:#797979; background-color:inherit;
width:69px; display:block; padding:0; margin:0 0 5px; float:left;
}
#sigupcontainer form input.textbox {
width:74px; height:15px; border:1px solid #C5C2C2;
font:normal 11px Arial, Helvetica, sans-serif; padding:0; margin:0 0 5px;
}
#sigupcontainer form input.btn {
width:58px; height:20px; border:0px solid #C5C2C2; padding:0; margin:0 0 0 16px;
}
/*sign up container*/
/*bleft*/
/*bright*/
#bright{
width:325px; padding:12px 18px 0 0; background-color:#FFFFFF;
float:left; margin:0; color:#4D4747;
}
#bright p {
font:normal 12px/14px Arial, Helvetica, sans-serif;
padding:3px 0 16px 188px; margin:0;
}
#bright p span {
font-weight:bold; color:#155282; background-color:inherit;
display:block; padding:0 0 2px; margin:0;
}
#bright p a{
font:normal 12px/14px Arial, Helvetica, sans-serif; background-color:inherit;
color:#FF0000; text-decoration:none; text-align:right; display:block; margin:0;
}
#bright p a:hover{
text-decoration:underline;
}
#bright p.pic1 {
background:url(images/bpic1.jpg) no-repeat 0 0;
}
#bright p.pic2 {
background:url(images/bpic2.jpg) no-repeat 0 0;
}
#bright p.pic3 {
background:url(images/bpic3.jpg) no-repeat 0 0;
}
/*bright*/
/* right panel start from here */
/* main part style end here */
/*footer*/
#footercontainer{
width:537px; padding:13px 0; font: normal 11px Arial, Verdana, Helvetica, sans-serif; color:#000000; text-align:center; background-color:#FFB90F; margin:0 0 30px; float:right;
}
#footercontainer a{
font: normal 11px Arial, Verdana, Helvetica, sans-serif; color:#000;
text-decoration:none; padding:0; margin:0;background-color:#FFB90F;
}
#footercontainer a:hover{
text-decoration:underline;
}
/*footer*/
</style>
</head>
<body>
<div id="frame">
<!--header start here -->
<div id="headcontainer">
<a href="index.html"><img src="images/logo.jpg" alt="Welcome to Business Name" title="Welcome to Business Name" width="137" height="119" class="logo" /></a>
<h1>We are making Business GLOBALLY</h1>
<ul>
<li class="nobor"><a href="#" class="message" title="Message">Message</a></li>
<li><a href="#" class="sitemap" title="Sitemap">Sitemap</a></li>
<li><a href="#" class="home" title="Home">Home</a></li>
</ul>
</div>
<!--header end here -->
<!--body start here -->
<div id="maincontainer">
<!--left panel start here -->
<div id="leftnavcontainer">
<ul>
<li><a href="#" class="grey" title="About Company">About Company</a></li>
<li><a href="#" class="green" title="Services">Services</a></li>
<li><a href="#" class="red" title="Partners">Partners</a></li>
<li><a href="#" class="orange" title="How to Help">How to Help</a></li>
<li><a href="#" class="yellow" title="Support">Support</a></li>
</ul>
<br class="spacer" />
</div>
<!--left panel end here -->
<!--right panel end here -->
<div id="body">
<!--welcome part start here -->
<div id="welcomecontacienr">
<h2 class="welcome">Welcome to our Website</h2>
<p><span>Free CSS Templates</span>
This is Website, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>. <br/>
This free template is released under a Creative Commons Attributions 2.5 license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
<a href="#" title="Readmore">Read more</a></p>
<br class="spacer" />
</div>
<!--welcome part start here -->
<!--bottom panel part start here -->
<div id="bodybttom">
<!--bleft start here -->
<div id="bleft">
<!--news events start here -->
<div id="newscontainer">
<h2 class="news-events">News and events</h2>
<p><span>17/05/06</span>
Lorem ipsum dolor sit amet, orci mauris, neque lacinia nibh ullamcorper <a href="#" title="more">...more</a>
<br class="spacer" /></p>
<p><span>18/05/06</span>
Lorem ipsum dolor sit amet, orci mauris, neque lacinia nibh ullamcorper <a href="#" title="more">...more</a><br class="spacer" /></p>
</div>
<!--news events start here -->
<!--newsletter singup start here -->
<div id="sigupcontainer">
<h2 class="newsletter">Newsletter Signup</h2>
<form action="" method="get">
<label>user name:</label> <input name="" type="text" class="textbox" />
<label>password: </label> <input name="" type="password" class="textbox" />
<label> </label> <input type="image" src="images/btn_submit.gif" class="btn" title="Submit" />
</form>
</div>
<!--newsletter singup start here -->
</div>
<!--bleft end here -->
<!--bright start here -->
<div id="bright">
<p class="pic1"><span>Lorem ipsum dolor sit amet, orci mauris</span>Lorem ipsum dolor sit amet, orci mauris, neque lacinia nibh ullamcorper vestibulum, <a href="#" title="more">... more</a> </p>
<p class="pic2"><span>Lorem ipsum dolor sit amet, orci mauris</span> Lorem ipsum dolor sit amet, orci mauris, neque lacinia nibh ullamcorper vestibulum, <a href="#" title="more">... more</a></p>
<p class="pic3"><span>Lorem ipsum dolor sit amet, orci mauris</span> Lorem ipsum dolor sit amet, orci mauris, neque lacinia nibh ullamcorper vestibulum, <a href="#" title="more">... more</a></p>
</div>
<!--bright end here -->
<br class="spacer" />
</div>
<!--bottom panel part end here -->
</div>
<!--right panel end here -->
<br class="spacer" />
<!--footer start here -->
<div id="footercontainer">
Copyright 2006. All rights reserved.<br />
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a>
</div>
<!--footer start here -->
</div>
<!--body end here -->
</div>
</body>
</html>
Related examples in the same category