黄色简洁风格响应式性感女性塑身锻炼企业网站板



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 42 15



模板描述:黄色 简洁风格 响应式 性感女性塑身锻。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用性感女性塑身锻行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<link href="css/popup-box.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/simpleLightbox.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href='http://fonts.googleapis.comcss?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countup.js"></script>
<script src="js/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script src="js/simpleLightbox.js"></script>
<script type="text/javascript" src="js/jQuery.yuukCountdown.js" ></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

3. HTML代码

<!-- banner -->
	<div class="banner">
		<div class="center-container">
			<div class="w3_agile_header">
				<nav class="navbar navbar-default">
					<div class="navbar-header navbar-left">
						<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 navbar-right" id="bs-example-navbar-collapse-1">
						<nav class="link-effect-14" id="link-effect-14">
							<ul class="nav navbar-nav">
								<li class="active"><a href="index.html"><span>Home</span></a></li>
								<li><a href="#services" class="scroll"><span>Services</span></a></li>
								<li><a href="#gallery" class="scroll"><span>Gallery</span></a></li>
								<li><a href="#classes" class="scroll"><span>Classes</span></a></li>
								<li><a href="#mail" class="scroll"><span>Mail Us</span></a></li>
							</ul>
							<div class="agile_header_right">
								<ul>
									<li><i class="fa fa-phone" aria-hidden="true"></i>+0 (123) 345 543</li>
									<li><i class="fa fa-envelope-o" aria-hidden="true"></i><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</nav>
			</div>
			<div class="w3_agileits_logo">
				<h1><a href="index.html">Lotus point <span>yoga club</span></a></h1>
			</div>
			<div class="agileits_w3layouts_banner_info">
				<h2>yoga teaches you how to listen your body</h2>
				<p>Subscribe to our newsletter to get the latest scoop right to your inbox.</p>
				<form action="#" method="post"> 
					<input type="email" name="email" placeholder="Enter your Email..." required="">
					<input type="submit" value="Subscribe">
				</form>
			</div>
		</div>
	</div>
<!-- //banner -->
<!-- banner-bottom -->
	<div id="services" class="banner-bottom">
		<div class="container">
			<h4 class="w3l_lotus">lotus point</h4>
			<h3 class="w3layouts_head">welcome to our <span>lotus point</span></h3>
			<p class="w3_para">Yoga is the practice of quieting the mind.</p>
			<div class="w3ls_banner_bottom_grids">
				<div class="col-md-4 agileits_banner_bottom_grid_left">
					<div class="agileinfo_banner_bottom_grid_l_grid">
						<i class="fa fa-heart-o" aria-hidden="true"></i>
					</div>
					<h4>balance body & mind</h4>
					<p>Ut purus ipsum, facilisis sit amet sollicitudin eget, 
						maximus convallis metus. Sed tristique dapibus dapibus.</p>
				</div>
				<div class="col-md-4 agileits_banner_bottom_grid_left">
					<div class="agileinfo_banner_bottom_grid_l_grid">
						<i class="fa fa-fire" aria-hidden="true"></i>
					</div>
					<h4>healthy daily life</h4>
					<p>Ut purus ipsum, facilisis sit amet sollicitudin eget, 
						maximus convallis metus. Sed tristique dapibus dapibus.</p>
				</div>
				<div class="col-md-4 agileits_banner_bottom_grid_left">
					<div class="agileinfo_banner_bottom_grid_l_grid">
						<i class="fa fa-users" aria-hidden="true"></i>
					</div>
					<h4>yoga month challenge</h4>
					<p>Ut purus ipsum, facilisis sit amet sollicitudin eget, 
						maximus convallis metus. Sed tristique dapibus dapibus.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //banner-bottom -->
