keero
<!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>Keero | About</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
@charset "utf-8";
body { margin:0; padding:0; width:100%; background-color:#0074c0;}
html { padding:0; margin:0; background-color:#0074c0;}
/* main */
.main {width:100%; padding:0; margin:0 auto; background: #ebebeb; }
/********** header **********/
.header { background:#0067b0; padding:0; margin:0 auto; }
.block_header {margin:0 auto; width:986px; padding:0;}
/* logo */
.logo { float:left; padding:0; margin:0; width:277px;}
/* search */
.search { padding:53px 25px 0 0; margin:0; float:right; width:340px;}
.search form { display:block; float:right; padding:0;}
.search span { display:block; float:left; background: url(keero-images/search_bg.gif) left top no-repeat; width:149px; padding:0 5px; height:33px;}
.search form .keywords { line-height:14px; float:left; border:0; width:149px; padding:9px 0; height:14px; background:none; margin:0; font:normal 14px Arial, Helvetica, sans-serif; color:#9c9c9c;}
.search form .button { float:left; margin:0; padding:0;}
/* menu */
.menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
.menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
.menu ul li a { float:left; margin:0; padding:10px 0; color:#62c0ff; font:normal 12px arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:10px 8px; background:none;}
.menu ul li a:hover { background:url(keero-images/r_menu.gif) right no-repeat;}
.menu ul li a:hover span { background:url(keero-images/l_menu.gif) left no-repeat;}
.menu ul li a.active { background:url(keero-images/r_menu.gif) right no-repeat;color:#000000}
.menu ul li a.active span { background:url(keero-images/l_menu.gif) left no-repeat;}
/********** slider **********/
.slider_top {margin:0 auto; padding:0; background:#0067b0; border:0;}
/*header_text*/
.header_text { margin:0 auto; padding:29px 0 0 0; height:263px; width:984px; background: url(keero-images/header_text_bg.gif) top repeat-x;}
.header_text .div { width:860px; padding:0; margin:0 auto;}
.header_text img.screen { float:left; margin:0; padding:0;}
.header_text .div .left1 { float:right; width:415px; padding:10px 0 0 0; margin:0;}
.header_text .div .left1 img { float:left; margin:0; padding:0;}
.header_text .div .left1 h2 { font:normal 24px verdana, Helvetica, sans-serif; color:#072e75; padding:10px 0 10px 0; margin:0;}
.header_text .div .left1 p.uli { background: url(keero-images/simple_ul_li.gif) left no-repeat; padding:2px 20px; margin:0; font: normal 12px verdana, Helvetica, sans-serif; color:#0072bd;}
.header_text p { font: normal 12px verdana, Helvetica, sans-serif; color:#0072bd; padding:5px 50px 20px 0; margin:0;}
/********** slider **********/
.header_text2 { margin:0 auto; padding:29px 0 0 0; height:72px; width:984px; background: url(keero-images/header_text2_bg.gif) top repeat-x;}
.header_text2 h2 { padding:0 0 0 25px; margin:0; font: normal 36px Arial, Helvetica, sans-serif; color:#0074c0;}
.header_text2 img { float:right; margin:0; padding:10px 20px 0 0;}
/* top_bg */
.top_bg { background:url(keero-images/top_bg.gif) top repeat-x; margin:0; padding:0;}
.top_bg2 { background:url(keero-images/top_bg2.gif) top repeat-x; margin:0; padding:0; height:23px}
.top_bg_resize { width:986px; margin:0 auto; padding:0;}
.top_bg_resize img { float:left; margin:0; padding:0;}
/*FBG*/
.FBG { margin:0 auto; padding:0 0 20px 0;}
.FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 0; margin:0;}
.FBG p strong { color:#2a2a2a;}
.FBG img { float: left; margin:10px 10px; padding:0;}
.FBG_resize { width:984px; margin:0 auto; padding:0; border:1px solid #d4d4d4; background:#f0f0f0;}
/****Recent **/
.Recent { width:220px; float:left; padding:10px; margin:10px 0; border-right:1px solid #ddd;}
.Recent2 { width:220px; float:left; padding:10px; margin:10px 0;}
/********** block index **********/
.body { margin:0; padding:0 0 20px 0;}
.body_resize { width:954px; margin:0 auto; padding:0 15px; border:1px solid #d4d4d4; background:#fff;}
.body_resize h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#282828; padding:5px 5px; margin:0; border-bottom:1px solid #dfdfdf;}
.body_resize h3 { font:normal 20px Arial, Helvetica, sans-serif; color:#282828; padding:5px 5px; margin:0;}
.body_resize h4 { font:normal 36px Arial, Helvetica, sans-serif; color:#282828; padding:5px 5px; margin:0; border-bottom:1px solid #dfdfdf;}
.body_resize h2 span { font:normal 11px Arial, Helvetica, sans-serif; color:#819e9c; padding:5px 0; margin:0;}
.body_resize p { font:normal 12px Arial, Helvetica, sans-serif; color:#747474; padding:10px 5px; margin:0; line-height:1.8em;}
.body_resize p span { color:#819e9c;}
.body_resize a { color:#ea3900; text-decoration: underline;}
.left ul { list-style:none; margin:0 0 0 210px; padding:10px 0 20px 0;}
.left li { background:url(keero-images/port_ul_li.gif) left no-repeat; padding:2px 20px; margin:0; font: normal 12px Arial, Helvetica, sans-serif; color:#5c8783; line-height:1.8em;}
.body_resize img { float:left; margin:20px 10px; padding:0;}
.body_resize img.floated { float:left; margin:10px 5px; padding:0;}
.right { width:325px; float:right; margin:0; padding:10px 10px;}
.left { width:565px; float:left; margin:0; padding:10px 10px;}
.blog { width:280px; float:left; margin:0; padding:10px;}
/********** portfolio form **********/
.line {clear:both;height:1px;background:#dfdfdf;overflow:hidden;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#F00;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:10px 0; color:#1c1c1c; font: bold 13px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left;}
#contactform label span { color:#F00;}
#contactform input.text { width:380px; border:1px solid #d4d4d4; margin:10px 0; padding:5px 2px; height:16px; background:#f2f2f2; float:left;}
#contactform textarea { width:380px; border:1px solid #d4d4d4; margin:10px 0; padding:2px; background:#f2f2f2; float:left;}
#contactform li.buttons input { padding:3px 0 3px 380px; margin:0; border:0; color:#FFF; float:left;}
p.response { text-align:center; color:#F00; font: normal 11px Georgia, "Times New Roman", Times, serif; line-height:1.8em; width:auto;}
/*************footer**********/
.footer_resize { width:960px; margin:0 auto; padding:10px 0 0 0; }
.footer {padding:0; margin:0; height:55px; background:#d7d7d7 url(keero-images/footer_bg.gif) repeat-x; font:normal 12px Arial, Helvetica, sans-serif; color:#fff;}
.footer a {color:#fff; text-decoration:none; padding:0; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;}
.footer p.rightt { text-align:right; width:30%; margin:0; padding:10px 20px 0 0; float:right;}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:1px solid #dfdfdf; padding:0; margin:10px 0; background:none; line-height:0;}
</style>
</head>
<body>
<!-- START PAGE SOURCE -->
<div class="main">
<div class="header">
<div class="block_header">
<div class="logo"><a href="#"><img src="keero-images/logo.gif" width="277" height="143" border="0" alt="" /></a></div>
<div class="search">
<form id="form1" name="form1" method="post" action="#">
<label><span>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
</span>
<input name="b" type="image" src="keero-images/search.gif" class="button" />
</label>
</form>
</div>
<div class="menu">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html" class="active"><span> About Us</span></a></li>
<li><a href="services.html"><span>Services</span></a></li>
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
<div class="slider_top">
<div class="header_text2"> <a href="#"><img src="keero-images/Sing_up.gif" alt="" border="0" /></a>
<h2>About us </h2>
<div class="clr"></div>
</div>
</div>
<div class="top_bg2">
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="body">
<div class="body_resize">
<div class="left">
<h2>About company<br />
<span>Lorem Ipsum as their default model text...</span></h2>
<p><strong>Sed quis libero massa, vel sagittis augue. </strong><br />
Phasellus iaculis varius est at laoreet. Praesent laoreet ornare odio id porta. Aenean quis leo justo, sit amet varius purus. Ras vitae enim nulla. Aenean tristique eros in mauris porta id suscipit libero scelerisque.</p>
<p>Sollicitudin vel sollicitudin qui facilisis non massaNam id jus nisl ullamcorper laoreet nec ut diam. <br />
Nam eget nisi dui, vita hendrerit risus. Nunc non mas neque, at rhoncus nulla.Vivamus in metus nisi, ut gravida dolor. Pellentesque fermentum aliquam interdum. Mauris ligula dui, gravida nec tempus mollis, tempor at odio. Ut porttitor, orci sagittis pretium varius, felis sapien pharetra eros, quis fermentum dui ligula eget justo.</p>
<img src="keero-images/about_1.jpg" alt="" />
<p><strong>Suspendisse adipiscing rhoncus massa, sit amet sollicitudin quam vulputate non. In non turpis nisl. </strong></p>
<ul>
<li>Sed congue, dui vel tristique mollis.</li>
<li>Morbi eget sem. Nam mollis. </li>
<li>Donec sed velit ut tellus fermentum.</li>
<li>Etiam a odio in neque egestas consequat. </li>
</ul>
<div class="clr"></div>
<h2>Who we are<br />
<span> We bring value innovation and growth to your business</span></h2>
<p>Nullam aliquam porttitor risus vel porta. Quisque porttitor posuere diam. Aenean vel dapibus leo. Quisque non neque dolor, vel imperdiet massa. Quisque a enim ac nisl tincidunt pharetra id ut nulla.<br />
In vitae metus at neque elementum condimentum. Quisque fringilla porta metus, in posuere tellus ullamcorper in. Sed at metus velit. Aliquam consequat venenatis tortor, vel elementum mi laoreet tristique.</p>
<h3>Our Mission</h3>
<p>Sed tincidunt turpis posuere neque dictum quis faucibus felis tempus. Ut faucibus sem a nisi feugiat volutpat. Vivamus quis vulputate mauris. In suscipit sollicitudin mattis. Integer non nisl eu metus dapibus dapibus. Maecenas dui urna, luctus ac posuere at, semper vel lectus.</p>
</div>
<div class="right">
<h2>Blog updates<br />
<span> live from our blog page</span></h2>
<p><strong>Lorem Ipsum as their default model text...</strong><br />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered.<br />
<em><span> 19-11-09 - photography</span></em> - <a href="#">2 comments</a></p>
<p><strong>Lorem Ipsum as their default model text...</strong><br />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered.<br />
<em><span> 19-11-09 - photography</span></em> - <a href="#">3 comments</a><br />
<br />
</p>
<h2>News site<br />
<span> Lorem ipsum dolor sit amet</span></h2>
<p><strong>5th / April / 2009</strong><br />
Integer mauris. Cras iaculis viverra dolorqw. Nulla suscipit.</p>
<p><strong>6th / April / 2009</strong><br />
Cras iaculis viverra dolor. Nulla suscipit. Proin eu sapien ac sem fermentum sollicitudin.</p>
<p><strong>7th April 2009</strong><br />
Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
<div class="bg"></div>
<p><a href="#">more news</a></p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="leftt">Copyright © 2010 <a href="#">Domain Name</a> - All Rights Reserved</p>
<p class="rightt"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://iconnice.com/">Iconnice</a></p>
<div class="clr"></div>
</div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category