cleaninterface
<!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>CleanInterface | 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:#f2f2f2;}
html { padding:0; margin:0;}
/* main */
.main { margin:0; padding:0;}
.main_resize { margin:0 auto; padding:0 10px; width:958px; border-right:1px solid #ececec; border-left:1px solid #ececec; border-bottom:1px solid #ececec; background:#fff;}
.main_resize h2 { font:normal 18px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0;}
.main_resize h2 span { font: italic 11px Arial, Helvetica, sans-serif; color:#b1b1b1;}
.main_resize h3 { font:normal 44px Arial, Helvetica, sans-serif; color:#7e7e7e; padding:20px 5px; margin:0; text-align:right;}
.main_resize p { font:normal 12px Arial, Helvetica, sans-serif; color:#606060; line-height:1.8em; padding:5px; margin:0;}
.main_resize p span { color:#b1b1b1; font: italic 11px Arial, Helvetica, sans-serif; line-height:1.8em;}
.main_resize a { color:#2d75c0; text-decoration:none;}
.main_resize img { margin:5px auto; padding:0;}
.main_resize ul.serv { list-style:none; margin:10px 0 10px 5px; padding:0; width:230px; float:left;}
.main_resize li.serv { padding:5px; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#2d75c0;}
.main_resize img.floated { float:left; margin:5px 10px 5px 0; padding:0;}
.main_left { width:250px; float:left; padding:0 0 0 10px; margin:0;}
.main_right { width:680px; float:right; padding:0; margin:0;}
.blog { width:280px; float:left; padding:0; margin:10px 30px 10px 10px;}
.blog2 { width:215px; float:left; padding:0; margin:10px 10px 30px 0;}
/* header */
.header { padding:0 0 10px 0; margin:0 auto; border-bottom:1px solid #dfdfdf;}
/* logo */
.logo {padding:0; margin:0; width:232px; float:left;}
.logo img { margin:0; padding:0;}
/*menu*/
.menu { width:555px; padding:10px 0 0 0; margin:0; float:left; }
.menu ul { padding:0; margin:0; list-style:none; border:0;}
.menu ul li { display:inline; margin:0; padding:0; border:0; background:none;}
.menu ul li a { display:inline; margin:0; padding:11px; color:#5a5a5a; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background: #dfdfdf;}
.menu ul li a.active { background: #dfdfdf;}
/* click */
.click { width:350px; float:right; padding:0; margin:0; text-align:right;}
.click p { font: normal 12px Arial, Helvetica, sans-serif; color:#959595; padding:0; margin:0;}
/* slider_main */
.slider_main { margin:0 auto; padding:0;}
.slider_main .leftt { float:left; width:252px; padding:0; margin:0;}
.slider_main .leftt h2 { font: normal 24px Arial, Helvetica, sans-serif; color:#616161; padding:71px 0 0 24px; margin:0; line-height:1.2em;}
.slider_main .leftt p { font: normal 12px Arial, Helvetica, sans-serif; color:#818181; padding:10px 0 15px 24px; margin:0; line-height:1.8em;}
.slider_main .leftt img { float:left; margin:0; padding:0 0 0 24px;}
/* search */
.search { padding:0; margin:0 auto 30px auto;}
.search form { display:block; float:left; padding:5px; margin:0; background:#fafafa;}
.search p { font: bold 11px Arial, Helvetica, sans-serif; color:#959595; padding:7px 0; height:16px; margin:0; float:left; line-height:14px;}
.search span { display:block; float:left; background:#f6f6f6; border:1px solid #eaeaea; width:150px; padding:0 5px; height:30px; margin:0 3px;}
.search form .keywords { line-height:16px; float:left; border:0; width:150px; padding:7px 0; height:16px; background:none; margin:0; font:normal 14px Arial, Helvetica, sans-serif; color:#9c9c9c;}
.search form .button { float:left; margin:0; padding:0;}
/* right_text */
.right_text { border-top:1px solid #dadada; background:#ececec; padding:0; margin:0 0 30px 0;}
.right_text p { font: normal 11px Arial, Helvetica, sans-serif; color:#7e7e7e; padding:15px; margin:0;}
/********** 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; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:150px; display:block; padding:10px 0; color:#222222; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:530px; border:1px solid #e8e8e8; margin:2px 0; padding:5px 2px; height:16px; background:#f8f8f8; float:left; }
#contactform textarea { width:530px; border:1px solid #e8e8e8; margin:2px 0; padding:2px; background:#f8f8f8; float:left; }
#contactform li.buttons input { padding:3px 0 3px 0px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }
/*************footer**********/
.footer {padding:5px 0; margin:0;}
.footer_resize { width:958px; margin:0 auto; padding:10px 10px; background:#202020;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#a2a2a2;}
.footer a { font:normal 11px Arial, Helvetica, sans-serif; color:#2d75c0; text-decoration:none; padding:5px; margin:0;}
.footer p.right { text-align:right; width:350px; margin:0; padding:8px 0 0 0; float:right;}
.footer p.leftt { text-align:left; width:550px; margin:0; padding:8px 0 0 5px; float:left;}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:1px solid #f2f2f2; width:100%; padding:0; margin:15px 0; background:none; line-height:0;}
/* Slider */
#slider { width:648px; padding:10px 0 0 0; margin:0; height:428px; float:right;}
#slideshow { margin:0 auto; width:653px; height: 346px; }
.slider-item { height: 346px; margin:0 auto; padding:0; }
.slider_content_inner img { border: none; margin:0 auto; }
.controls-center { width: 678px; margin:0 auto; padding:0; }
.controls-center h2 { width:350px; float:left; font: bold 14px Arial, Helvetica, sans-serif; color:#6d6d6d; padding:15px 0 0 20px; margin:0;}
.controls-center h3 { text-align:right; font: normal 36px Arial, Helvetica, sans-serif; color:#111; padding:10px 20px 15px 0; margin:0;}
.controls-center p {width:300px; float:left; font: normal 12px Arial, Helvetica, sans-serif; color:#6d6d6d; padding:3px 0 0 20px; margin:0;}
#slider_controls { float: right; margin:0; width:90px;}
#slider_controls ul { margin:0 auto; padding:0; width:74px;}
#slider_controls ul li { background:none; margin: 0; padding: 0; list-style: none; }
#slider_controls ul li { float: left; display: block; }
#slider_controls ul li a { width: 10px; height: 10px; background:url('cleaninterface-images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; }
#slider_controls ul li a:focus { outline: none; }
#slider_controls ul li a:hover,
#slider_controls ul li a.activeSlide { background:url('cleaninterface-images/tabs_1.gif') no-repeat center center; }
</style>
</head>
<body>
<div class="main">
<div class="main_resize">
<div class="header">
<div class="logo"><a href="#"><img src="cleaninterface-images/logo.gif" width="232" height="74" border="0" alt="" /></a></div>
<div class="clr"></div>
<div class="menu">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="services.html" ><span>Services</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="about.html" class="active"><span> About Us </span></a></li>
<li><a href="contact.html"><span> Contact Us</span></a></li>
</ul>
</div>
<div class="click">
<p>Click here to live Support Tell Free 1-866-123-675</p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<h3>About Us</h3>
<div class="main_left">
<div class="search">
<form id="form1" name="form1" method="post" action="#">
<p>Search: </p>
<label> <span>
<input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="" />
</span>
<input name="b" type="image" src="cleaninterface-images/search.gif" class="button" />
</label>
</form>
<div class="clr"></div>
</div>
<h2>What They Say</h2>
<img src="cleaninterface-images/test.gif" alt="" width="18" height="17" class="floated" />
<p>"Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse voluptas nulla pariatur?"</p>
<p><em><strong>by: John S., webdesigner</strong></em></p>
<p> </p>
<p><img src="cleaninterface-images/test.gif" alt="" width="18" height="17" class="floated" /> </p>
<p>"Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse voluptas nulla pariatur?"</p>
<p><em><strong>by: John S., webdesigner</strong></em></p>
</div>
<div class="main_right">
<div class="right_text">
<p><strong>Latest News:</strong> Dipisicing elit, sed do eiusmod tempor incididunt ut labore et?</p>
</div>
<div class="clr"></div>
<h2>Vision & Mission<br />
<span> Ut enim ad minim veniam, quis nostrud exercitation </span> </h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p> </p>
<h2 class="grey">Our Mission</h2>
<p> <em>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. <br />
Maecenas dui urna, luctus ac posuere at, semper vel lectus. 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. </em></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. <br />
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>
<h2>Our Philosophy</h2>
<p><a href="#" style="text-decoration:underline;">Aenean quis leo justo, sit amet varius purus. Ras vitae enim nulla. Aenean tristique eros in mauris porta id suscipit libero scelerisque. </a></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.<br />
Vivamus in metus nisi, ut gravida dolor. Pellentesque fermentum aliquam interdum. <br />
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>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footer_resize">
<p class="leftt"> Copyright websitename . All Rights Reserved. <a href="#"><br />
Home</a> | <a href="#">Contact</a> | <a href="#">RSS </a></p>
<p class="right">(Blue) <a href="http://www.bluewebtemplates.com">Website Templates</a></p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
</div>
</body>
</html>
Related examples in the same category