<!-- services-bottom -->
	<div class="services-bottom">
		<div class="col-md-7 wthree_services_bottom_left">
			<div class="wthree_services_bottom_left_grid">
				<div class="col-md-6 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/1.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>living skilfully by making yoga</h3>
						</div>
					</div>
				</div>
				<div class="col-md-6 w3_agileits_services_bottom_r_grid">
					<h4>yoga is a way to freedom</h4>
					<p>Praesent vulputate ipsum a velit tempor convallis. 
						Phasellus ultrices lorem eget erat tempus commodo efficitur odio.</p>
					<div class="agileits_w3layouts_more">
						<a href="#" data-toggle="modal" data-target="#myModal">More<i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="wthree_services_bottom_left_grid">
				<div class="col-md-6 w3_agileits_services_bottom_r_grid">
					<h4>yoga for real energy</h4>
					<p>Praesent vulputate ipsum a velit tempor convallis. 
						Phasellus ultrices lorem eget erat tempus commodo efficitur odio.</p>
					<div class="agileits_w3layouts_more">
						<a href="#" data-toggle="modal" data-target="#myModal">More<i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
					</div>
				</div>
				<div class="col-md-6 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/2.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>inspiration for joyful living</h3>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="col-md-5 wthree_services_bottom_right">
			<section class="slider">
				<div class="flexslider">
					<ul class="slides">
						<li>
							<div class="w3_agile_services_bottom_right_grid">
								<p class="w3layouts_head_slide">Yoga <span>Practice</span></p>
							</div>
						</li>
						<li>
							<div class="w3_agile_services_bottom_right_grid1">
								<p class="w3layouts_head_slide">Yoga <span>Practice</span></p>
							</div>
						</li>
						<li>
							<div class="w3_agile_services_bottom_right_grid2">
								<p class="w3layouts_head_slide">Yoga <span>Practice</span></p>
							</div>
						</li>
					</ul>
				</div>
			</section>
		</div>
		<div class="clearfix"> </div>
	</div>
<!-- //services-bottom -->
<!-- team -->
	<div class="banner-bottom">
		<div class="container">
			<h4 class="w3l_lotus">lotus team</h4>
			<h3 class="w3layouts_head">meet our <span>crew</span></h3>
			<p class="w3_para">Yoga is the practice of quieting the mind.</p>
			<div class="w3ls_banner_bottom_grids">
				<div class="col-md-3 w3_agile_team_grid">
					<div class="w3layouts_team_grid">
						<img src="images/6.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_team_grid_pos">
							<div class="wthree_text">
								<ul class="agileits_social_list">
									<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
									<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<h4>Glendell Paul</h4>
					<p>Head Instructor</p>
				</div>
				<div class="col-md-3 w3_agile_team_grid">
					<div class="w3layouts_team_grid">
						<img src="images/9.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_team_grid_pos">
							<div class="wthree_text">
								<ul class="agileits_social_list">
									<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
									<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<h4>Dania Ruthor</h4>
					<p>Instructor</p>
				</div>
				<div class="col-md-3 w3_agile_team_grid">
					<div class="w3layouts_team_grid">
						<img src="images/8.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_team_grid_pos">
							<div class="wthree_text">
								<ul class="agileits_social_list">
									<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
									<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<h4>Gambria Rich</h4>
					<p>Instructor</p>
				</div>
				<div class="col-md-3 w3_agile_team_grid">
					<div class="w3layouts_team_grid">
						<img src="images/7.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_team_grid_pos">
							<div class="wthree_text">
								<ul class="agileits_social_list">
									<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
									<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
									<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<h4>Laura Carl</h4>
					<p>Trikonasana Instructor</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //team -->
<!-- register -->
	<div class="agileits_w3layouts_book">
		<div class="container">
			<div class="agileits_w3layouts_book_left">
				<h3>fitness improve your style register here...</h3>
			</div>
			<div class="agileits_w3layouts_book_right">
				<a href="#small-dialog" class="play-icon popup-with-zoom-anim">Register</a>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="register">
		<div class="container">
			<div class="agile_register_grid">
				<h3>world yoga day celebrations</h3>
				<p>Donec in molestie mi. Praesent porta at arcu et laoreet. Proin 
					laoreet felis vitae lectus luctus fermentum at et lacus. Aliquam 
					feugiat libero et odio iaculis.</p>
				<h4>we will celebrate on</h4>
				<h5>21 June 2017</h5>
			</div>
			<div class="countdown agile">
				<div class="countdown-time agileits_w3layouts">
					<ul class="clearfix w3_agileits" id="js-countDown">
						<li class="item"><i class="day">00</i><span>days</span></li>
						<li class="blank">:</li>
						<li class="item"><i class="hour">00</i><span>hours</span></li>
						<li class="blank">:</li>
						<li class="item"><i class="minute">00</i><span>minutes</span></li>
						<li class="blank">:</li>
						<li class="item"><i class="second">00</i><span>seconds</span></li>
						<li class="blank">:</li>
						<li class="item"><i class="ms">00</i><span>millisec</span></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
