<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!-- for-mobile-apps -->
<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="Tennis Club Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<!-- FlexSlider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- FlexSlider -->
<!-- script -->
<script src="js/jquery.chocolat.js"></script>
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
<!--light-box-files-->
<script type="text/javascript" charset="utf-8">
$(function() {
$('.gallery-grid a').Chocolat();
});
</script>
<!-- script -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<link href='http://fonts.useso.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Righteous' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- header -->
<div class="header">
<div class="container">
<div class="header-left">
<a href="index.html">Tennis Club <span>Just Play With Us</span></a>
</div>
<div class="header-left1">
<p>Cupidatat non proident.</p>
</div>
<div class="header-right">
<ul>
<li><span>Tennis</span> / Ass.</li>
<li><a href="#contact" class="scroll">Contact Us</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="header-nav">
<div class="container">
<div class="header-nav-bottom">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#gallery" class="scroll">Photo Gallery</a></li>
<li><a href="#contact" class="scroll">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</div>
<!-- //header -->
<!-- banner -->
<div class="banner">
<div class="container">
<div class="banners-info">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="banner1">
</div>
</li>
<li>
<div class="banner2">
</div>
</li>
<li>
<div class="banner3">
</div>
</li>
</ul>
</div>
</section>
<!-- script -->
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- //script -->
</div>
</div>
</div>
<!-- //banner -->
<!-- banner-bottom -->
<div id="about" class="banner-bottom">
<div class="container">
<h3>Welcome To Our Tennis Club !</h3>
<p class="ex">To take a trivial example, which of us ever undertakes.</p>
<div class="banner-bottom-grids">
<div class="col-md-4 banner-bottom-grid">
<div class="banner-bottom-grid-rel">
<p>01.</p>
<div class="banner-bottom-grid-rel-pos">
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.</p>
<div class="more">
<a href="#" class="hvr-overline-from-right">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 banner-bottom-grid">
<div class="banner-bottom-grid-rel">
<p>02.</p>
<div class="banner-bottom-grid-rel-pos">
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.</p>
<div class="more">
<a href="#" class="hvr-overline-from-right">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 banner-bottom-grid">
<div class="banner-bottom-grid-rel">
<p>03.</p>
<div class="banner-bottom-grid-rel-pos">
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.</p>
<div class="more">
<a href="#" class="hvr-overline-from-right">Read More</a>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //banner-bottom -->
<!-- features -->
<div class="features">
<div class="container">
<div class="features-grids">
<div class="features-grid-left">
<h1>aut perferendis maiores</h1>
<h2>Hic tenetur a sapiente delectus</h2>
<p>No one rejects, dislikes, or avoids pleasure itself, because it is
pleasure, but because those who do not know how to pursue pleasure
rationally encounter consequences that are extremely painful.</p>
<ul>
<li><a href="#" class="facebook"></a></li>
<li><a href="#" class="in"></a></li>
<li><a href="#" class="p"></a></li>
<li><a href="#" class="dribble"></a></li>
</ul>
</div>
<div class="features-grid-right">
<div class="features-grid-right-text">
<h4>Tennis Player</h4>
<p>Encounter consequences that are extremely painful.</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //features -->
<!-- services -->
<div id="services" class="services">
<div class="container">
<h3>Services</h3>
<p class="ex">To take a trivial example, which of us ever undertakes.</p>
<div class="services-grids">
<div class="col-md-4 services-grid">
<div class="col-xs-4 services-grid-left">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</div>
<div class="col-xs-8 services-grid-right">
<h4>sint et molestiae</h4>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 servi