orangefocus : Orange « Templates « HTML / CSS

orangefocus
   

<!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>OrangeFocus | 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:#fff;
}
html {
  padding:0;
  margin:0;
}
li.bg, .bg {
  clear:both;
  border-bottom:1px dashed #818181;
  padding:0;
  margin:10px 0;
  background:none;
  list-style:none;
}
p.clr, .clr {
  clear:both;
  padding:0;
  margin:0;
}
.main {
  margin:0 auto;
  padding:0;
}
.header_resize {
  margin:0 auto;
  padding:0;
  width:970px;
}
.header {
  margin:0;
  padding:0;
  background:#fff url(orangefocus-images/header_bg.gif) top repeat-x;
}
.logo {
  width:350px;
  margin:0 auto;
  padding:9px 0 0 0;
  float:left;
}
h1 {
  margin:0;
  padding:40px 0 0 40px;
  color:#999898;
  font:bold 36px/1.2em Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  letter-spacing:-2px;
}
h1 a, h1 a:hover {
  color:#999898;
  text-decoration:none;
}
h1 span {
  color:#ea5d00;
  font-size:50px;
}
h1 small {
  padding-left:122px;
  font:normal 13px/1.2em Arial, Helvetica, sans-serif;
  text-transform:none;
  letter-spacing:normal;
}
.menu {
  padding:0;
  margin:0;
  width:410px;
  float:right;
}
.menu ul {
  padding:0;
  margin:0;
  list-style:none;
  border:0;
  float:right;
}
.menu ul li {
  float:left;
  margin:0;
  padding:0 5px;
  border:0;
}
.menu ul li a {
  float:left;
  margin:0;
  padding:20px 0;
  color:#3f3f3f;
  font:bold 16px Arial, Helvetica, sans-serif;
  text-decoration:none;
}
.menu ul li a span {
  padding:20px 10px;
  background:none;
}
.menu ul li a:hover {
  color:#fff;
  background:url(orangefocus-images/r_menu.gif) no-repeat right;
}
.menu ul li a:hover span {
  color:#fff;
  background:url(orangefocus-images/l_menu.gif) no-repeat left;
}
.menu ul li a.active {
  color:#fff;
  background:url(orangefocus-images/r_menu.gif) no-repeat right;
}
.menu ul li a.active span {
  color:#fff;
  background:url(orangefocus-images/l_menu.gif) no-repeat left;
}
.headert_text_resize {
  width:970px;
  padding:0;
  margin:0 auto;
  background:url(orangefocus-images/text_bg.jpg) center no-repeat;
  height:406px;
}
.headert_text_resize img {
  float:right;
  margin:0;
  padding:15px 36px 0 0;
}
.headert_text_resize .textarea {
  width:400px;
  margin:0;
  padding:80px 30px 0 80px;
  float:left;
}
.headert_text_resize .textarea h2 {
  font:bold 24px Arial, Helvetica, sans-serif;
  color:#feffff;
  padding:10px 0;
  margin:0;
}
.headert_text_resize .textarea p {
  font:bold 15px Arial, Helvetica, sans-serif;
  color:#feffff;
  padding:10px 0;
  margin:0;
  line-height:1.6em;
}
.headert_text_resize .textarea a {
  color:#feffff;
  text-decoration:underline;
}
.body_resize {
  margin:0 auto;
  padding:0;
  width:970px;
}
.body {
  margin:0;
  padding:0;
}
.body h2 {
  font:normal 24px Arial, Helvetica, sans-serif;
  color:#3f3f3f;
  padding:10px 5px;
  margin:5px 0 10px 0;
}
.body h2 span {
  color:#959595;
  font:normal 12px Arial, Helvetica, sans-serif;
}
.body p {
  font:normal 12px Arial, Helvetica, sans-serif;
  color:#5f5f5f;
  padding:5px;
  margin:0;
  line-height:1.8em;
}
.body p span {
  font:bold 14px Arial, Helvetica, sans-serif;
  color:#4b4b4b;
  padding:0;
  margin:0;
}
.body img {
  float:left;
  margin:5px;
  padding:0;
}
.body img.floated {
  float:right;
  margin:5px 10px 5px 0;
  padding:0;
}
.body a {
  color:#ea5d00;
  text-decoration:underline;
}
.left {
  float:left;
  width:630px;
  margin:0;
  padding:0;
}
.right {
  float:right;
  width:210px;
  margin:0;
  padding:0;
}
.right ul {
  list-style:none;
  margin:5px 0;
  padding:0;
}
.right li {
  background:10px 10px no-repeat;
  font:normal 14px Arial, Helvetica, sans-serif;
  color:#464646;
  padding:5px 0;
  margin:3px 0;
}
.right li a {
  padding:0 0 0 5px;
  margin:0;
  font:normal 16px Arial, Helvetica, sans-serif;
  color:#5f5f5f;
  text-decoration:none;
}
.right li a:hover {
  color:#ea5d00;
  text-decoration:none;
}
.right ul.sponsors {
  list-style:none;
  margin:5px 0;
  padding:0;
}
.right li.sponsors {
  background:none;
  font:normal 11px Arial, Helvetica, sans-serif;
  color:#959595;
  padding:8px 0;
}
.right li.sponsors a {
  padding:0 0 0 0px;
  margin:0;
  font:normal 13px Arial, Helvetica, sans-serif;
  color:#5f5f5f;
  text-decoration:none;
}
.right li.sponsors strong {
  color:#ea5d00;
}
.FBG_resize {
  margin:0 auto;
  padding:0;
  width:970px;
  border-top:1px solid #dfdfdf;
}
.FBG {
  margin:0;
  padding:0;
}
.FBG img {
  float:left;
  margin:5px 10px 5px 0;
  padding:0;
}
.FBG h2 {
  font:normal 24px Arial, Helvetica, sans-serif;
  color:#3f3f3f;
  padding:10px 5px;
  margin:5px 0 10px 0;
}
.FBG p {
  font:normal 12px Arial, Helvetica, sans-serif;
  color:#5f5f5f;
  padding:5px;
  margin:0;
  line-height:1.8em;
}
.FBG a {
  color:#ea5d00;
  text-decoration:underline;
}
.FBG ul {
  list-style:none;
  margin:5px 0;
  padding:0;
}
.FBG li {
  border-bottom:1px solid #dfdfdf;
  background:10px 10px no-repeat;
  font:normal 14px Arial, Helvetica, sans-serif;
  color:#464646;
  padding:5px 0;
  margin:3px 0;
}
.FBG li a {
  padding:0 0 0 5px;
  margin:0;
  font:normal 13px Arial, Helvetica, sans-serif;
  color:#5f5f5f;
  text-decoration:none;
}
.FBG li a:hover {
  color:#ea5d00;
  text-decoration:none;
}
.FBG .blok {
  width:280px;
  float:left;
  padding:0 8px;
  margin:15px 5px 5px 5px;
}
.footer_resize {
  margin:0 auto;
  padding:25px 0;
  width:970px;
  border-top:1px solid #dfdfdf;
  color:#5f5f5f;
  font:normal 12px Arial, Helvetica, sans-serif;
}
.footer {
  padding:0;
  margin:10px auto;
}
.footer p {
  margin:0;
  padding:4px 0;
  line-height:normal;
  color:#5f5f5f;
}
.footer a {
  color:#5f5f5f;
  padding:inherit;
  text-decoration:underline;
}
.footer a:hover {
  text-decoration:none;
}
.footer .lf {
  float:left;
}
.footer .rf {
  float:right;
}
#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;
}
#contactform label {
  margin:0;
  width:110px;
  display:block;
  padding:10px 0;
  color:#666;
  font:normal 12px Arial, Helvetica, sans-serif;
  text-transform:capitalize;
  float:left;
}
#contactform label span {
  color:#F00;
}
#contactform input.text {
  width:480px;
  border:1px solid #c0c0c0;
  margin:2px 0;
  padding:5px 2px;
  height:16px;
  background:#fff;
  float:left;
}
#contactform textarea {
  width:480px;
  border:1px solid #c0c0c0;
  margin:2px 0;
  padding:2px;
  background:#fff;
  float:left;
}
#contactform li.buttons input {
  border:1px solid #000;
  background:#ea7d1b;
  padding:10px;
  margin:10px 0 0 110px;
  color:#fff;
  float:left;
  font:normal 12px Arial, Helvetica, sans-serif;
}
p.response {
  text-align:center;
  color:#F00;
  font:normal 11px Georgia, "Times New Roman", Times, serif;
  line-height:1.8em;
  width:auto;
}

