clean-and-professional : Clear « Templates « HTML / CSS






clean-and-professional

    

?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
<head>
<title>Clean and Professional | About Us</title>
<meta http-equiv="content-type" content="application/xhtml; charset=UTF-8" />
<style type='text/css'>
?* {margin: auto;padding: 0;}

body {background:#e1e1e1; font-family:arial; font-size:12px; color:#39454e;text-align:center;}
  
p {margin-top:0px;padding-top:0px;margin-bottom:0px;padding-bottom:0px;}
 
a img{border: 0px;}

.left{float:left;}

.clear{clear:both;}

.right{float:right;}


textarea{width:350px;height:80px;border:1px solid #39454e;background:#e1e1e1;margin-top:2px;}
textarea:hover{width:350px;height:80px;border:1px solid #39454e;background:#ffffff;margin-top:2px;}


:focus{outline:none;}
 
a {text-decoration:none;cursor:pointer;}
 
#main_body {width:960px;margin-top:20px;text-align:left;padding-bottom:15px;}
 

#header{height:38px;background:#39454e url(clean-and-professional-images/header-r-corner.gif) right no-repeat;}

#logo{height:65px;float:left;margin-right:15px;}

/* Menu Part */
#menu_body{height:38px;width:775px;text-align:left;float:left;font-weight:bold;color:#ffffff;}
.menu_content{padding:6px 5px 0px 5px;font-weight:bold;}
.menu_content ul{list-style-type:none;}
.menu_content li{float:left;margin-right:10px;}
.menu_content li:hover{background:#757d83;margin-right:10px;float:left;color:#ffffff;}
.menu_content a{color:#d4d7da;padding:5px 15px 5px 15px;display:block;}
.menu_content a:hover{color:#ffffff;padding:5px 15px 5px 15px;}
li.menu_content_active{background:#757d83;margin-right:10px;float:left;color:#ffffff;}
.menu_content_active a{color:#ffffff;padding:5px 15px 5px 15px;}

 /* Search Part Starts Here */
 .search_body{margin-top:2px;color:#2b2f32;width:220px;height:20px;float:right;background:url(clean-and-professional-images/search_input_bg.gif) no-repeat;}
 .search_body a{padding:0px;display:inline;}
 .search_body a:hover{padding:0px;display:inline-block;}
 .search_body input[type="text"]{margin:1px 0px 0px 3px;width:180px;color:#2b2f32;background:none;border:none; vertical-align:top;}
 .search_body input[type="image"]{margin:1px 0px 0px 8px;}
 /* Search Part Ends Here */

/* Menu Part */

/* Content Body Starts Here */

#content_body{clear:both;background:url(clean-and-professional-images/content_bg.gif) top left repeat-x;margin-top:35px;text-align:left;padding:10px;font-size:12px;color:#5d6c77;}

#top_content{height:345px;clear:both;}

#main_info{width:330px;float:left;color:#39454e;font-size:13px;}
#main_info p{padding-top:10px;line-height:20px;}

/* Content Slider */
#slider_shadow{background:url(clean-and-professional-images/content_slider_shadow.gif) right bottom no-repeat;height:345px;}
#content_slider{float:right;outline:0;width:600px;}
/* Content Slider */

.headers{border-bottom:1px solid #7c8389;padding-bottom:5px;color:#39454e;font-size:21px;font-weight:bold;margin-bottom:12px;}

.headers1{border-bottom:1px solid #7c8389;padding-bottom:5px;color:#ffffff;font-size:21px;font-weight:bold;margin-bottom:12px;}

.small_headers{padding-top:5px;color:#39454e;font-size:14px;font-weight:bold;margin-bottom:7px;margin-top:12px;}

.sub_headers{border-bottom:1px solid #7c8389;padding-bottom:5px;color:#39454e;font-size:18px;font-weight:bold;margin-bottom:12px;margin-top:3px;}

#bottom_content{clear:both;margin-top:10px;padding-bottom:15px;}

#left_content{padding-bottom:30px;width:600px;float:left;color:#5d6c77;font-size:12px;text-align:left;}

#right_content{clear:right;width:300px;float:right;color:#5d6c77;font-size:12px;text-align:left;}

.right_links{color:#5d6c77;font-size:13px;text-align:left;text-decoration:none;}
.right_links li{list-style-type:none;padding:5px 0px 5px 0px;}
.right_links li:hover{list-style-type:none;padding:5px 0px 5px 7px;}
.right_links1 li{list-style-type:none;padding:5px 0px 5px 0px;}
.right_links a{color:#5d6c77;font-size:13px;text-align:left;text-decoration:none;}
.right_links a:hover{color:#ffffff;font-size:13px;text-align:left;text-decoration:none;font-weight:bold;}

.read_more_btn{width:82px;height:24px;margin-right:0px;}

#follow_us{margin-top:12px;}
#follow_us img{margin-right:12px;}

/* Contact Form */
.contact input[type="text"]{width:300px;border:1px solid #39454e;background:#e1e1e1;margin-top:2px;padding:3px;}
.contact input[type="text"]:hover{width:300px;border:1px solid #39454e;background:#ffffff;margin-top:2px;padding:3px;}
label.error {color: red; padding-left: 20px; } 
/* Contact From */

/*Content Body Ends Here */

/* Footer Starts Here */
#footer{clear:both;color:#5d6c77;border-top:1px solid #bebebe;padding-top:5px;}
#footer a{text-decoration:none;color:#5d6c77;font-size:12px;}
#footer span{padding:0px 5px 0px 5px;}
#footer a:hover{text-decoration:underline;color:#5d6c77;font-size:12px;}

/* Footer Ends Here */
 
 


</style>


<!--[if lt IE 8.]><link rel="stylesheet" type="text/css" href="css/style-ie.css" /><![endif]-->
<!--[if lt IE 7.]><link rel="stylesheet" type="text/css" href="css/style-ie6.css" /><![endif]-->
</head>
<body>
<div id="main_body">
  <div id="header">
    <div id="logo"> <a href="index.html"><img src="clean-and-professional-images/logo.jpg" alt="" /></a> </div>
    <div id="menu_body">
      <div class="menu_content">
        <ul>
          <li> <a href="index.html">HOME</a> </li>
          <li class="menu_content_active"> <a href="about_us.html">ABOUT US</a> </li>
          <li> <a href="solutions.html">SOLUTIONS</a> </li>
          <li> <a href="contact_us.html">CONTACT US</a> </li>
        </ul>
        <div class="search_body">
          <input type="text" name="search" />
          <input style="margin-top:1px;" type="image" src="clean-and-professional-images/search_btn.gif" name="Search" />
        </div>
      </div>
    </div>
  </div>
  <div id="content_body">
    <div id="left_content">
      <p class="headers1"> About Us </p>
      <p> <img style="margin:0px 7px 7px 0px;float:left;" src="clean-and-professional-images/about_us_img.png" alt="" /> Vivamus sit amet odio pellentesque odio faucibus tristique. Morbi facilisis, ligula a faucibus pellentesque, orci justo consequat massa, sit amet dapibus dolor diam viverra mi. Aenean porttitor, lectus at dapibus egestas, tellus ipsum rhoncus orci, eu vestibulum nisi orci quis nunc.Curabitur auctor leo vehicula justo consectetur ac euismod justo rhoncus. In sed enim magna. Etiam facilisis luctus ullamcorper. Quisque lacinia, elit vel iaculis pharetra, turpis lectus scelerisque nisi. </p>
      <br />
      <p> Vivamus sit amet odio pellentesque odio faucibus tristique. Morbi facilisis, ligula a faucibus pellentesque, orci justo consequat massa, sit amet dapibus dolor diam viverra mi. Aenean porttitor, lectus at dapibus egestas, tellus ipsum rhoncus orci. </p>
      <br />
      <p> Vivamus sit amet odio pellentesque odio faucibus tristique. Morbi facilisis, ligula a faucibus pellentesque, orci justo consequat massa, sit amet dapibus dolor diam viverra mi. Aenean porttitor, lectus at dapibus egestas, tellus ipsum rhoncus orci. </p>
      <br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar nisi eu enim facilisis dapibus. Duis viverra turpis vitae dui tincidunt eleifend. Etiam sodales, neque in dignissim dictum, dui libero dictum orci, vel cursus felis velit vitae dui. Etiam malesuada viverra est pretium lobortis. Vivamus fermentum, neque a elementum interdum, erat nisl mattis odio, eu lobortis libero tortor sed ante. Vestibulum felis metus, accumsan at rhoncus id, ultrices et lacus. </p>
      <p class="small_headers"> Mission </p>
      <p> Vivamus sit amet odio pellentesque odio faucibus tristique. Morbi facilisis, ligula a faucibus pellentesque, orci justo consequat massa, sit amet dapibus dolor diam viverra mi. Aenean porttitor, lectus at dapibus egestas, tellus ipsum rhoncus orci. </p>
      <br />
      <p> Vivamus sit amet odio pellentesque odio faucibus tristique. Morbi facilisis, ligula a faucibus pellentesque, orci justo consequat massa, sit amet dapibus dolor diam viverra mi. Aenean porttitor, lectus at dapibus egestas, tellus ipsum rhoncus orci. </p>
      <p class="small_headers"> Our Commitment </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar nisi eu enim facilisis dapibus. Duis viverra turpis vitae dui tincidunt eleifend. Etiam sodales, neque in dignissim dictum, dui libero dictum orci, vel cursus felis velit vitae dui. Etiam malesuada viverra est pretium lobortis. Vivamus fermentum, neque a elementum interdum, erat nisl mattis odio, eu lobortis libero tortor sed ante. Vestibulum felis metus, accumsan at rhoncus id, ultrices et lacus. </p>
    </div>
    <div id="right_content">
      <p class="sub_headers"> More About us </p>
      <ul class="right_links">
        <li><a href="#">Overview</a></li>
        <li><a href="#">Vision and Mission</a></li>
        <li><a href="#">Management Team</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
  <div id="footer">
    <p class="left"><a href="index.html">Home</a> <span>|</span> <a href="about_us.html">About Us</a> <span>|</span> <a href="solutions.html"> Solutions</a> <span>|</span> <a href="contact_us.html">Contact Us</a></p>
    <p class="right">Copyright &copy; 2010. All rights reserved. | Design by <a href="http://www.design3edge.com/">Design3edge.com</a>.</p>
  </div>
  <br />
</div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.clean&green
2.clean-web-2.0
3.cleandesign
4.cleangrad
5.cleaninterface
6.cleanlayout
7.cleantype
8.Clean_and_Brite
9.clearandcrisp
10.clearbreeze
11.clearfocus
12.clearfootball
13.clearminimalist
14.clearpixels
15.clearsky
16.fresh-vege
17.fresh
18.FreshiFresh
19.freshmedia-01
20.freshness
21.freshscent
22.Elegant_Style
23.elegance
24.smooth
25.smoothandsleek
26.refresh