healthlife : Health « Templates « HTML / CSS






healthlife

   

?<!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">
<head>
<title>Health Life</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* --------------------------------------------------------
Yahoo reset library ( http://developer.yahoo.com/yui/reset )
-------------------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; }
ol,ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
q:before,q:after { content: ''; }
abbr,acronym { border: 0; }
a:focus { outline: 0; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


</style>


<link type="text/css" media="screen" rel="stylesheet" href="stylesheets/main.css" />
</head>
<body>
<div id="container">
  <div id="header">
    <h1><a href="http://www.free-css.com/">Health Life</a></h1>
    <ul id="utility-nav">
      <li class="first-item"><a href="http://www.free-css.com/">About us</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
      <li><a href="http://www.free-css.com/">Site map</a></li>
      <li><a href="http://www.free-css.com/">Sign in</a></li>
    </ul>
    <ul id="main-nav">
      <li class="first-item"><a class="active" href="http://www.free-css.com/"><span>Home</span></a></li>
      <li><a href="http://www.free-css.com/"><span>Submit Article</span></a></li>
      <li><a href="http://www.free-css.com/"><span>Members Login</span></a></li>
      <li><a href="http://www.free-css.com/"><span>Editorial Guidelines</span></a></li>
      <li><a href="http://www.free-css.com/"><span>FAQ</span></a></li>
    </ul>
    <!-- //#main-nav -->
  </div>
  <!-- //#header -->
  <div id="sub-header">
    <p class="breadcrumbs">The Health &amp; Fitness Directory &raquo; Bulid Muscle</p>
    <form action="http://www.free-css.com/" method="post">
      <fieldset id="search">
      <legend>Search form</legend>
      <input type="text" value="Search" class="input-text" />
      <input type="button" class="input-button" />
      </fieldset>
    </form>
    <ul id="images">
      <li class="first-item"><img src="healthlife-images/photos/sub_header_1.jpg" alt="" /></li>
      <li><img src="healthlife-images/photos/sub_header_2.jpg" alt="" /></li>
      <li><img src="healthlife-images/photos/sub_header_3.jpg" alt="" /></li>
      <li><img src="healthlife-images/photos/sub_header_4.jpg" alt="" /></li>
      <li class="last-item"><img src="healthlife-images/photos/sub_header_5.jpg" alt="" /></li>
    </ul>
    <div id="directory">
      <div id="directory-inner" class="clearfix">
        <ul>
          <li><a href="http://www.free-css.com/">Acne</a></li>
          <li><a href="http://www.free-css.com/">Aerobics Cardio</a></li>
          <li><a href="http://www.free-css.com/">Allergies</a></li>
          <li><a href="http://www.free-css.com/">Alternative</a></li>
          <li><a href="http://www.free-css.com/">Anti Aging</a></li>
          <li><a href="http://www.free-css.com/">Anxiety</a></li>
          <li><a href="http://www.free-css.com/">Arthritis</a></li>
          <li><a href="http://www.free-css.com/">Asthma</a></li>
          <li><a href="http://www.free-css.com/">Back Pain</a></li>
          <li><a href="http://www.free-css.com/">Beauty</a></li>
          <li><a href="http://www.free-css.com/">Build Muscle</a></li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/">Contraceptives Birth Control</a></li>
          <li><a href="http://www.free-css.com/">Critical Care</a></li>
          <li><a href="http://www.free-css.com/">Dental Care</a></li>
          <li><a href="http://www.free-css.com/">Depression</a></li>
          <li><a href="http://www.free-css.com/">Developmental Disabilities</a></li>
          <li><a href="http://www.free-css.com/">Diabetes</a></li>
          <li><a href="http://www.free-css.com/">Disability</a></li>
          <li><a href="http://www.free-css.com/">Diseases</a></li>
          <li><a href="http://www.free-css.com/">Diseases Multiple Sclerosis</a></li>
          <li><a href="http://www.free-css.com/">Diseases STDs</a></li>
          <li><a href="http://www.free-css.com/">Drug Abuse</a></li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/">Ears Hearing</a></li>
          <li><a href="http://www.free-css.com/">Eating Disorders</a></li>
          <li><a href="http://www.free-css.com/">Ergonomics</a></li>
          <li><a href="http://www.free-css.com/">Exercise</a></li>
          <li><a href="http://www.free-css.com/">Eyes Vision</a></li>
          <li><a href="http://www.free-css.com/">Fitness Equipment</a></li>
          <li><a href="http://www.free-css.com/">Hair Loss</a></li>
          <li><a href="http://www.free-css.com/">Healing Arts</a></li>
          <li><a href="http://www.free-css.com/">Healthcare Systems</a></li>
          <li><a href="http://www.free-css.com/">Heart Disease</a></li>
          <li><a href="http://www.free-css.com/">Home Health Care</a></li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/">Hypertension</a></li>
          <li><a href="http://www.free-css.com/">Massage</a></li>
          <li><a href="http://www.free-css.com/">Medicine</a></li>
          <li><a href="http://www.free-css.com/">Meditation</a></li>
          <li><a href="http://www.free-css.com/">Mens Issues</a></li>
          <li><a href="http://www.free-css.com/">Mental Health</a></li>
          <li><a href="http://www.free-css.com/">Mind Body Spirit</a></li>
          <li><a href="http://www.free-css.com/">Nutrition</a></li>
          <li><a href="http://www.free-css.com/">Obesity</a></li>
          <li><a href="http://www.free-css.com/">Pain Management</a></li>
          <li><a href="http://www.free-css.com/">Physical Therapy</a></li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/">Popular Diets</a></li>
          <li><a href="http://www.free-css.com/">Quit Smoking</a></li>
          <li><a href="http://www.free-css.com/">Skin Care</a></li>
          <li><a href="http://www.free-css.com/">Sleep Snoring</a></li>
          <li><a href="http://www.free-css.com/">Speech Pathology</a></li>
          <li><a href="http://www.free-css.com/">Supplements</a></li>
          <li><a href="http://www.free-css.com/">Weight Loss</a></li>
          <li><a href="http://www.free-css.com/">Womens Issues</a></li>
          <li><a href="http://www.free-css.com/">Yoga</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- //#sub-header -->
  <div id="sidebar">
    <h2>Authors spotlight</h2>
    <ul>
      <li class="clearfix"> <img src="healthlife-images/photos/marc.jpg" alt="" />
        <h3>Marc Lauren</h3>
        <p>Pellentesque sit amet nequ utrum leo. Ut semper velit. Enean tincidunt, eros ege.</p>
        <a href="http://www.free-css.com/">Read more</a> </li>
      <li class="clearfix"> <img src="healthlife-images/photos/lynda.jpg" alt="" />
        <h3>Lynda Syn</h3>
        <p>Pellentesque sit amet nequ utrum leo. Ut semper velit. Enean tincidunt, eros ege.</p>
        <a href="http://www.free-css.com/">Read more</a> </li>
      <li class="clearfix"> <img src="healthlife-images/photos/jenna.jpg" alt="" />
        <h3>Jenna Proxy</h3>
        <p>Pellentesque sit amet nequ utrum leo. Ut semper velit. Enean tincidunt, eros ege.</p>
        <a href="http://www.free-css.com/">Read more</a> </li>
    </ul>
  </div>
  <!-- //#sidebar -->
  <div id="main-content">
    <h2>Latest Articles</h2>
    <div class="article-wrapper">
      <ul class="article-actions">
        <li><img src="healthlife-images/icons/category.gif" alt="" /> <a href="http://www.free-css.com/">Build Muscule</a></li>
        <li><img src="healthlife-images/icons/date.gif" alt="" /> 24.12.2008 at 23:00h</li>
        <li><img src="healthlife-images/icons/author.gif" alt="" /> <a href="http://www.free-css.com/">Dave Adams</a></li>
        <li><img src="healthlife-images/icons/comments.gif" alt="" /> <a href="http://www.free-css.com/">32 Comments</a></li>
      </ul>
      <div class="article">
        <h3>Suspendisse porttitor sollicitudin lacus</h3>
        <p>Fusce ornare. Curabitur egestas. <a href="http://www.free-css.com/">Suspendisse porttitor</a> sollicitudin lacus. Curabitur nec mi quis tortor bortis placerat. In ornare condimentum neque. Aenean lobortis mollis augue. Vivamus elit quam, viverra nec, vulputate nec, hendrerit non, orci. Ut semper velit. Enean tincidunt, eros egestas laoreet fermentum nibh diam hendrerit erat, pulvinar semper mauris tortor et lacus. Donec adipiscing.</p>
      </div>
    </div>
    <!-- //.article -->
    <div class="article-wrapper">
      <ul class="article-actions">
        <li><img src="healthlife-images/icons/category.gif" alt="" /> <a href="http://www.free-css.com/">Build Muscule</a></li>
        <li><img src="healthlife-images/icons/date.gif" alt="" /> 24.12.2008 at 23:00h</li>
        <li><img src="healthlife-images/icons/author.gif" alt="" /> <a href="http://www.free-css.com/">Dave Adams</a></li>
        <li><img src="healthlife-images/icons/comments.gif" alt="" /> <a href="http://www.free-css.com/">32 Comments</a></li>
      </ul>
      <div class="article">
        <h3>Suspendisse porttitor sollicitudin lacus</h3>
        <p>Fusce ornare. Curabitur egestas. Suspendisse porttitor sollicitudin lacus. Curabitur nec mi quis tortor bortis placerat. In ornare condimentum neque. Aenean lobortis <strong>mollis augue</strong>. Vivamus elit quam, viverra nec, vulputate nec, hendrerit non, orci. Ut semper velit. Enean tincidunt, eros egestas laoreet fermentum nibh diam hendrerit erat, pulvinar semper mauris tortor et lacus. <em>Donec adipiscing.</em></p>
      </div>
    </div>
    <!-- //.article -->
  </div>
  <!-- //#main-content -->
  <div id="footer">
    <p class="copyright">All rights reserved &copy; <span>Health Life</span> 2009</p>
    <p class="authors">Design: <a href="mailto:karlodomic@gmail.com">Karlo Domic</a> &nbsp;|&nbsp; Code: <a href="http://www.slicejack.com">Slicejack</a></p>
  </div>
  <!-- //#footer -->
</div>
<!-- //#container -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.healthy-lifestyle
2.healthybuilding-architects