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>