business web template 38
<!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>TWO COLUMN BUSINESS WEB TEMPLATE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
style.css
*/
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
img {
padding : 3px;
border : 1px solid #b1c6d9;
}
img.floatTL {
float : left;
margin-right : 7px;
margin-bottom : 2px;
margin-top : 5px;
margin-left : 5px;
}
#wrapper {
margin: 20px auto 0em auto;
width: 900px;
}
#header {
color: #333;
width:898px;
float: left;
border-bottom: 5px #abc8ce solid;
height: 120px;
background: #e0e0e0 url(business web template 38-images/headbg.gif) no-repeat right;
}
#header h1 {
font-family: Times, "Times New Roman", serif;
font-size: 4em;
font-weight: lighter;
color: #7070bb;
letter-spacing: -3px;
margin-top: .3em;
margin-left: 1em;
padding-left:1.5em;
word-spacing: -4px;
padding-top: 25px;
padding-bottom: 7px;
background-image: url(business web template 38-images/logopic.gif);
background-repeat: no-repeat;
background-position: -7px;
}
#header h2 {
float: right;
margin-right: 230px;
margin-top: -50px;
font-family: Times, "Times New Roman", serif;
font-size: 1.5em;
font-weight: lighter;
color: #9999ff;
}
#header a {
color: #3e87e7;
text-decoration: none;
}
#leftcolumn {
color: #333;
border-right: 1px solid #ccc;
height: 430px;
width: 205px;
float: left;
}
#leftcolumn h3 {
color: #6273b5;
font-size: 1.2em;
margin-top: 5px;
padding-top:2px;
padding-left: 3px;
padding-bottom: 3px;
margin-left: 5px;
margin-right: 5px;
background-image: url(business web template 38-images/hbg.jpg);
background-repeat: repeat-x;
}
#leftcolumn h4 {
color: #6273b5;
font-size: 1.2em;
margin-top: 15px;
padding-top:2px;
padding-left: 3px;
padding-bottom: 3px;
margin-left: 5px;
margin-right: 5px;
background-image: url(business web template 38-images/hbg.jpg);
background-repeat: repeat-x;
}
.menuleft ul {
list-style-type : none;
margin: 15px 5px 0px 5px;
}
.menuleft ul li {
width : 185px;
height : 15px;
border-bottom : 1px solid #787aa8;
}
.menuleft ul li a {
display : block;
height : 12px;
color : #888f3d;
padding : 0 0 0 10px;
color: #787aa8;
text-decoration: none;
font: normal 14px Arial, Helvetica, sans-serif;}
.menuleft ul li a:hover {
text-decoration : none;
color : #7e9dc8;
}
#leftcolumn img {
margin-top: 10px;
margin-left: 5px;
}
#leftcolumn p{
text-align: justify;
padding: 5px;
}
#rightcolumn {
float: right;
color: #333;
background: #FFF;
height: 430px;
width: 688px;
display: inline;
}
#box {
margin-top : 0px;
margin-bottom : 10px;
}
.content_right {
margin : 0 auto;
display : inline;
float : right;
width : 269px;
text-align : justify;
padding-left : 5px;
padding-bottom : 5px;
padding-right: 2px;
padding-top : 2px;
line-height : 1.5em;
}
.content_left {
margin : 0 auto;
display : inline;
float : left;
width : 400px;
height:200px;
text-align : justify;
line-height : 1.5em;
background-image: url(business web template 38-images/img1.jpg);
margin: 5px 0px 0em 5px;
background-repeat: no-repeat;
}
.content_left h1 {
font-family: Times, "Times New Roman", serif;
font-size: 3.5em;
color: #dcc00c;
margin-top:140px;
padding: 14px;
font-weight: lighter;
margin-left: 45px;
word-spacing: -5px;
letter-spacing: -1px;
}
.content_right h3 {
color: #6273b5;
font-size: 1.2em;
margin-top: 5px;
padding-top:2px;
padding-left: 3px;
padding-bottom: 3px;
background-image: url(business web template 38-images/hbg.jpg);
background-repeat: repeat-x;
}
.content_right h4 {
color: #4a5a8a;
font-size: 1em;
margin-top:9px;
}
.content_right a {
color: #43527d;
font-size: 1em;
float: right;
}
.righttext {
margin-top: 216px;
text-align: justify;
font-size: 1.2em;
}
.righttext h5 {
color: #6273b5;
font-size: 1.2em;
padding-top:3px;
padding-left: 3px;
padding-bottom: 3px;
background-image: url(business web template 38-images/hbg.jpg);
background-repeat: repeat-x;
}
#footer {
margin-top : 3px;
background-color :#e0e0e0;
display : inline;
float : left;
width : 100%;
border-top : 1px solid #bcd2e6;
font-size : 0.8em;
text-align : center;
}
#footer p {
font-size: 1em;
padding-bottom: 5px;}
#footer a {
color : #8badcf;
}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<a href="http://www.getcsstemplates.com"><h1>Free Web Templates</h1></a>
<h2>some nice slogan comes here</h2><br />
<h2>one more line of h2 text here</h2>
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<h3>Lorem Ipsum</h3>
<div class="menuleft">
<ul>
<li><a href="http://www.grtcsstemplates.com">Free Web Templates</a></li>
<li><a href="#">dolor sit</a></li>
<li><a href="#">amet consectetuer</a></li>
<li><a href="#">adipiscing elit</a></li>
<li><a href="#">donec rutrum</a></li>
<li><a href="#">neque eu nisl</a></li>
<li><a href="#">dolor sit</a></li>
<li><a href="#">amet consectetuer</a></li>
<li><a href="#">adipiscing elit</a></li>
<li class="last"><a href="#">morbi eget</a></li>
</ul>
</div>
<h4>Lorem Ipsum</h4>
<img src="business web template 38-images/img3.jpg" alt="#" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</p>
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<div id="box">
<div class="content_left">
<h1>Lorem Ipsum Dolor</h1>
</div>
<div class="content_right">
<h3>News & Events</h3>
<h4>May 1st 2007</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
<a href="#">read more</a>
<h4>Apr 25th 2007</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
<a href="#">read more</a>
</div>
</div>
<div class="righttext">
<h5>Lorem Ipsum Dolor Sit</h5>
<img src="business web template 38-images/img2.jpg" class="floatTL" alt="#" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat.</p>
</div>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<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 :: Designed by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET FREE CSS WEBSITE TEMLATES</a> </p>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
Related examples in the same category