<!-- //register -->
<!-- gallery -->	
	<div id="gallery" class="gallery">
		<div class="container">
			<h4 class="w3l_lotus">lotus Gallery</h4>
			<h3 class="w3layouts_head">yoga for <span>everyone</span></h3>
			<p class="w3_para">Yoga is the practice of quieting the mind.</p>
		</div>
		<div class="w3ls_banner_bottom_grids">
			<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
				<ul id="myTab" class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">All</a></li>
					<li role="presentation"><a href="#group" role="tab" id="group-tab" data-toggle="tab" aria-controls="group">Group</a></li>
					<li role="presentation"><a href="#asana" role="tab" id="asana-tab" data-toggle="tab" aria-controls="asana">Asana's</a></li>
					<li role="presentation"><a href="#products" role="tab" id="products-tab" data-toggle="tab" aria-controls="products">Products</a></li>
				</ul>
				<div id="myTabContent" class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/11.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/11.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/1.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/1.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/2.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/2.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/12.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/12.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/13.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/13.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/14.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/14.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/15.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/15.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/16.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/16.jpg" alt=" " class="img-responsive" />
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="group" aria-labelledby="group-tab">
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/11.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/11.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/1.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/1.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/12.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/12.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/13.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/13.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="asana" aria-labelledby="asana-tab">
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/2.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/2.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/11.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/11.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/14.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/14.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/1.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/1.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/12.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/12.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/13.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/13.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="products" aria-labelledby="products-tab">
						<div class="col-md-3 w3layouts_gallery_grid">
							<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/15.jpg">
								<div class="w3layouts_team_grid">
									<img src="images/15.jpg" alt=" " class="img-responsive">
									<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
											<h4>Lotus Point</h4>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- //gallery -->
<!-- stats -->
	<div class="stats">
		<div class="container">
			<div class="col-md-3 w3_counter_grid">
				<div class="w3_agileits_counter_grid">
					<i class="fa fa-umbrella" aria-hidden="true"></i>
				</div>
				<p class="counter">1,965</p>
				<h3>Work shop</h3>
			</div>
			<div class="col-md-3 w3_counter_grid">
				<div class="w3_agileits_counter_grid">
					<i class="fa fa-users" aria-hidden="true"></i>
				</div>
				<p class="counter">432</p>
				<h3>teachers</h3>
			</div>
			<div class="col-md-3 w3_counter_grid">
				<div class="w3_agileits_counter_grid">
					<i class="fa fa-comments" aria-hidden="true"></i>
				</div>
				<p class="counter">690</p>
				<h3>feedbacks</h3>
			</div>
			<div class="col-md-3 w3_counter_grid">
				<div class="w3_agileits_counter_grid">
					<i class="fa fa-book" aria-hidden="true"></i>
				</div>
				<p class="counter">124</p>
				<h3>Classes</h3>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //stats -->
<!-- stats -->
		<script>
			$('.counter').countUp();
		</script>
