business template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Business Web Site Design Provided by: http://www.getcsstemplates.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
}
#wrapper {
width: 770px;
margin: 0 auto;
}
img {
padding: 5px;
border: solid 1px #2646ff;
}
img.floatTL {
float: left;
margin-right: 10px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 20px;
}
#header {
border-left: 1px solid #2646ff;
border-right: 1px solid #2646ff;
background-color: #ededed;
height: 150px;
border-top:1px solid #0033ff;
border-bottom:1px solid #0033ff;
background-image: url(business template-images/people.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
.headertext h1 {
color: #0e30ff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
padding-top: 10px;
padding-bottom: 10px;
width: 190px;
text-align: center;
text-decoration: underline;
font-size: 1em;
}
.headertext p {
font-size: 1em;
width: 190px;
padding: 5px;
text-align: justify;
color: #0e30ff
}
.headertext a {
text-decoration: none;
}
#headtop {
margin-top: 5px;
border-top: 1px solid #2646ff;
height: 140px;
background-color: #fff;
background-image: url(business template-images/htbg.jpg);
background-repeat: no-repeat;
}
.logo h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
background-image: url(business template-images/logo.gif);
background-repeat: no-repeat;
margin-top: 30px;
padding-left: 30px;
padding-top: 47px;
padding-bottom: 10px;
font-weight: lighter;
color: #66ff33;
}
#menu1 {
float: right;
margin-right: 25px;
margin-top: -100px;
}
#menu1 ul li{
width:200px;
height:22px;
margin: 1px 0px 0em 0px;
border-bottom: 1px dashed #4c6aff;
list-style : none;
}
#menu1 ul li a{
width:200px;
height:22px;
display:block;
color: #4c6aff;
font: lighter 14px Arial, Helvetica, sans-serif;
text-decoration:none;
padding:0 0 0 16px;
}
#menu1 ul li a:hover{
color:#3D3C2C;
text-decoration:none;
}
#menu2 {
float: left;
margin-left: 305px;
margin-top: -100px;
}
#menu2 ul li{
width:200px;
height:22px;
margin: 1px 0px 0em 0px;
border-bottom: 1px dashed #4c6aff;
list-style : none;
}
#menu2 ul li a{
width:200px; height:22px;
display:block;
color:#4c6aff;
font: lighter 14px Arial, Helvetica, sans-serif; text-decoration:none;
padding:0 0 0 16px;
}
#menu2 ul li a:hover{
color:#3D3C2C;
text-decoration:none;
}
#leftcolumn { /* Parent Wrapper for inside boxes */
display: inline; /* IE Hack */
width: 200px;
float: left;
background-color: #fff;
min-height: 300px;
}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */
#leftcolumn img {
margin-left: 5px;
margin-top: 10px;
}
.news {
margin-left: 5px;
width : 190px;
margin-top : 15px;
padding-bottom : 15px;
}
.news p {
margin-top: 0;
padding-left:5px;
border: 1px #6172f4 solid;
background-color: #bfd5f9;
}
.news b {
color : #6d9ca2;
}
.news i {
color : #ff0000;
line-height : 25px;
}
.news a {
color : #6d9ca2;
}
.news h2 {
font-family : "arial", helvetica, sans-serif;
font-size : 1.3em;
margin-top : 5px;
margin-left : 5px;
margin-bottom : 15px;
color : #6d9ca2;
}
#rightcolumn {
margin: 0 0px 0px 0px;
display: inline; /* IE Hack */
width: 568px;
float: left;
min-height: 300px;
}
* html #rightrcolumn {height:300px} /* IE Min-Height Hack */
#rightcolumn h1 {
color: #2646ff;
font-size: 1.6em;
font-weight: lighter;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 5px;
}
.righttop p {
font-size: 1.1em;
text-align: justify;
padding-right: 17px;
padding-top: 8px;
padding-bottom: 8px;
}
#boxes {
width: 536px;
height: 240px;
border: solid 1px #2646ff;
margin-left: 20px;
margin-top:3px;
margin-bottom: 5px;}
.box1 {
float: left;
width: 250px;
border-right: solid 1px #2646ff;
margin-top: 5px;
margin-left: 5px;
}
.box1 p{
padding-left: 5px;
padding-right: 5px;
text-align: justify;
}
.box1 h3 {
color: #177aff;
font-size: 1.3em;
font-weight: lighter;
padding-top: 5px;
padding-left: 5px;
}
.box1 img.floatTL {
float: left;;
margin-left: 0px;
}
.box1 a {
float: right;
color: #ff1a3a;
margin-right: 10px;
}
.box2 {
float: right;
width: 250px;
border-left: solid 1px #2646ff;
margin-top: 5px;
padding-right: 5px;
}
.box2 p{
padding-left: 5px;
text-align: justify;
}
.box2 h3 {
color: #177aff;
font-size: 1.3em;
font-weight: lighter;
padding-top: 5px;
margin-left: 10px;
padding-bottom: 3px;
}
.box2 img{
margin-left: 22px;
}
.box2 a {
color: #ff1a3a;
margin-right: 10px;
text-decoration: none;}
#footer {
padding-top: 15px;
border-top: 1px #2646ff solid; /* IE Hack */
float: left;
width: 770px;
text-align: center;}
</style>
</head>
<body>
<div id="wrapper">
<div id="headtop">
<div class="logo">
<h1>businessdotcom</h1>
</div>
<div id="menu2">
<ul>
<li><a href="http://www.getcsstemplates.com">Web Site Design</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
<div id="menu1">
<ul>
<li><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
<li><a href="#">Link Eight</a></li>
<li><a href="#">Link Nine</a></li>
<li><a href="#">Link Ten</a></li>
</ul>
</div>
</div>
<div id="header">
<div class="headertext">
<h1>Business Web Site Design</h1>
<p>This is a free 100% CSS/XHTML valid <strong>Web Site Design</strong> from <a href="http://www.getcsstemplates.com">Get CSS Web Design Templates for Free</a>. You can link back to my site if you use this template but you don't have to.</p>
</div>
</div>
<div id="leftcolumn">
<img src="business template-images/pic1.jpg" alt="business css template" />
<div class="news">
<h2>News</h2>
<p><i>Feb. 23rd 2007</i></p>
<p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit.<br />
<a href="#">Donec rutrum neque eu nisl.</a></p>
<br />
<p><i>Feb. 22nd 2007</i></p>
<p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit.<br />
<a href="#">Donec rutrum neque eu nisl.</a></p>
<br />
<p><i>Feb. 17th 2007</i></p>
<p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit.<br />
<a href="#">Donec rutrum neque eu nisl.</a></p>
</div>
</div>
<div id="rightcolumn">
<h1>Business Web Site Template</h1>
<img src="business template-images/pic2.jpg" class="floatTL" alt="business" />
<div class="righttop">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Ut eget augue</a> in velit elementum bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. </p>
</div>
<div id="boxes">
<div class="box1">
<h3>LOREM IPSUM</h3>
<img src="business template-images/pic3.jpg" class="floatTL" alt="nice template" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl...</p>
<a href="#">more</a>
<p> </p>
<p> </p>
<p> </p>
<img src="business template-images/pic4.jpg" class="floatTL" alt="nice template" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl...</p>
<a href="#">more</a>
</div>
<div class="box2">
<h3>LOREM IPSUM</h3>
<img src="business template-images/pic5.jpg"alt="nice template" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ... <a href="#">read more</a></p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ... <a href="#">read more</a></p>
</div>
</div>
</div>
<div id="footer"><p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> <br /> Copyright © 2007 by Free CSS Templates and Layouts :: Web Design by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET FREE CSS WEB DESIGN AND TEMPLATES</a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category