<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>The Gym for Iphone, Android & Smartphone Mobile Website Template | Pricing :: w3layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Gym Iphone web template, Andriod web template, Smartphone 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="smartphone/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="smartphone/js/jquery.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script src="smartphone/js/jquery.magnific-popup.js" type="text/javascript"></script>
<link href="smartphone/css/magnific-popup.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
</head>
<body>
<div class="wrap">
<!-- start header_bottom -->
<div class="header-bottom">
<div class="header-bottom_left">
<i class="phone"> </i><span>1-200-346-2986</span>
</div>
<div class="social">
<ul>
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="pinterest"><a href="#"><span> </span></a></li>
<li class="google"><a href="#"><span> </span></a></li>
<li class="tumblr"><a href="#"><span> </span></a></li>
<li class="instagram"><a href="#"><span> </span></a></li>
<li class="rss"><a href="#"><span> </span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!-- start menu -->
<div class="menu">
<div class="header-top">
<div class="logo">
<a href="index.html"><img src="smartphone/images/logo.png" alt="" /></a>
</div>
<nav class="nav">
<a href="#" id="w3-menu-trigger"> </a>
<ul class="nav-list nav" id="nav">
<li class="nav-item current"><a href="index.html">Home</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item"><a href="trainers.html">Trainers</a></li>
<li class="nav-item"><a href="classes.html">Classes</a></li>
<li class="nav-item"><a href="blog.html">Blog</a></li>
<li class="nav-item"><a href="pricing.html">Pricing</a></li>
<li class="nav-item"><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="clear"> </div>
<script src="smartphone/js/responsive.menu.js"></script>
</div>
</div>
<!-- end menu -->
<div class="main">
<div class="about_banner_img"><img src="smartphone/images/price.jpg" alt=""/></div>
<div class="about_banner_wrap">
<h1 class="m_11">Pricing</h1>
</div>
<div class="border"> </div>
<div class="row price_plans">
<h3 class="m_2">Pricing and plans</h3>
<div class="price_plans_box">
<div class="col-md-3">
<ul class="price1">
<h4>One day training</h4>
<h3>Free</h3>
<ul class="price_list">
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<a class="popup-with-zoom-anim" href="#small-dialog"><li class="price_but">Buy Now</li></a>
<!-----pop-up-grid---->
<div id="small-dialog" class="mfp-hide">
<div class="pop_up">
<div class="payment-online-form-left">
<form>
<h4><span class="shipping"> </span>Shipping</h4>
<ul>
<li><input class="text-box-dark" type="text" value="Frist Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Frist Name';}"></li>
<li><input class="text-box-dark" type="text" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}"></li>
</ul>
<ul>
<li><input class="text-box-dark" type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"></li>
<li><input class="text-box-dark" type="text" value="Company Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Company Name';}"></li>
</ul>
<ul>
<li><input class="text-box-dark" type="text" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}"></li>
<li><input class="text-box-dark" type="text" value="Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Address';}"></li>
<div class="clear"> </div>
</ul>
<div class="clear"> </div>
<ul class="payment-type">
<h4><span class="payment"> </span> Payments</h4>
<li>
<span class="col_checkbox">
<input id="3" class="css-checkbox1" type="checkbox">
<label for="3" name="demo_lbl_1" class="css-label1"> </label>
<a class="visa" href="#"> </a>
</span>
</li>
<li>
<span class="col_checkbox">
<input id="4" class="css-checkbox2" type="checkbox">
<label for="4" name="demo_lbl_2" class="css-label2"> </label>
<a class="paypal" href="#"> </a>
</span>
</li>
<div class="clear"> </div>
</ul>
<ul>
<li><input class="text-box-dark" type="text" value="Card Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Card Number';}"></li>
<li><input class="text-box-dark" type="text" value="Name on card" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name on card';}"></li>
<div class="clear"> </div>
</ul>
<ul>
<li><input class="text-box-light hasDatepicker" type="text" id="datepicker" value="Expiration Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Expiration Date';}"><em class="pay-date"> </em></li>
<li><input class="text-box-dark" type="text" value="Security Code" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Security Code';}"></li>
<div class="clear"> </div>
</ul>
<ul class="payment-sendbtns">
<li><input type="reset" value="Cancel"></li>
<li><input type="submit" value="Process order"></li>
</ul>
<div class="clear"> </div>
</form>
</div>
</div>
</div>
<!-----pop-up-grid---->
<div class="clear"></div>
</ul>
</ul>
</div>
<div class="col-md-3">
<ul class="price1">
<h4>6 months membership</h4>
<h2 class="m_25">$33<small>.33</small></h2>
<ul class="price_list">
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<a class="popup-with-zoom-anim" href="#small-dialog"><li class="price_but">Buy Now</li></a>
<div class="clear"></div>
</ul>
</ul>
</div>
<div class="col-md-3">
<ul class="price2">
<h4>3 months membership</h4>
<h2 class="m_26">$59<small>.00</small></h2>
<ul class="price_list1">
<p><img src="smartphone/images/tick1.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick1.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick1.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick1.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick1.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<a class="popup-with-zoom-anim" href="#small-dialog"><li class="price_but1">Buy Now</li></a>
<div class="clear"></div>
</ul>
</ul>
</div>
<div class="col-md-3">
<ul class="price1">
<h4>12 months membership</h4>
<h2 class="m_25">$120<small>.00</small></h2>
<ul class="price_list">
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<p><img src="smartphone/images/tick.png" alt="" align="middle" width="16" height="14"/><a href="#">soluta nobis eleifend</a></p>
<a class="popup-with-zoom-anim" href="#small-dialog"><li class="price_but">Buy Now</li></a>
<div class="clear"></div>
</ul>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<ul class="price_question">
<li class="question_left"><h4>Have a question</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p></li>
<li class="question_right">1-300-248-2456</li>
<div class="clear"></div>
</ul>
<div class="footer-bottom">
<div class="row section group">
<div class="col-md-4">
<h4 class="m_7">Newsletter Signup</h4>
<p class="m_8">Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy.</p>
<form class="subscribe">
<input type="text" value="Insert Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Insert Email';}">
</form>
<div class="subscribe1">
<a href="#">Submit Email<i class="but_arrow"> </i></a>
</div>
</div>
<div class="col-md-4">
<div class="f-logo">
<img src="smartphone/images/logo.png" alt=""/>
</div>
<p class="m_9">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
<p class="address">Phone : <span class="m_10">(00) 222 666 444</span></p>
<p class="address">Email : <span class="m_10">info[at]mycompany.com</span></p>
</div>
<div class="col-md-4">
<div class="footer_lists">
<ul class="list">
<h4 class="m_7">Menu</h4>
<li><a href="#">About</a></li>
<li><a href="#">Trainers</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="list1">
<h4 class="m_7">Community</h4>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="copyright">
<div class="copy">
<p>© 2014 Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
</div>
<div class="social">
<ul>
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="pinterest"><a href="#"><span> </span></a></li>
<li class="google"><a href="#"><span> </span></a></li>
<li class="tumblr"><a href="#"><span> </span></a></li>
<li class="instagram"><a href="#"><span> </span></a></li>
<li class="rss"><a href="#"><span> </span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>