<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=">Fit Pro Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script src="js/jquery.min.js"> </script>
<!--webfonts-->
<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700|Orbitron:400,500,700,900' rel='stylesheet' type='text/css'>
<!--//webfonts-->
<!--Animation-->
<script src="js/wow.min.js"></script>
<link href="css/animate.css" rel='stylesheet' type='text/css' />
<script>
new WOW().init();
</script>
</head>
<body>
<!----- start-header---->
<div class="banner" id="home">
<div class="header-bottom">
<div class="fixed-header">
<div class="container">
<div class="logo">
<a href="index.html"><h1>Fit<span>Pro</span></h1></a>
</div>
<span class="menu"> </span>
<div class="top-menu">
<nav class="navigation">
<ul class="cl-effect-16">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="404.html">Services</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<ul>
</nav>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( ".top-menu" ).slideToggle( "slow", function() {
// Animation complete.
});
});
</script>
<!-- script for menu -->
<script>
$(document).ready(function() {
var navoffeset=$(".header-bottom").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header-bottom").addClass("fixed");
}else{
$(".header-bottom").removeClass("fixed");
}
});
});
</script>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="slider">
<div id="cbp-fwslider" class="cbp-fwslider">
<ul>
<li><a href="#"><img src="images/slide3.png" alt="img01"/></a></li>
<li><a href="#"><img src="images/slide2.png" alt="img02"/></a></li>
<li><a href="#"><img src="images/slide3.png" alt="img03"/></a></li>
<li><a href="#"><img src="images/slide2.png" alt="img04"/></a></li>
<li><a href="#"><img src="images/slide4.png" alt="img05"/></a></li>
</ul>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.cbpFWSlider.min.js"></script>
<script>
$( function() {
/*
- how to call the plugin:
$( selector ).cbpFWSlider( [options] );
- options:
{
// default transition speed (ms)
speed : 500,
// default transition easing
easing : 'ease'
}
- destroy:
$( selector ).cbpFWSlider( 'destroy' );
*/
$( '#cbp-fwslider' ).cbpFWSlider();
} );
</script>
<!--start-slide-bottom-->
<div class="banner-bottom wow bounceIn animated" data-wow-delay="0.4s">
<div class="container">
<h2>ABOUT</h2>
<p>Dolor nunc vule putateulr ips dol consec.Donec sem ertet laciniate ultricie upie disse utes comete dolo lectus. fgilla itollicil tua ludin dolor nec met quam accumsan. Dolore condime netus lullam utlacus adipiscing ipsum molestie euismod lore estibulum vel libero ipsum sit
amet sollicitudin ante. Aenean imperdiet aliquet hendreritunc interdum ullamcorper lec tuset pellentesqu enim interdum atuspendisse malesuada dignissim.</p>
</div>
</div>
<!--tainers-section-->
<div class="tainers-section">
<div class="container">
<!--sreen-gallery-cursual-->
<div class="col-md-3 tainer wow bounceInLeft" data-wow-delay="0.4s">
<h3>Our Trainers</h3>
<p>Why not give one of these popular classes a look?</p>
</div>
<div class="col-md-9 sreen-gallery-cursual wow bounceInRight" data-wow-delay="0.4s">
<!-- start content_slider -->
<div id="owl-demo" class="owl-carousel">
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t1.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t2.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t3.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t1.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t2.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t3.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t1.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t2.jpg" />
</div>
</div>
</div>
<div class="item">
<div class="item-grid">
<div class="item-pic">
<img src="images/t3.jpg" />
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<!--//sreen-gallery-cursual-->
</div>
</div>
<!-- requried-jsfiles-for owl -->
<link href="css/owl.carousel.css" rel="stylesheet">
<script src="js/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$("#owl-demo").o