<!-- //stats -->
<!-- classes -->
	<div id="classes" class="banner-bottom">
		<div class="container">
			<h4 class="w3l_lotus">lotus Classes</h4>
			<h3 class="w3layouts_head">new classes from <span>lotus point</span></h3>
			<p class="w3_para">Yoga is the practice of quieting the mind.</p>
			<div class="w3layouts_classes_grids">
				<ul id="flexiselDemo1">	
					<li>
						<div class="w3_agile_class_grid">
							<div class="w3layouts_team_grid agileits_w3layouts_class">
								<img src="images/1.jpg" alt=" " class="img-responsive">
								<div class="w3layouts_team_grid_pos">
									<div class="wthree_text">
										<a class="agile_class" href="#" data-toggle="modal" data-target="#myModal">Learn More</a>
									</div>
								</div>
								<div class="agileits_w3layouts_class_pos">
									<ul>
										<li><i class="fa fa-calendar-o" aria-hidden="true"></i>25/3/2017</li>
										<li><i class="fa fa-comments-o" aria-hidden="true"></i><a href="#">15</a></li>
										<li><i class="fa fa-share" aria-hidden="true"></i><a href="#">12</a></li>
									</ul>
								</div>
							</div>
							<div class="w3_agileits_class_grid">	
								<p>Pellentesque id placerat quam. Quisque at auctor ipsum.</p>
								<h4><a href="#" data-toggle="modal" data-target="#myModal">ultricies libero lobortis</a></h4>
								<h5>John Abraham</h5>
								<div class="w3_agileits_class_grid_pos">
									<img src="images/2.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="w3_agile_class_grid">
							<div class="w3layouts_team_grid agileits_w3layouts_class">
								<img src="images/15.jpg" alt=" " class="img-responsive">
								<div class="w3layouts_team_grid_pos">
									<div class="wthree_text">
										<a class="agile_class" href="#" data-toggle="modal" data-target="#myModal">Learn More</a>
									</div>
								</div>
								<div class="agileits_w3layouts_class_pos">
									<ul>
										<li><i class="fa fa-calendar-o" aria-hidden="true"></i>26/3/2017</li>
										<li><i class="fa fa-comments-o" aria-hidden="true"></i><a href="#">17</a></li>
										<li><i class="fa fa-share" aria-hidden="true"></i><a href="#">10</a></li>
									</ul>
								</div>
							</div>
							<div class="w3_agileits_class_grid">	
								<p>Pellentesque id placerat quam. Quisque at auctor ipsum.</p>
								<h4><a href="#" data-toggle="modal" data-target="#myModal">auctor eget sem feugiat</a></h4>
								<h5>Amelin Carl</h5>
								<div class="w3_agileits_class_grid_pos">
									<img src="images/3.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="w3_agile_class_grid">
							<div class="w3layouts_team_grid agileits_w3layouts_class">
								<img src="images/13.jpg" alt=" " class="img-responsive">
								<div class="w3layouts_team_grid_pos">
									<div class="wthree_text">
										<a class="agile_class" href="#" data-toggle="modal" data-target="#myModal">Learn More</a>
									</div>
								</div>
								<div class="agileits_w3layouts_class_pos">
									<ul>
										<li><i class="fa fa-calendar-o" aria-hidden="true"></i>27/3/2017</li>
										<li><i class="fa fa-comments-o" aria-hidden="true"></i><a href="#">19</a></li>
										<li><i class="fa fa-share" aria-hidden="true"></i><a href="#">18</a></li>
									</ul>
								</div>
							</div>
							<div class="w3_agileits_class_grid">	
								<p>Pellentesque id placerat quam. Quisque at auctor ipsum.</p>
								<h4><a href="#" data-toggle="modal" data-target="#myModal">blandit dolor venenatis</a></h4>
								<h5>Thomas Richard</h5>
								<div class="w3_agileits_class_grid_pos">
									<img src="images/5.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="w3_agile_class_grid">
							<div class="w3layouts_team_grid agileits_w3layouts_class">
								<img src="images/14.jpg" alt=" " class="img-responsive">
								<div class="w3layouts_team_grid_pos">
									<div class="wthree_text">
										<a class="agile_class" href="#" data-toggle="modal" data-target="#myModal">Learn More</a>
									</div>
								</div>
								<div class="agileits_w3layouts_class_pos">
									<ul>
										<li><i class="fa fa-calendar-o" aria-hidden="true"></i>28/3/2017</li>
										<li><i class="fa fa-comments-o" aria-hidden="true"></i><a href="#">21</a></li>
										<li><i class="fa fa-share" aria-hidden="true"></i><a href="#">18</a></li>
									</ul>
								</div>
							</div>
							<div class="w3_agileits_class_grid">	
								<p>Pellentesque id placerat quam. Quisque at auctor ipsum.</p>
								<h4><a href="#" data-toggle="modal" data-target="#myModal">cursus urna urna quis</a></h4>
								<h5>Laura Lii</h5>
								<div class="w3_agileits_class_grid_pos">
									<img src="images/4.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
