BusinessSolution
<!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>Business Solution</title>
<style type='text/css'>
/* CSS Document */
body{
padding:56px 0 86px 0; margin:0; font-family:Tahoma, Arial, Helvetica, sans-serif;
}
div, p, h1, h2, h3, h4, img, form, ul{
padding:0; margin:0;
}
ul{
list-style-type:none; font-size:0; line-height:0;
}
.spacer{
clear:both; line-height:0; font-size:0;
}
img{
display:block; font-size:0;
}
/*------------------body part start--------------*/
#body{
background:url(images/bg.gif) repeat-x 0 0 #1D6EA2; color:#575757; padding:39px 0 0 0;
}
#mainBody{
width:738px; margin:0 auto; border-left:#FFFFFF 1px solid; border-right:#FFFFFF 1px solid;
background-color:#FFFFFe; color:#575757;
}
/*-----------------left part start---------------*/
#left{
width:436px; float:left; background:url(images/right_pic.jpg) no-repeat 0 0; padding:234px 0 0 0; position:relative;
}
#left img.logo{
position:absolute; left:11px; top:22px;
}
#left ul.navi{
background:url(images/navi.gif) repeat-x 0 0 #82AC1C; color:#FFFFFF; border-bottom:#FFFFFF 1px solid; height:46px;
padding:0 0 0 8px;
}
#left ul.navi li{
background:url(images/navi_sapa.gif) no-repeat right top; padding:0 18px; float:left; display:block;
}
#left ul.navi li.nobor{
background-image:none;
}
#left ul.navi li a{
font:bold 12px/46px "Helvetica Neue", Arial, Helvetica, sans-serif; text-transform:uppercase; color:#FFFFFF;
background-color:inherit; text-decoration:none;
}
#left ul.navi li a:hover{
color:#314500; background-color:inherit;
}
/*------------welcome part-------*/
#welcome{
width:244px; float:left; background-color:#CED5D3; border-top:#B5BFBC 4px solid; border-bottom:#FFFFFF 1px solid;
color:#2E4F66; padding:2px 0 25px 20px;
}
#welcome h2{
height:35px; border-bottom:#B5BFBC 1px solid; background:url(images/welcome_left.gif) no-repeat 0 0 #CED5D3; padding:0 0 0 7px;
font:bold 20px/35px "Helvetica Neue", Arial, Helvetica, sans-serif; color:#000000; display:block;
letter-spacing:-1px; margin:0 0 11px 0;
}
#welcome p{
margin:0 8px 0 0; font-size:11px; line-height:13px;
}
/*---------------business-----*/
#business{
width:260px; float:left; background-color:#D9D9D9; color:#2E4F66; padding:2px 0 0 4px;
}
#business h2{
height:28px; padding:0 0 0 15px; background-color:#FFFFFF;
font:bold 20px/28px "Helvetica Neue", Arial, Helvetica, sans-serif; color:#8F8F8F; display:block;
letter-spacing:-1px; border-top:#EEEEEE 2px solid; border-left:#EEEEEE 1px solid;
}
#business div{
border-left:#EEEEEF 1px solid; background:url(images/business_pic.jpg) no-repeat 11px 16px #EEEEEE; color:#575757;
padding:16px 15px 11px 107px;
}
#business div h3{
color:#175F8E; font-size:11px; font-weight:bold; line-height:15px; display:block; background-color:inherit;
margin:0 0 12px 0; text-decoration:underline;
}
#business div p{
font-size:11px;
}
/*------------------photo gallery------*/
#gallery{
width:98px; border-right:#3D7086 1px solid; border-top:#3D7086 4px solid; border-bottom:#3D7086 4px solid;
background:url(images/gallery.gif) no-repeat 0 1px #4C8097; color:#fff; float:right; padding:22px 15px 23px 57px;
}
#gallery img{
margin:0 0 1px 0;
}
/*----------------------right part start--------------*/
#right{
width:301px; float:right; background:url(images/right_part_pic.gif) no-repeat 0 73px;
}
#right form{
background:url(images/loging_bg.gif) no-repeat 0 0 #FF9306; height:56px; padding:17px 14px 0 46px; color:#FFFFFF;
}
#right form h2{
font:bold 17px/25px "Helvetica Neue", Arial, Helvetica, sans-serif; float:left; width:90px; margin:0 0 20px 0;
letter-spacing:-1px;
}
#right form input.textbox{
width:92px; height:10px!important; border:#FF6406 1px solid; background-color:#FFFFFF; color:#000000; float:right;
margin:0 0 4px 0;
}
#right form label{
width:55px; font-size:11px; display:block; float:left; line-height:16px;
}
#right form input.login{
background:url(images/login.gif) no-repeat 0 0; width:41px; height:15px; border:none; font-size:0; cursor:pointer;
float:right;
}
#right h1{
background:url(images/cutting.gif) no-repeat 0 0; height:27px; display:block; margin:80px 0 54px 0; font-size:0; line-height:0;
text-indent:-2000px;
}
#news{
background:url(images/new_icon.gif) no-repeat 0 0 #EEEEEE; color:#575757; border-left:#D9D9D9 4px solid;
border-top:#D9D9D9 4px solid; padding:13px 0 0 19px; margin:0 0 0 0; width:278px;
}
#news h2{
margin:0 0 20px 0px; background-color:#FFFFFF; color:#696969; padding:7px 0 0 4px; float:right;
font:bold 20px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; display:block; width:244px;
}
#news img{
display:block; margin:0 0 22px 0; font-size:0; height:61px; width:87px; float:left;
}
#news p{
margin:0 0 21px 0; font-size:11px; width:150px; display:block; float:right; padding:0 15px 0 0;
}
#news p a{
background:url(images/more_icon.gif) no-repeat right center #EEEEEE; color:#2E4F66; text-decoration:underline;
text-transform:uppercase; width:49px; font-size:11px; font-weight:bold; line-height:16px; display:block;
margin:8px 0 0 0;
}
#news p a:hover{
text-decoration:none;
}
/*--------------footer part start--------*/
#bigFooter{
background:url(images/footer_bg.gif) repeat-x 0 0; height:40px;
}
#footer{
width:738px; font-size:11px; margin:0 auto; padding:14px 0 2px 0 ;
}
#footer p{
text-align:right; line-height:11px; color:#575757; background-color:inherit;
}
#footer p a{
text-decoration:underline; color:#575757; background-color:inherit;
}
#footer p a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<!--body part start -->
<div id="body">
<!--main body part start -->
<div id="mainBody">
<!--left part start -->
<div id="left">
<a href="index.html">
<img src="images/logo.gif" alt="Business Solution" title="Business Solution" width="99" height="35"
border="0" class="logo" /> </a>
<ul class="navi">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Support">Support</a></li>
<li><a href="#" title="Portfolio">Portfolio</a></li>
<li class="nobor"><a href="#" title="News">News</a></li>
</ul>
<!--right bottom div part start -->
<div>
<div id="welcome">
<h2>Welcome </h2>
This is Business Solution, 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 :)
</div>
<!--gallery part start -->
<div id="gallery">
<img src="images/pic.jpg" alt="Gallery01" title="Gallery01" width="98" height="71" />
<img src="images/pic1.jpg" alt="Gallery02" title="Gallery02" width="98" height="71" />
<img src="images/pic2.jpg" alt="Gallery03" title="Gallery03" width="98" height="71" />
</div>
<!--gallery part end -->
<!--business icon star -->
<div id="business">
<h2>Business icon of the month</h2>
<div>
<h3>Lorem ipsum dolor sit </h3>
<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
</div>
</div>
<!--business icon end -->
<br class="spacer" />
</div>
<!--right bottom div part end -->
</div>
<!--left part end -->
<!--right part start -->
<div id="right">
<form method="post" action="">
<h2>User Login</h2>
<label>User ID</label>
<input type="text" name="text" value="" class="textbox" />
<label>Password</label>
<input type="text" name="text" value="" class="textbox" />
<label> </label>
<input type="submit" name="submit" title="Login" alt="Login" value="" class="login" />
</form>
<h1>Cutting edge solutions for your business</h1>
<!--latest news start -->
<div id="news">
<h2>Latest News</h2>
<img src="images/news_pic.jpg" alt="News pic01" title="News pic01" width="87" height="61" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<a href="#" title="more">more </a>
</p>
<img src="images/news_pic1.jpg" alt="News pic02" title="News pic02" width="87" height="61" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<a href="#" title="more">more </a>
</p>
<img src="images/news_pic2.jpg" alt="News pic03" title="News pic03" width="87" height="61" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<a href="#" title="more">more </a>
</p>
<div class="spacer"></div>
</div>
<!--latest news end -->
<div class="spacer"></div>
</div>
<!--right part end -->
<br class="spacer" />
</div>
<!--main body part end -->
</div>
<!--body part end -->
<!--big footer part start -->
<div id="bigFooter">
<!--footer part start -->
<div id="footer">
<p>2006 BusinessSolutions. All Rights Reserved. </p>
<p><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></p>
</div>
<!--footer part end -->
</div>
<!--big footer part end -->
</body>
</html>
Related examples in the same category