business-strategy
?<!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 Strategy</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: #000000;
background: #ffffff;
}
a:link, a:visited { color: #008fc1; text-decoration: none; }
a:active, a:hover { text-decoration: underline; }
h1 {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 18px;
font-weight: bold;
color:#008fc1;
}
h2 {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 15px;
font-weight: bold;
color:#ffffff;
}
h3 {
margin: 0px;
padding: 0px;
font-size: 14px;
font-weight: bold;
color: #37a7ce;
text-decoration: underline;
}
h4 {
margin: 0px;
padding: 10px 0px 0px 0px;
font-size: 12px;
font-weight: bold;
color: #000000;
}
p {
margin: 10px 0px;
color: #5b5847;
text-align: justify;
}
img {
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
width: 930px;
margin-top: 15px;
}
.send_btn {
margin: 0px;
padding: 0px 0px 0px 0px;
height: 19px;
width: 27px;
font-size: 14px;
font-weight: bold;
color: #0a8eb8;
text-decoration: none;
background: none;
border: none;
}
.textfield {
margin: 0px 5px 0px 0px;
padding: 0px;
float: left;
height: 19px;
width: 175px;
font: 12px Arial;
font-weight: normal;
color: #333333;
text-decoration: none;
border: 1px solid #CCCCCC;
}
.more_button a{
clear: both;
display: block;
width: 57px;
height: 19px;
margin-left: 100px;
padding: 0px 0px 0px 10px;
background: url(business-strategy-images/readmore.gif) no-repeat;
color: #FFFFFF;
text-decoration: none;
}
/* ----- Header ----- */
#header1 {
clear: both;
padding: 0px;
margin: 0px 0px 5px 0px;
width: 930px;
height: 147px;
}
#logosection {
margin: 0px 3px 0px 0px;
float: left;
width: 235px;
height: 147px;
background: url(business-strategy-images/logo_background.gif) no-repeat;
}
.sitelogo {
margin: 20px 0px 0px 20px;
padding: 0px;
height: 80px;
background:url(business-strategy-images/company_logo.gif) no-repeat;
}
.sitename {
margin: 10px 0px 0px 20px;
padding: 0px;
font: 35px Arial;
font-weight: bold;
color: #ffffff;
}
.sitename span {
font-weight: normal;
}
#header {
margin: 0px;
float: right;
width: 690px;
height: 147px;
background: url(business-strategy-images/heading_background.jpg) no-repeat;
}
#header .title{
padding: 50px 0px 0px 180px;
font-size: 20px;
font-weight:bold;
color: #333333;
line-height: 25px;
}
#header .bigtext{
font-size: 30px;
font-weight:bold;
color: #ffffff;
}
/* ----- End of Header ----- */
/* ------------- Menu ------------------ */
#menu1 {
clear: both;
margin-bottom: 5px;
padding: 0px;
width: 930px;
height: 35px;
background: #ffffff;
}
#search {
float: left;
width: 225px;
height: 28px;
padding: 7px 0px 0px 10px;
background: url(business-strategy-images/menu1_background.gif) repeat-x;
}
#menu {
float: right;
width: 690px;
height: 35px;
margin: 0px;
background: url(business-strategy-images/menu1_background.gif) repeat-x;
}
#menu ul {
margin: 0px;
text-align: right;
list-style: none;
}
#menu ul li {
margin: 0px;
display: inline;
}
#menu1 ul li a {
margin: 0px;
display:inline-block;
height: 30px;
padding: 5px 20px 0px 20px;
font: 14px arial;
color:#000000;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li .current {
color: #FFF;
background: url(business-strategy-images/menu1hover_background.gif) repeat-x;
}
/* ---------- End of Menu ------------- */
/* ----------------- Content ----------------------- */
#content {
float: left;
margin: 0px;
padding: 0px;
width: 930px;
}
#left_column {
float: left;
margin: 0px 10px 5px 0px;
padding: 20px 10px;
width: 215px;
background: #e0e0e0;
min-height: 400px;
}
#middle_column {
float: left;
margin: 0px 0px 5px 0px;
padding: 20px 5px;
width: 465px;
min-height: 400px;
}
#right_column {
float: right;
margin: 0px 0px 5px 10px;
padding: 20px 0px 0px 0px;
width: 200px;
background: #e0e0e0;
min-height: 400px;
}
/* left column */
#leftcolumn_box01 {
width: 215px;
padding: 0px;
background: #008fc1;
margin: 0px 0px 10px 0px;
}
#imagebutton {
width: 215px;
margin: 0px 0px 10px 0px;
}
#imagebutton a, img{
border: none;
}
#leftcolumn_box01 .leftcolumn_box01_top{
width: 195px;
height: 15px;
padding: 10px;
background: url(business-strategy-images/leftsection_top.gif) no-repeat;
}
#leftcolumn_box01 .leftcolumn_box01_bottom{
width: 195px;
padding: 10px;
color: #FFFFFF;
}
#leftcolumn_box02 {
width: 190px;
padding: 10px 10px 10px 15px;
background: #6ebfdc;
border-top: 5px solid #008fc1;
margin: 0px 0px 10px 0px;
}
#leftcolumn_box02 ul {
margin: 0px;
padding: 10px 0px 0px 5px;
list-style: none;
}
#leftcolumn_box02 ul li{
display: block;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#leftcolumn_box02 ul li a{
padding: 0px 0px 0px 15px;
margin: 0px;
color: #ffffff;
text-decoration: none;
background: url(business-strategy-images/list_icon02.gif) center left no-repeat;
}
#leftcolumn_box02 ul li a:hover{
text-decoration: none;
}
/* end of left column */
/* middle column */
#section1 {
float: left;
width: 205px;
margin-right: 10px;
padding: 10px;
background: #dceff6;
}
#section1 p{
margin: 0px;
padding: 0px 0px 10px 0px;
}
#section2 {
float: right;
width: 205px;
padding: 0px;
background: #bcbcbc;
}
#section2 .section2_top{
height: 24px;
padding: 10px 0px 0px 10px;
background: url(business-strategy-images/section2_title.gif) no-repeat;
}
#section2 .section2_bottom{
float: left;
padding: 10px;
}
#section2 ul {
margin: 0px;
padding: 10px 0px 0px 0px;
list-style: none;
}
#section2 ul li{
display: block;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#section2 ul li a{
padding: 0px 0px 0px 15px;
margin: 0px;
color: #000000;
text-decoration: none;
background: url(business-strategy-images/list_icon01.gif) center left no-repeat;
}
#section2 ul li a:hover{
color: #ffffff;
background: url(business-strategy-images/list_icon02.gif) center left no-repeat;
}
/* end of middle */
/* right column */
#right_box01 {
width: 185px;
height: 38px;
padding: 10px 5px;
color:#FFFFFF;
font-size: 15px;
background: url(business-strategy-images/rightsection_background.gif) no-repeat;
margin: 0px 0px 10px 5px;
}
.rightbig_button a{
clear: both;
display: block;
width: 165px;
height: 48px;
margin: 0px 0px 10px 5px;
padding: 10px 20px 0px 10px;
background: url(business-strategy-images/rightsection_background.gif) no-repeat;
color:#FFFFFF;
font-size: 18px;
text-decoration: none;
}
#right_box02 {
clear: both;
width: 190px;
padding: 0px;
margin: 0px 0px 10px 5px;
}
#right_box02 .rightbox02_top{
width: 190px;
height: 25px;
padding: 10px 0px 0px 0px;
background: #008fc1 url(business-strategy-images/rightsection_top.gif) no-repeat;
}
#right_box02 .rightbox02_bottom{
width: 170px;
padding: 15px 10px 10px 10px;
background: #cce8f2;
}
#right_box02 .customer_section{
clear: both;
margin: 0px 0px 20px 0px;
padding: 0px;
}
#right_box02 p{
padding: 0px;
margin: 0px;
}
/* end of right column */
/* ----- Form ----- */
.form_row{
padding: 3px 0px;
}
form{
margin: 0px 10px 0px 0px;
padding: 0px;
text-align: right;
}
label {
margin-right: 10px;
}
input{
width: 110px;
height: 18px;
}
.button{
width: 60px;
height: 25px;
}
/* ----- End of Form ----- */
/* ----- Footer ----- */
#footer {
clear: both;
padding: 10px 0px 0px 0px;
width: 930px;
height: 50px;
text-align: center;
color: #666;
background: #d5d5d5;
text-align: center;
}
#footer_bottom {
width: 930px;
height: 10px;
margin: 0px;
padding: 0px;
background: #d5d5d5 url(business-strategy-images/footer_bottom.gif) no-repeat;
}
/* IE6 hack */
* html #footer_bottom {
width: 930px;
height: 10px;
margin-bottom: -10px;
padding: 0px;
background: #d5d5d5 url(business-strategy-images/footer_bottom.gif) no-repeat;
}
#footer a{
color: #666;
}
#footer a:hover{
color: #ffffff;
}
/* ----- End of Footer ----- */
</style>
</head>
<body>
<div id="container">
<div id="header1">
<div id="logosection">
<div class="sitelogo"></div>
<div class="sitename"> Business<span></span> </div>
</div>
<div id="header">
<div class="title"> The<br />
<span class="bigtext">Business Strategy</span><br />
free css template.</div>
</div>
</div>
<div id="menu1">
<div id="search">
<input class="textfield" type="text" value="Search..."/>
<input class="send_btn" type="submit" value="Go" />
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Solutions</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="left_column">
<div id="leftcolumn_box01">
<div class="leftcolumn_box01_top">
<h2>Customer Login</h2>
</div>
<div class="leftcolumn_box01_bottom">
<form method="get" action="http://www.free-css.com/">
<div class="form_row">
<label>Email</label>
<input class="inputfield" name="email_address" type="text" id="email_addremss"/>
</div>
<div class="form_row">
<label>Password</label>
<input class="inputfield" name="password" type="password" id="password"/>
</div>
<input class="button" type="submit" name="Submit" value="Login" />
</form>
</div>
</div>
<div id="leftcolumn_box02">
<h2>Lorem ipsum dolor</h2>
<ul>
<li><a href="http://www.free-css.com/">Mauris blandit vehicula</a></li>
<li><a href="http://www.free-css.com/">Cool Website Two</a></li>
<li><a href="http://www.free-css.com/">Aliquam tristique lacus</a></li>
<li><a href="http://www.free-css.com/">Flash Templates</a></li>
<li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
</ul>
</div>
<div id="imagebutton"> <a href="http://www.free-css.com/"><img src="business-strategy-images/livechat.gif" alt="" /></a> </div>
</div>
<div id="middle_column">
<h1>Welcome to our website</h1>
<p> This free CSS layout is provided by templatemo.com. Feel free to edit and apply this template layout for your personal or commercial websites. Credit goes to <a href="http://www.free-css.com/">Marilyn</a> for photoshop brush applied in header graphics.</p>
<p> Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. <a href="http://www.free-css.com/">Read more...</a> </p>
<br />
<div id="section1">
<h3>Duis vitae velit sed dui</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p> Duis pulvinar scelerisque ante. Morbi tristique, risus quis congue pulvinar, nisl nisi commodo diam, a porta nisi ligula ac massa. Vestibulum blandit lacus sed sapien. <a href="http://www.free-css.com/">Read more...</a> </p>
<h4>Quisque rhoncus nulla quis sem</h4>
<p> Fusce sollicitudin nisl a lectus. Pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="http://www.free-css.com/">Read more...</a> </p>
</div>
<div id="section2">
<div class="section2_top">
<h2>Lorem ipsum dolor</h2>
</div>
<div class="section2_bottom">
<ul>
<li><a href="http://www.free-css.com/">Vestibulum blandit lacus</a></li>
<li><a href="http://www.free-css.com/">Mauris blandit vehicula</a></li>
<li><a href="http://www.free-css.com/">Proin consectetuer</a></li>
<li><a href="http://www.free-css.com/">Flash Resources</a></li>
<li><a href="http://www.free-css.com/">Website Templates</a></li>
<li><a href="http://www.free-css.com/">Cras urna metus</a></li>
<li><a href="http://www.free-css.com/">Nunc quis seme</a></li>
</ul>
<div class="more_button"><a href="http://www.free-css.com/">More...</a></div>
</div>
</div>
</div>
<div id="right_column">
<div class="rightbig_button"><a href="http://www.free-css.com/">Customer Care Center</a></div>
<div class="rightbig_button"><a href="http://www.free-css.com/">Training & Education</a></div>
<div id="right_box02">
<div class="rightbox02_top">
<h2 align="center">Our Customers Say</h2>
</div>
<div class="rightbox02_bottom">
<div class="customer_section"> <img src="business-strategy-images/templatemo.gif" alt="" />
<p> Pellentesque mattis, faucibus vitae, feugiat vitae.</p>
<div class="more_button"><a href="http://www.free-css.com/">More...</a></div>
</div>
<div class="customer_section"> <img src="business-strategy-images/flashmo.gif" alt="" />
<p>Nam sit amet justo vel libero tincidunt dignissim.</p>
<div class="more_button"><a href="http://www.free-css.com/">More...</a></div>
</div>
</div>
</div>
<a target="_blank" href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/business-strategy-images/vcss-blue" alt="" vspace="8" border="0" /></a><br />
</div>
</div>
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About Us</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/">Contact Us</a><br />
Copyright <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">templatemo.com</a></div>
<div id="footer_bottom"></div>
</div>
</body>
</html>
Related examples in the same category