</style>


<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/arial.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>
</head>
<body>
<div class="main">
  <div class="header">
    <div class="header_resize">
      <div class="logo">
        <h1><a href="index.html"><span>Orange</span>Focus <small>put your slogan here</small></a></h1>
      </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="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="clr"></div>
    </div>
    <div class="headert_text_resize"> <img src="orangefocus-images/text_area_img.jpg" alt="" width="395" height="396" />
      <div class="textarea">
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. <br />
          Curabitur varius est et sem rhoncus et pretium massa molestie. Vestibulum mattis justo ultricies mauris fringilla rutrum. Vestibulum id mauris non lorem euismod posuere.<br />
          <a href="#">Read more...</a></p>
      </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="body">
    <div class="body_resize">
      <div class="left">
        <h2>About Us<br />
          <span> March 16, 2010 | Posted by Owner | Filed under templates, internet</span> </h2>
        <p><a href="#">Lorem ipsum dolor sit amet, consectetur </a>adipiscing elit. Sed euismod aliquet nunc vel porta. Morbi non mi id diam mattis consequat. Mauris pharetra fermentum tortor quis sagittis. Fusce rutrum ipsum lectus, vel congue velit. Nulla ultrices pretium congue. Mauris metus nibh, pulvinar vel vehicula eu, pharetra id ante. Vivamus tincidunt semper sapien ut fermentum. Nullam facilisis, nulla eu suscipit vulputate, libero nisl pellentesque tellus, ac scelerisque metus mauris ut quam. Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti.</p>
        <p> Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti.</p>
        <p>Pellentesque elementum, felis nec vulputate facilisis, ligula mauris suscipit mi, id imperdiet metus quam sed erat. Mauris lectus ligula, scelerisque quis cursus eu, lacinia eu magna. Donec et orci justo. Donec id quam turpis. Curabitur sit amet fermentum turpis. Etiam blandit accumsan purus ut sodales. Maecenas ante risus, facilisis vel semper a, venenatis ut dui. <a href="#">Read more... </a><br />
        </p>
        <h2>Aliquam Risus Justo<br />
          <span>March 16, 2010 | Posted by Owner | Filed under templates, internet</span></h2>
        <p> Nullam facilisis, nulla eu suscipit vulputate, libero nisl pellentesque tellus, ac scelerisque metus mauris ut quam. Nulla facilisi. Quisque rhoncus dolor et dolor lobortis accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse at nulla ante, at hendrerit mi. Aenean in ipsum massa. Pellentesque semper elit quis mauris ultricies ultrices. Sed sit amet felis tellus. Suspendisse potenti. <a href="#">Read more...</a></p>
        <h2>&nbsp;</h2>
      </div>
      <div class="right">
        <h2>Sponsors</h2>
        <ul class="sponsors">
          <li class="sponsors"><a href="http://www.dreamtemplate.com">DreamTemplate</a><br />
            Over 6,000+ Premium Web Templates</li>
          <li class="sponsors"><a href="http://www.templatesold.com/">TemplateSOLD</a><br />
            Premium WordPress &amp; Joomla Themes</li>
          <li class="sponsors"><a href="http://www.imhosted.com">ImHosted.com</a><br />
            Affordable Web Hosting Provider</li>
          <li class="sponsors"><a href="http://www.csshub.com/">CSS Hub</a><br />
            Premium CSS Templates</li>
          <li class="sponsors"><a href="http://www.evrsoft.com">Evrsoft</a><br />
            Website Builder Software &amp; Tools</li>
          <li class="sponsors"><a href="http://www.myvectorstore.com">MyVectorStore</a><br />
            Royalty Free Stock Icons</li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="FBG">
    <div class="FBG_resize">
      <div class="blok">
        <h2><span>Image</span> Gallery</h2>
        <img src="orangefocus-images/gallery_1.gif" alt="" width="68" height="68" /><img src="orangefocus-images/gallery_2.gif" alt="" width="68" height="68" /><img src="orangefocus-images/gallery_3.gif" alt="" width="68" height="68" /><img src="orangefocus-images/gallery_4.gif" alt="" width="68" height="68" /><img src="orangefocus-images/gallery_5.gif" alt="" width="68" height="68" /><img src="orangefocus-images/gallery_6.gif" alt="" width="68" height="68" />
        <div class="clr"></div>
        <h2>Contact Info </h2>
        <p><strong>Phone</strong>: +1234567<br />
          <strong>Address</strong>: 123 Put Your Address Here <br />
          <strong>E-mail:</strong> me@jungleland.com<br />
          <a href="#">contact page</a></p>
      </div>
      <div class="blok">
        <h2><span>Lorem</span> Ipsum</h2>
        <p>Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. <br />
          Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
        <ul>
          <li><a href="#"> consequat molestie</a></li>
          <li><a href="#"> sem justo</a></li>
          <li><a href="#"> semper</a></li>
          <li><a href="#"> magna sed purus</a></li>
        </ul>
      </div>
      <div class="blok">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. llorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. <a href="#">Learn more...</a></p>
        <p><br />
        </p>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="footer">
    <div class="footer_resize">
      <p class="lf">&copy; Copyright <a href="#">MyWebSite</a>.</p>
      <p class="rf">Layout by Hot <a href="http://www.hotwebsitetemplates.net/">Website Templates</a></p>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_orange
2.	metamorph_orangemess
3.	freecss_orangelights
4.	orangeandblack
5.	orangeblue
6.	orangeflex
7.	orangeflower
8.	orangejuice
9.	orangemint
10.	orangeroyalty
11.	Oranges
12.	orangesin
13.	OrangeSquareShadow
14.	OrangeVillage
15.	Orangezest
16.	Orange 2
17.	iOrange
18.	iOrange2b
19.	hot-orange