healthy-lifestyle
?<!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>Healthy Lifestyle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
background: #312118;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
}
a{ color: #ff7f01; text-decoration:none; }
a:hover{ color: #ff7f01; text-decoration:underline; }
.container {
width: 900px;
margin: auto;
}
#top_bg {
width: 100%;
background: #000;
border-bottom: #34302e solid 1px;
}
#header {
width: 900px ;
height: 241px ;
background: url(healthy-lifestyle-images/header.jpg) no-repeat;
}
/* Menu */
#menu {
width: 538px;
height: 33px;
float: right;
margin: 0;
padding: 0;
}
#menu ul {
list-style: none;
display: inline;
}
#menu li {
float:left;
}
#menu li a {
float: left;
display: block;
color: #a8a5a5;
background: url(healthy-lifestyle-images/menu_left.jpg) no-repeat;
text-decoration: none;
font-family: Tahoma;
font-size: 10px;
margin: 0 4px 0 0;
padding: 0 0 0 10px;
height: 33px;
line-height: 33px;
text-align: center;
cursor: pointer;
}
#menu li a b {
float: left;
display: block;
padding: 0 15px 0 5px;
background: url(healthy-lifestyle-images/menu_right.jpg) right top no-repeat;
}
#menu li.current a, #menu li a:hover{
background: url(healthy-lifestyle-images/menu_left_current.jpg) no-repeat;
color: #FF9900;
}
#menu li.current a b, #menu li a:hover b{
background: url(healthy-lifestyle-images/menu_right_current.jpg) right top no-repeat;
}
/*End OF menu*/
#mid_1 {
width: 100%;
height: 188px;
background: #0f0b09 url(healthy-lifestyle-images/mid_1_bg.jpg) repeat-x;
border-bottom: solid 3px #2d2018;
margin: 0;
padding: 0;
}
* html #mid_1 {
margin-top: -19px;
border-top: #34302e 1px solid;
}
#mid_2 {
width: 100%;
background: #312118 ;
border-bottom: solid 1px #2d2018;
margin: 0;
padding: 0;
}
.news {
margin: 0;
padding: 25px 20px 0 20px;
}
.fade {
margin: 0;
padding: 0;
}
.news h1 {
font-family: Tahoma;
font-size: 24px;
font-weight:normal;
color: #fff;
margin: 0 0 20px 0;
padding: 0;
}
.news p{
font-family: Tahoma;
font-size: 11px;
color: #a59689;
margin: 0 0 10px 0;
padding: 0;
}
#content {
margin: 0;
padding: 20px;
}
#content_left {
float:left;
width: 435px;
margin: 0;
padding: 0;
}
.section_1 {
margin: 0;
padding: 0;
}
.section_1 h1{
font-family: Tahoma;
font-size: 18px;
color: #d3c3ba;
margin: 0 0 10px 0;
padding: 0;
}
.section_1 h2{
font-family: Tahoma;
font-size: 12px;
color: #a8958a;
background: url(healthy-lifestyle-images/bullet.jpg) left no-repeat;
margin: 0 0 8px 0;
padding: 0 0 2px 10px;
}
.section_1 p{
font-family: Tahoma;
font-size: 11px;
color: #aca099;
text-align: justify;
margin: 0 0 10px 0;
padding: 0;
}
.section_1 p b{
color: #db8e61;
font-weight: bold;
}
.section_1 img{
float: left;
margin: 0 10px 10px 0;
padding: 0;
}
.section_1 .line{
clear: both;
border-bottom: 1px solid #443024;
margin: 0 0 10px 0;
padding: 0;
}
#content_right {
float: right;
width: 385px;
margin: 0;
padding: 0;
}
.section_2 {
width: 385px;
margin:0;
padding:0;
}
.section_2_top {
width: 385px;
height: 11px;
background: url(healthy-lifestyle-images/section_2_top.jpg) no-repeat;
margin: 0;
padding: 0;
}
.section_2_bottom {
width: 385px;
height: 14px;
background: url(healthy-lifestyle-images/section_2_bottom.jpg) no-repeat;
margin: 0;
padding: 0;
}
.section_2_mid {
width: 335px;
background: #402e24;
margin: 0;
padding: 0 25px;
}
* html .section_2_mid {
margin-top: -4px;
}
.section_2_mid h1{
font-family: Tahoma;
font-size: 18px;
color: #d3c3ba;
margin: 0;
padding: 0;
}
.section_2_mid p{
font-family: Tahoma;
font-size: 11px;
color: #aca099;
text-align: justify;
margin: 0;
padding: 0 0 5px 0;
}
* html .section_2_mid p{
padding: 0;
}
.section_2_mid p b{
color: #db8e61;
font-weight: bold;
margin: 0;
padding: 0;
}
.section_2_mid img{
float: left;
margin: 0 10px 3px 0;
padding: 0;
}
* html .section_2_mid img{
margin-bottom: -15px;
}
.section_2_sub {
width: 332px;
margin: 10px 0 0 0;
padding: 0;
}
.section_2_sub_top {
width: 332px;
height: 11px;
background: url(healthy-lifestyle-images/section_2_sub_top.jpg) no-repeat;
margin: 0;
padding: 0;
}
.section_2_sub_mid {
width: 302px;
background: #4a362a;
margin: 0;
padding: 0 15px;
}
* html .section_2_sub_mid {
margin-top: -4px;
}
.section_2_sub_bottom {
width: 332px;
height: 7px;
background: url(healthy-lifestyle-images/section_2_sub_bottom.jpg) no-repeat;
margin: 0;
padding: 0;
}
.cleaner_with_height {
clear: both;
height: 1px;
}
#footer {
color: #fff;
background: #11100f;
margin: 0;
padding: 5px 0;
text-align: center;
}
#footer a{
color: #fff;
text-decoration: none;
}
#footer a:hover{
color: #fff;
text-decoration: underline;
}
.cleaner {
clear:both;
height: 0px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){$('.fade').innerfade({ speed: 1000, timeout: 6000, type: 'random_start', containerheight: '1.5em'});});
</script>
<!--[if lt IE 7]>
<style type="text/css">
#header_bottom { behavior: url(iepngfix.htc); }
</style>
<![endif]-->
</head>
<body>
<div id="top_bg">
<div class="container">
<div id="header"> </div>
<div id="menu">
<ul>
<li class="current"><a href="http://www.free-css.com/" ><b>MAIN PAGE</b></a></li>
<li><a href="http://www.free-css.com/"><b>ABOUT US</b></a></li>
<li><a href="http://www.free-css.com/"><b>HEALTHY LIFE</b></a></li>
<li><a href="http://www.free-css.com/"><b>HEALTHY NEWS</b></a></li>
<li><a href="http://www.free-css.com/"><b>CONTACT US</b></a></li>
</ul>
</div>
<div class="cleaner"></div>
</div>
</div>
<!-- End Of Top BG -->
<div id="mid_1">
<div class="container">
<div class="news">
<h1>Welcome to Healthy Lifestyle</h1>
<div class="fade">
<p> This website layout is provided by TemplateMo.com as a Free CSS Template. You may use this template for any of your websites. Credits go to photovaco.com for photos and medienfreunde.com for JQuery Inner Fade. Quisque in diam a justo condimentum molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet. Vivamus leo velit, convallis id, ultrices sit amet.</p>
<p>Lorem ipsum dolor sit ame, consectetur adipiscing elit. In tincidunt, nulla id accumsan ultrices, justo turpis adipiscing nunc, ac pellentesque ipsum massa id dui. Vivamus ut dui ut mi lobortis sodales. Nullam sollicitudin justo ut lorem. Vivamus tempor est ac nunc. Phasellus mattis. Ut placerat. Etiam condimentum posuere magna. Integer sit amet nunc at nisi porta auctor. Nam mattis convallis dui. Aliquam erat volutpat.</p>
<p>Proin quis erat. Nam suscipit dui non ante. Donec sed nulla. Donec sed felis sit amet nunc accumsan mattis. Sed consequat, odio eu adipiscing varius, felis arcu mattis ante, ut viverra sapien massa nec ante. Sed ut metus eget nibh lobortis luctus. Praesent auctor. Nulla facilisi.Etiam pellentesque. Integer fringilla urna ut nunc. Praesent quis ligula. Nunc vitae lacus at ipsum dignissim cursus. Cras tincidunt.</p>
</div>
<!-- End Of Fade -->
</div>
<!-- End Of News -->
</div>
<!-- End Of container -->
</div>
<!-- End Of Middle 1 -->
<div id="mid_2">
<div class="container">
<div id="content">
<div id="content_left">
<div class="section_1">
<h1>Mental Exercises</h1>
<h2>Vestibulum auctor odio eget ante</h2>
<p><img alt="" src="healthy-lifestyle-images/thumb_1.jpg" /><b>Nulla enim nibh, con sec tet uer sed,</b> ves tib ulum ele men tum, sag ittis nec, diam. Mau ris bla ndit vehicula neque. Proin consectetuer. Donec venenatis.</p>
<div class="line"></div>
<h2>Mauris et elit quis mauris aliquet luctus</h2>
<p><img alt="" src="healthy-lifestyle-images/thumb_2.jpg" /><b>Cras urna metus, feugiat non, consectetuer quis,</b> pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla.</p>
<div class="line"></div>
<h2>Praesent mattis varius quam</h2>
<p><img alt="" src="healthy-lifestyle-images/thumb_5.jpg" /><b>Nulla fac ilisi Etiam pell ente sque</b> Integer fri ngi plla urna ut nunc. Praesent quis ligula. Nunc vitae lacus at ipsum dignissim cursus.</p>
<div class="cleaner"></div>
</div>
</div>
<!-- End Of Content left -->
<div id="content_right">
<div class="section_2">
<div class="section_2_top"></div>
<div class="section_2_mid">
<h1>Physical Exercises</h1>
<br />
<p><b>Aliquam pretium porta odio.</b> Fusce quis diam sit amet tortor luctus pellentesque. Donec accumsan urna non elit tristique mattis. Vivamus fermentum orci viverra nisl. In nec magna id ipsum aliquam dictum.</p>
<div class="section_2_sub">
<div class="section_2_sub_top"></div>
<div class="section_2_sub_mid">
<p><img alt="" src="healthy-lifestyle-images/thumb_3.jpg" /><a href="http://www.free-css.com/">Cura bitur nec odio.</a> Pha se llus tin cid unt, tor tor lac inia blandit commodo, nunc augue mattis eros, ut convallis est augue vel orci.</p>
<div class="cleaner"></div>
</div>
<div class="section_2_sub_bottom"></div>
</div>
<div class="section_2_sub">
<div class="section_2_sub_top"></div>
<div class="section_2_sub_mid">
<p><img alt="" src="healthy-lifestyle-images/thumb_4.jpg" /><a href="http://www.free-css.com/">Nunc ante erat, varius eu,</a> luctus ac, tri sti que nec, jus to. Fusce dig nis sim eros ac mas sa. Phas ellus ligula augue, ves tibu.</p>
<div class="cleaner"></div>
</div>
<div class="section_2_sub_bottom"></div>
</div>
</div>
<div class="section_2_bottom"></div>
</div>
</div>
<!-- End Of Content right -->
<div class="cleaner"></div>
</div>
<!-- End Of Content -->
</div>
<!-- End Of Container -->
</div>
<!-- End Of Middle 2 -->
<div id="footer"> Copyright © 2024 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
</body>
</html>
Related examples in the same category