business web design
<!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 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;
background-color : #30204a;
}
.black {
color : #3a3598;
}
.green {
color : #e1ffaf;
}
#wrapper {
width : 780px;
margin : 0 auto;
}
#header {
border-top : 5px solid #100b19;
height : 100px;
background-color : #5c3d8e;
margin-top : 20px;
}
.logo {
background-image : url(business web design-images/logo.gif);
background-repeat : no-repeat;
margin-left : 50px;
margin-top : 7px;
height : 85px;
padding-top : 20px;
}
.logo a {
font-family : Times, "Times New Roman", serif;
font-size : 2em;
margin-left : 27px;
font-weight : lighter;
color : #e1ffaf;
}
.logo p {
padding-left : 27px;
color : #e1ffaf;
font-size : 1.2em;
font-weight : lighter;
letter-spacing : 0.2em;
}
#navbar {
background-color : #181025;
padding-left : 150px;
}
#navbar ul {
height : 30px;
list-style-type : none;
}
#navbar ul li {
width : 85px;
height : 30px;
float : left;
}
#navbar ul li a {
width : 85px;
height : 30px;
display : block;
background : #100b19;
color : #fff;
font : 12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight : bold;
text-align : center;
text-decoration : none;
}
#navbar ul li a:hover {
background : #30204a;
color : #fff;
text-decoration : none;
}
#leftcolumn {
display : inline;
width : 210px;
float : left;
min-height : 300px;
}
* html #leftcolumn {
height : 300px;
}
form {
background-color : #30204a;
margin-top : 0;
width : 188px;
border-left : 1px solid #5c3d8e;
border-right : 1px solid #5c3d8e;
border-bottom : 1px solid #5c3d8e;
margin-left : 9px;
margin-right : 5px;
margin-bottom : 15px;
}
form p {
padding-top : 10px;
padding-left : 5px;
padding-bottom : 5px;
color : #e1ffaf;
}
#leftcolumn h3 {
width : 192px;
background-image : url(business web design-images/hbg1.gif);
padding-top : 12px;
padding-bottom : 10px;
padding-left : 10px;
margin-left : 8px;
background-repeat : no-repeat;
font-family : Times, "Times New Roman", serif;
font-size : 1.8em;
font-weight : lighter;
color : #e1ffaf;
}
.news {
margin-left : 9px;
width : 188px;
border-left : 1px solid #5c3d8e;
border-right : 1px solid #5c3d8e;
border-bottom : 1px solid #5c3d8e;
padding-bottom : 5px;
min-height : 230px;
}
.news h4 {
color : #e1ffaf;
font-size : 1.1em;
padding-top : 10px;
padding-left : 5px;
}
.news p {
padding-left : 5px;
color : #e1ffaf;
}
.news a {
float : right;
padding-right : 5px;
}
.news b {
text-decoration : underline;
}
#rightcolumn {
margin : 0 0 0 0;
display : inline;
width : 567px;
float : left;
min-height : 300px;
}
* html #rightcolumn {
height : 300px;
}
#rightcolumn h1 {
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
font-size : 2.2em;
padding-top : 15px;
padding-left : 10px;
}
.righttop p {
padding-left : 5px;
padding-right : 5px;
padding-top : 22px;
color : #e1ffaf;
font-size : 1.2em;
}
.righttop a {
color : #3a3598;
text-decoration : none;
}
.mainright p {
color : #ccc;
padding-left : 5px;
padding-right : 5px;
text-align : justify;
}
#boxes {
margin-top : 20px;
width : 526px;
height : 280px;
margin-left : 20px;
}
.box1 {
width : 200px;
height : 250px;
float : left;
margin-top : 5px;
margin-left : 25px;
}
.box1 p {
width : 178px;
margin-left : 1px;
padding-right : 5px;
padding-top : 10px;
border-left : 1px solid #5c3d8e;
border-right : 1px solid #5c3d8e;
border-bottom : 1px solid #5c3d8e;
padding-bottom : 5px;
}
.box1 h3 {
background-image : url(business web design-images/hbg1.gif);
background-repeat : no-repeat;
padding-left : 10px;
padding-top : 15px;
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
color : #e1ffaf;
font-size : 1.5em;
padding-bottom : 10px;
}
.box1 h4 {
padding-left : 10px;
border-left : 1px solid #5c3d8e;
border-right : 1px solid #5c3d8e;
margin-left : 1px;
width : 178px;
padding-top : 5px;
font-family : Times, "Times New Roman", serif;
color : #3a3598;
font-weight : lighter;
}
.box2 {
width : 250px;
height : 250px;
float : right;
margin-top : 5px;
}
.box2 h2 {
font-family : Times, "Times New Roman", serif;
color : #e1ffaf;
font-weight : lighter;
margin-top : 10px;
margin-bottom : 7px;
}
.box2 h3 {
padding-top : 5px;
font-family : Times, "Times New Roman", serif;
color : #3a3598;
font-weight : lighter;
}
#widetext {
margin-top : 10px;
padding-top : 10px;
display : inline;
float : left;
width : 780px;
border-top : solid #100b19;
}
#widetext h1 {
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
margin-left : 20px;
}
#widetext p {
font-size : 1.3em;
color : #ccc;
padding-left : 10px;
padding-right : 10px;
text-align : justify;
padding-bottom : 10px;
}
#footer {
margin-top : 5px;
background-color : #5c3d8e;
display : inline;
float : left;
width : 780px;
text-align : center;
padding-top : 10px;
padding-bottom : 10px;
}
#footer p {
color : #f7f7f7;
}
#footer a {
color : #f7f7f7;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo"><a href="http://www.getcsstemplates.com">Web Site Design</a>
<p>put something here</p>
</div>
</div>
<div id="navbar">
<ul>
<li><a href="http://www.getcsstemplates.com">Web 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>
<li><a href="#">link six</a></li>
</ul>
</div>
<div id="leftcolumn">
<h3>Login</h3>
<form action="a" method="get" >
<p>
Username: <br /><input name="a" type="text" size="16" /><br />
Password: <br /><input name="a" type="password" size="16" /><br /><br />
<input name="a" type="submit" class="login" value="Login" />
</p>
</form>
<h3>News and Events</h3>
<div class="news">
<h4>Feb.28.07.</h4>
<p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit. Donec rutrum ... </p>
<a href="#">read more</a>
<h4>Feb.17.07.</h4>
<p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit. Donec rutrum ... </p>
<a href="#">read more</a>
<h4>Feb.11.07.</h4>
<p><b>Lorem ipsum dolor sit amet</b> consectetuer adipiscing elit. Donec rutrum ... </p>
<a href="#">read more</a>
</div>
</div>
<div id="rightcolumn">
<div class="righttop">
<p>This is a free 100% CSS/XHTML valid web site design from <a href="http://www.getcsstemplates.com">Get CSS Web Site Design</a>. You can link back to my site if you use this template but you don't have to.</p>
</div>
<h1><span class="green">lorem</span> <span class="black">ipsum</span></h1>
<div class="mainright">
<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.<br /> Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>
<div id="boxes">
<div class="box1">
<h3>Something Here</h3>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus... <a href="#">read more</a></p>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus... <a href="#">read more</a></p>
</div>
<div class="box2">
<h2>Lorem Ipsum Dolor</h2>
<h3>Something Here</h3>
<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.</p>
<a href="#">read more</a>
<h3>Something Here</h3>
<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.</p>
<a href="#">read more</a>
</div>
</div>
</div>
</div>
<div id="widetext">
<h1><span class="green">lorem</span> <span class="black">ipsum</span></h1>
<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.</p>
</div>
<div id="footer"> <p><a href="http://validator.w3.org/">Valid CSS</a> :: <a href="http://validator.w3.org/">Valid XHTML</a> Copyright © 2007 by Free CSS Templates and Layouts :: Designed by: <a href="http://www.getcsstemplates.com"title="free css templates and layouts">GET CSS WEB DESIGN</a> </p> </div>
</div>
</body>
</html>
Related examples in the same category