<!-- //classes -->
<!-- testimonials -->
	<div class="testimonials">
		<div class="container">
			<h4 class="w3l_lotus">lotus Point</h4>
			<h3 class="w3layouts_head wthree_head">Our <span>Customers</span> Say's</h3>
			<p class="w3_para">Yoga is the practice of quieting the mind.</p>
			<div class="w3ls_banner_bottom_grids agileinfo_testimonial_grids">
				<section class="center slider">
					<div class="agileits_testimonial_grid">
						<div class="w3l_testimonial_grid">
							<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
								non laoreet dolor.</p>
							<h4>Laura Lii</h4>
							<h5>Student</h5>
							<div class="w3l_testimonial_grid_pos">
								<img src="images/4.png" alt=" " class="img-responsive" />
							</div>
						</div>
					</div>
					<div class="agileits_testimonial_grid">
						<div class="w3l_testimonial_grid">
							<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
								non laoreet dolor.</p>
							<h4>John Abraham</h4>
							<h5>Student</h5>
							<div class="w3l_testimonial_grid_pos">
								<img src="images/2.png" alt=" " class="img-responsive" />
							</div>
						</div>
					</div>
					<div class="agileits_testimonial_grid">
						<div class="w3l_testimonial_grid">
							<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
								non laoreet dolor.</p>
							<h4>Amelin Carl</h4>
							<h5>Student</h5>
							<div class="w3l_testimonial_grid_pos">
								<img src="images/3.png" alt=" " class="img-responsive" />
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
<!-- //testimonials -->
<!-- mail -->
	<div id="mail" class="banner-bottom">
		<div class="container">
			<h4 class="w3l_lotus">lotus Mail</h4>
			<h3 class="w3layouts_head">Get in <span>touch</span> with us</h3>
			<p class="w3_para">Yoga is the practice of quieting the mind.</p>
			<div class="w3ls_banner_bottom_grids">
				<div class="col-md-6 w3layouts_mail_grid_left">
					<div class="agileits_mail_grid_left">
						<h3>Contact Info</h3>
						<ul>
							<li><label><i class="fa fa-home" aria-hidden="true"></i></label>1234k Avenue, 4th block, New York City.</li>
							<li><label><i class="fa fa-envelope-o" aria-hidden="true"></i></label><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
							<li><label><i class="fa fa-phone" aria-hidden="true"></i></label>+1234 567 567</li>
						</ul>
					</div>
					<div class="agileits_w3layouts_socila_mail">
						<h3>Share us on social</h3>
						<ul>
							<li><a href="#" class="w3_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
							<li><a href="#" class="w3l_dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
							<li><a href="#" class="agileits_pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
							<li><a href="#" class="w3ls_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="w3_agileits_map">
		<iframe src="#" style="border:0"></iframe>
		<div class="wthree_mail_pos">
			<form action="#" method="post">
				<div class="col-md-10 w3_agileits_contact_left">
					<h3>Contact Us</h3>
					<input type="text" name="Name" placeholder="Your Name" required="">
					<input type="email" name="Email" placeholder="Your Email" required="">
					<input type="text" name="Phone" placeholder="Phone Number" required="">
					<textarea placeholder="Your text here..." required=""></textarea>
				</div>
				<div class="col-md-2 w3_agileits_contact_right">
					<input type="submit" value="">
				</div>
				<div class="clearfix"> </div>
			</form>
		</div>
	</div>
<!-- //mail -->
<!-- copyright -->
	<div class="w3_agile_copyright">
		<div class="container">
			<p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.51qianduan.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		</div>
	</div>
<!-- //copyright -->
<!-- carousal -->
	<script type="text/javascript">
		$(document).on('ready', function() {
		  $(".center").slick({
			dots: true,
			infinite: true,
			centerMode: true,
			slidesToShow: 2,
			slidesToScroll: 2,
			responsive: [
				{
				  breakpoint: 768,
				  settings: {
					arrows: true,
					centerMode: false,
					slidesToShow: 2
				  }
				},
				{
				  breakpoint: 480,
				  settings: {
					arrows: true,
					centerMode: false,
					centerPadding: '40px',
					slidesToShow: 1
				  }
				}
			 ]
		  });
		});
	</script>
<!-- //carousal -->
<!-- flexisel -->
	<script type="text/javascript">
		$(window).load(function() {
			$("#flexiselDemo1").flexisel({
				visibleItems: 3,
				animationSpeed: 1000,
				autoPlay: false,
				autoPlaySpeed: 3000,    		
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
				responsiveBreakpoints: { 
					portrait: { 
						changePoint:480,
						visibleItems: 1
					}, 
					landscape: { 
						changePoint:640,
						visibleItems:2
					},
					tablet: { 
						changePoint:768,
						visibleItems: 3
					}
				}
			});
		});
	</script>
