future-business
<!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>
<title>Business Websites</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
background: #FFFFFF;
}
a:link, a:visited { color: #000; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #F00; text-decoration: underline}
h1 {
margin: 0px;
padding: 3px 0px 15px 0px;
font-size: 24px;
font-weight: bold;
color: #333333;
}
h2 {
margin: 0px;
padding: 0px 0px 5px 0px;
font-size: 16px;
font-weight: bold;
color: #3e78b2;
}
h4 {
margin: 0px;
padding: 0px;
font-size: 12px;
font-weight: bold;
color: #06A;
}
p{
margin: 0px;
padding: 0 0 10px 0;
text-align: justify;
}
.spacetobottom {
clear: both;
height: 50px;
}
.spacetoright {
float: left;
width: 10px;
height: 1px;;
}
/* ----- Form ----- */
form{
margin: 35px 0 0 0;
padding: 0px;
text-align: right;
}
label {
margin: 0 10px;
}
input{
width: 150px;
height: 15px;
color: #aabdd0;
border: 1px solid #686f76;
}
.button{
margin: 0px;
width: 50px;
height: 20px;
border: 0px;
color: #333333;
font-weight: bold;
background: #FFFFFF;
cursor: pointer;
}
/* End of Form */
.more_button a {
clear: both;
display: block;
width: 100px;
height: 18px;
margin: 0px;
padding: 2px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFF;
background: #79b5f3;
border: 1px solid #FFF;
}
#container {
margin: auto;
width: 950px;
padding: 0px 10px;
background: url(future-business-images/mainBG.gif) repeat-y;
}
#topbar {
float: left;
height: 36px;
width: 850px;
padding: 0 50px;
margin-bottom: 10px;
}
#languagebox {
float: right;
padding-bottom: 5px;
padding-right: 5px;
background: #848688;
border-left: 1px #bcbcbc solid;
border-right: 1px #bcbcbc solid;
border-bottom: 1px #bcbcbc solid;
}
#languagebox img{
float: left;
border: 1px solid #FFFFFF;
margin-left: 5px;
margin-top: -1px;
}
#header {
float: left;
height: 60px;
width: 850px;
padding: 0 50px;
margin-bottom: 10px;
}
#logo {
float: left;
height: 55px;
width: 300px;
}
#logo img {
float: left;
border: none;
padding-right: 10px;
}
#sitetitle {
padding: 28px 0 0 40px;
font-size: 4.0em;
font-weight: bold;
color: #333333;
}
#login {
float: right;
height: 55px;
width: 530px;
}
/*------------- Menu ------------------*/
#menu {
float: left;
width: 950px;
height: 40px;
margin: 0;
padding: 0;
background: url(future-business-images/menuBG.gif) repeat-x;
}
#menu ul {
margin: 0 0 0 50px;
padding: 0px;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
width: 140px;
height: 20px;
margin-top: 10px;
padding: 0;
font-size: 1.1em;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #CCCCCC;
border-left: 1px solid #CCCCCC;
}
#menu ul li .lastmenu{
border-right: 1px solid #CCCCCC;
}
#menu li a:hover, #menu li .current{
color: #FFFFFF;
background: url(future-business-images/menuhoverBG.gif) no-repeat;
}
/* ----------------- end of menu----------------*/
#banner {
clear: both;
float: left;
width: 750px;
height: 180px;
padding: 30px 150px 0 50px;
margin-bottom: -25px;
background: url(future-business-images/bannerBG.gif) no-repeat;
}
#banner h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
#services {
clear: both;
float: left;
width: 900px;
height: 272px;
padding-left: 50px;
margin-bottom: 25px;
}
.service_box {
float: left;
width: 220px;
height: 252px;
padding: 10px 15px 10px 15px;
margin-right: 50px;
background: url(future-business-images/boxBG.png) no-repeat;
}
.service_box p{
padding-bottom: 5px;
}
.service_box img{
padding-bottom: 5px;
}
.fullgraybox {
clear: both;
float: left;
width: 798px;
padding: 25px;
margin: 50px 50px 25px 50px;
border: 1px solid #CCCCCC
}
* html .fullgraybox {
clear: both;
float: left;
width: 798px;
padding: 25px;
margin: 50px 50px 25px 25px;
border: 1px solid #CCCCCC
}
.fullgraybox img{
float: left;
margin: 3px 20px 0 0px;
border: 1px solid #999999;
}
.fullgraybox ul {
margin: 10px 0 0 0px;
padding: 0 0 0 30px;
}
.fullgraybox li {
list-style: inside;
padding: 0 0 10px 0;
background: url(future-business-images/listicon.gif) center left no-repeat;
}
/* news section */
#newssection {
clear: both;
float: left;
width: 900px;
margin: 0 0 25px 50px;
}
* html #newssection {
clear: both;
float: left;
width: 900px;
margin: 0 0 25px 25px;
}
.newsbox {
float: left;
width: 250px;
margin-right: 50px;
}
/* end of news section */
/* Light Blue Row */
#light_blue_row {
clear: both;
float: left;
width: 900px;
padding: 25px 0 25px 50px;
background: #8dc3fa;
border-top: 5px solid #98cafc;
}
.gallery {
float: left;
width: 400px;
margin-right: 50px;
}
.partners {
float: left;
width: 400px;
}
.gp_row {
width: 400px;
margin-bottom: 10px;
}
.gp_row img{
float: left;
margin: 3px 10px 0 0;
border: 1px solid #333333;
}
.gp_row p{
color: #000000;
}
/* end of Light Blue Row */
/* ----- Footer ----- */
#footer {
clear: both;
padding: 15px 0px 0px 0px;
width: 950px;
height: 50px;
text-align: center;
background: #999999;
border-top: 5px solid #666666;
}
#footer a{
font-weight: normal;
}
/* ----- End of Footer ----- */
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div id="languagebox"> <a href="http://www.free-css.com/"><img src="future-business-images/engflag.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="future-business-images/frenchflag.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="future-business-images/germanyflag.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="future-business-images/japanflag.gif" alt="" /></a> </div>
</div>
<div id="header">
<div id="logo"> <img src="future-business-images/logo.gif" alt="Logo" />
<div id="sitetitle">Business</div>
</div>
<div id="login">
<form method="post" action="http://www.free-css.com/">
<label>Email:</label>
<input class="inputfield" name="email_address" type="text" id="email_address"/>
<label>Password:</label>
<input class="inputfield" name="password" type="password" id="password"/>
<input class="button" type="submit" name="Submit" value="Login" />
</form>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="subpage.html">Services</a></li>
<li><a href="http://www.free-css.com/">Solutions</a></li>
<li><a href="http://www.free-css.com/">Partners</a></li>
<li><a href="http://www.free-css.com/">News</a></li>
<li><a href="http://www.free-css.com/" class="lastmenu">Contact Us</a></li>
</ul>
</div>
<div id="banner">
<h1> Your Future Business</h1>
<p>This is a free CSS website template provided by TemplateMo.com. Icons are provided by <strong>SmashingMagazine.com</strong>. Feel free to modify and use this layout for your websites. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. </p>
<div class="more_button"><a href="http://www.free-css.com/">Read more</a></div>
</div>
<div id="services">
<div class="service_box">
<center>
<img src="future-business-images/world128.png" alt="" />
<h2>Strategic Planing</h2>
<p> Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. </p>
<div class="more_button"><a href="http://www.free-css.com/">Read more</a></div>
</center>
</div>
<div class="service_box">
<center>
<img src="future-business-images/people.png" alt="" />
<h2>Marketing</h2>
<p>Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. </p>
<div class="more_button"><a href="http://www.free-css.com/">Read more</a></div>
</center>
</div>
<div class="service_box">
<center>
<img src="future-business-images/vault128.png" alt="" />
<h2>Banking</h2>
<p>Praesent vel diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec...</p>
<div class="more_button"><a href="http://www.free-css.com/">Read more</a></div>
</center>
</div>
</div>
<div id="newssection">
<h1>Latest News</h1>
<div class="newsbox">
<h4>Aliquam tristique lacus in sapien</h4>
<p>Praesent vel diam. Cras sed leo tempor neque placerat pretium. Donec mollis aliquet ligula. Pellentesque vitae magna. <a href="http://www.free-css.com/">more...</a> </p>
</div>
<div class="newsbox">
<h4>Donec mollis aliquet ligula</h4>
<p>Vivamus a massa. Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. <a href="http://www.free-css.com/">more...</a></p>
</div>
<div class="newsbox">
<h4>Lorem ipsum dolor sit amet</h4>
<p> Donec mollis aliquet ligula. Curabitur nec odio. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. <a href="http://www.free-css.com/">more...</a></p>
</div>
<div class="more_button"><a href="http://www.free-css.com/">Read All News</a></div>
</div>
<div id="light_blue_row">
<div class="gallery">
<h1>Featured Projects</h1>
<div class="gp_row"> <img src="future-business-images/building_150x70_03.gif" alt="" />
<p>In hac habitasse platea dictumst. Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh. <a href="http://www.free-css.com/">more...</a> </p>
</div>
<div class="gp_row"> <img src="future-business-images/building_150x70_02.gif" alt="" />
<p>Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate. Aenean eget tortor eget ipsum aliquet porta. V <a href="http://www.free-css.com/">more...</a> </p>
</div>
<div class="gp_row"> <img src="future-business-images/building_150x70_01.gif" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. <a href="http://www.free-css.com/">more...</a> </p>
</div>
<div class="more_button"><a href="http://www.free-css.com/">View All</a></div>
</div>
<div class="partners">
<h1>New Partners</h1>
<div class="gp_row"> <img src="future-business-images/templatemo.gif" alt="" />
<p>Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. <a href="templatemo.com">more...</a> </p>
</div>
<div class="gp_row"> <img src="future-business-images/flashmo.gif" alt="" />
<p>Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. <a href="flashmo.com">more...</a> </p>
</div>
<div class="gp_row"> <img src="future-business-images/webdesignmo.gif" alt="" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. <a href="webdesignmo.net"> more...</a> </p>
</div>
<div class="more_button"><a href="http://www.free-css.com/">View All</a></div>
</div>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Services</a> | <a href="http://www.free-css.com/">Solutions</a> | <a href="http://www.free-css.com/">Partners</a> | <a href="http://www.free-css.com/">News</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
Copyright 2008 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">templatemo.com</a> </div>
</div>
</body>
</html>
Related examples in the same category