<!-- //flexisel -->
<!-- Lightbox -->
	<script>
		$('.w3layouts_gallery_grid a').simpleLightbox();
	</script>
<!-- //Lightbox -->
<!-- countdown -->
    <script>
        $(function(){
            $('#js-countDown').yuukCountDown({
                starttime: '2016/12/17 00:00:00',
                endtime: '2018/6/21 10:59:59',
                notStartCallBack: function(time){
                    console.log("Ready");
                },
                startCallBack: function(time){
                    console.log("Running");
                },
                endCallBack: function(time){
                    console.log("Complete");
                }
            });
        });
    </script>
<!-- //countdown -->
<!-- pop-up-box -->
	<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>
	<div id="small-dialog" class="mfp-hide w3ls_small_dialog wthree_pop">
		<h3>Register Here...</h3>		
		<div class="agileits_modal_body">
			<form action="#" method="post">
				<div class="col-md-6 wthree_pop_left">
					<label>Your Name</label>
					<div class="agileits_w3layouts_user">
						<i class="fa fa-user" aria-hidden="true"></i>
						<input type="text" name="Your Name" placeholder=" " required="">
					</div>
					<label>Your Email</label>
					<div class="agileits_w3layouts_user">
						<i class="fa fa-envelope-o" aria-hidden="true"></i>
						<input type="email" name="Email" placeholder=" " required="">
					</div>
				</div>
				<div class="col-md-6 wthree_pop_left">
					<label>Phone Number</label>
					<div class="agileits_w3layouts_user">
						<i class="fa fa-phone" aria-hidden="true"></i>
						<input type="text" name="Phone Number" placeholder=" " required="">
					</div>
					<label>Choose your group</label>
					<div class="agileits_w3layouts_user">
						<i class="fa fa-users" aria-hidden="true"></i>
						<select class="w3_agileits_select" onchange="change_country(this.value)" required="">
							<option value="">---</option>
							<option value="">Any Time</option>
							<option value="">Morning Group</option>         
							<option value="">Evening Group</option>
						</select>
					</div>
				</div>
				<div class="clearfix"> </div>
				<div class="wthree_pop_up">
					<div class="wthree_pop_up_grid">
						<label>Choose your class</label>
						<div class="agileits_w3layouts_user agileits_user">
							<i class="fa fa-eye" aria-hidden="true"></i>
							<select class="w3_agileits_select agileinfo_select" onchange="change_country(this.value)" required="">
								<option value="">---</option>
								<option value="">Hatha Yoga</option>
								<option value="">Sadhana Yoga</option>
								<option value="">Kundalini Yoga</option>
								<option value="">Ashtanga Yoga</option>
								<option value="">Advanced Flow</option>
								<option value="">Morning Flow</option>
								<option value="">Yoga Dance</option>
							</select>
						</div>
					</div>
					<div class="wthree_pop_up_grid">
						<label>Comments here..</label>
						<textarea placeholder="" required=""></textarea>
					</div>
				</div>
				<input type="submit" value="Submit Form">
			</form>
		</div>
	</div>
<!-- //pop-up-box -->
<!-- bootstrap-pop-up -->
	<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					Lotus Point
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div>
				<section>
					<div class="modal-body">
						<img src="images/1.jpg" alt=" " class="img-responsive" />
						<p>Ut enim ad minima veniam, quis nostrum 
							exercitationem ullam corporis suscipit laboriosam, 
							nisi ut aliquid ex ea commodi consequatur? Quis autem 
							vel eum iure reprehenderit qui in ea voluptate velit 
							esse quam nihil molestiae consequatur, vel illum qui 
							dolorem eum fugiat quo voluptas nulla pariatur.
							<i>" Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
								esse quam nihil molestiae consequatur.</i></p>
					</div>
				</section>
			</div>
		</div>
	</div>
<!-- //bootstrap-pop-up -->
<!-- flexSlider -->
	<script type="text/javascript">
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
  </script>
<!-- //flexSlider -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->
<!-- start-smooth-scrolling -->
<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-smooth-scrolling -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
			$().UItoTop({ easingType: 'easeOutQuart' });
			});
	</script>
<!-- //here ends scrolling icon -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到