黄色大气风格响应式固定导航健身企业网站模板



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

7 27 10



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

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/slicknav.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/typography.css">
<link rel="stylesheet" href="assets/css/default-css.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/responsive.css">

2. 引入JS

<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slicknav.min.js"></script>
<script src="assets/js/counterup.min.js"></script>
<script src="assets/js/waypoints.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/jquery.zoomslider.min.js"></script>
<script src="assets/js/jquery.firefly.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO_5h890WNShs_YLGivCBfs2U89qXR-7Y&callback=initMap"></script>
<script src="assets/js/scripts.js"></script>

3. HTML代码

<!--[if lt IE 8]>
		<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://www.51qianduan.com/" target="_blank">51前端</a> to improve your experience.</p>
	<![endif]-->
<!-- preloader area start -->
<div id="preloader">
	<div class="loader"></div>
</div>
<!-- prealoader area end -->
<!-- header area start -->
<header>
	<div class="header-area">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-lg-3">
					<div class="logo">
						<a href="index.html">
							<img src="assets/images/icon/logo.png" alt="logo">
						</a>
					</div>
				</div>
				<div class="col-lg-9 d-none d-lg-block">
					<div class="main-menu">
						<nav id="nav_mobile_menu">
							<ul id="navigation">
								<li class="active">
									<a href="#home">Home</a>
								</li>
								<li>
									<a href="#about">About Us</a>
								</li>
								<li>
									<a href="#classes">Classes</a>
								</li>
								<li>
									<a href="#trainers">Trainers</a>
								</li>
								<li>
									<a href="#testimonial">Testimonials</a>
								</li>
								<li>
									<a href="#contact">Contact Us</a>
								</li>
							</ul>
						</nav>
					</div>
				</div>
				<div class="col-12 d-block d-lg-none">
					<div id="mobile_menu"></div>
				</div>
			</div>
		</div>
	</div>
</header>
<!-- header area end -->
<!-- hero area start -->
<section class="hero-area pos-rel full-height d-flex align-items-center parallax" id="home" data-speed="3" data-bg-image="assets/images/slider/slider-bg1.jpg">
	<div class="container">
		<div class="row">
			<div class="col-md-10">
				<div class="hero-content">
					<span>confidence means to</span>
					<h2>Believe in Yourself</h2>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus ut libero magnam. Ipsa libero
						repudiandae dolor velit esse rem illum aliquid delectus, quidem aut voluptatum necessitatibus.
						Porro veniam assumenda quibusdam!</p>
					<a href="#">Get Stared</a>
				</div>
			</div>
		</div>
	</div>
	<a href="#about" class="scrl_me_down">
		<span class="fa fa-angle-down"></span>
	</a>
</section>
<!-- hero area end -->
<!-- about area start -->
<section class="about-area pt--100" id="about">
	<div class="container">
		<div class="row">
			<div class="col-lg-5 d-block d-md-none d-lg-block">
				<div class="abt-thumb">
					<div class="text-center">
						<img src="assets/images/gym-image/fitness-img1.png" alt="image">
					</div>
				</div>
			</div>
			<div class="col-lg-7">
				<div class="abt-content">
					<span class="title-back">about us</span>
					<h2>Why Choose Us!</h2>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae temporibus praesentium placeat
						architecto facere inventore dolores odit ea voluptatibus expedita, consequatur minima veniam
						autem soluta ipsum natus ducimus aut</p>
					<p>aperiam eius asperiores. Molestias, tempora totam! Voluptatem distinctio, fugiat tempora, non mollitia
						deleniti quibusdam laboriosam, ipsa aliquid expedita iure ex optio?</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- about area end -->
<!-- classes area start -->
<section class="classes-area bg-gray ptb--100" id="classes">
	<div class="container">
		<div class="section-title">
			<span>Discover</span>
			<h2>Our classes</h2>
		</div>
		<div class="classes-carousel swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="class-item">
						<div class="thumb">
							<img src="assets/images/classes/classes-img1.jpg" alt="image">
						</div>
						<div class="class-content">
							<div class="cls-top-meta">
								<div class="user">
									<img src="assets/images/user-thumb/user1.jpg" alt="image">
									<span>Eldred Wyman</span>
								</div>
								<span class="cls-price">$50</span>
							</div>
							<h2>
								<a href="#">Cardio Classes</a>
							</h2>
							<a href="#" class="join-class">join class</a>
							<ul class="meta-info">
								<li>
									<a href="#">
										<i class="fa fa-calendar"></i>Jan 02,2018</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-clock-o"></i>Sat-Thus:5px-10pm</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-book"></i>32 CLasses</a>
								</li>
							</ul>
							<div class="progress_bar">
								<span class="pr_bar" style="width: 70%"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="class-item">
						<div class="thumb">
							<img src="assets/images/classes/classes-img2.jpg" alt="image">
						</div>
						<div class="class-content">
							<div class="cls-top-meta">
								<div class="user">
									<img src="assets/images/user-thumb/user2.jpg" alt="image">
									<span>Dora Lynch</span>
								</div>
								<span class="cls-price">$50</span>
							</div>
							<h2>
								<a href="#">Weightlifting Classes</a>
							</h2>
							<a href="#" class="join-class">join class</a>
							<ul class="meta-info">
								<li>
									<a href="#">
										<i class="fa fa-calendar"></i>Jan 02,2018</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-clock-o"></i>Sat-Thus:5px-10pm</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-book"></i>32 CLasses</a>
								</li>
							</ul>
							<div class="progress_bar">
								<span class="pr_bar" style="width: 92%"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="class-item">
						<div class="thumb">
							<img src="assets/images/classes/classes-img3.jpg" alt="image">
						</div>
						<div class="class-content">
							<div class="cls-top-meta">
								<div class="user">
									<img src="assets/images/user-thumb/user3.jpg" alt="image">
									<span>Norwood Gislason</span>
								</div>
								<span class="cls-price">$50</span>
							</div>
							<h2>
								<a href="#">Stretching Classes</a>
							</h2>
							<a href="#" class="join-class">join class</a>
							<ul class="meta-info">
								<li>
									<a href="#">
										<i class="fa fa-calendar"></i>Jan 02,2018</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-clock-o"></i>Sat-Thus:5px-10pm</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-book"></i>32 CLasses</a>
								</li>
							</ul>
							<div class="progress_bar">
								<span class="pr_bar" style="width: 80%"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="class-item">
						<div class="thumb">
							<img src="assets/images/classes/classes-img2.jpg" alt="image">
						</div>
						<div class="class-content">
							<div class="cls-top-meta">
								<div class="user">
									<img src="assets/images/user-thumb/user2.jpg" alt="image">
									<span>Keira Hagenes</span>
								</div>
								<span class="cls-price">$50</span>
							</div>
							<h2>
								<a href="#">Cardio Classes</a>
							</h2>
							<a href="#" class="join-class">join class</a>
							<ul class="meta-info">
								<li>
									<a href="#">
										<i class="fa fa-calendar"></i>Jan 02,2018</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-clock-o"></i>Sat-Thus:5px-10pm</a>
								</li>
								<li>
									<a href="#">
										<i class="fa fa-book"></i>32 CLasses</a>
								</li>
							</ul>
							<div class="progress_bar">
								<span class="pr_bar" style="width: 80%"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
</section>
<!-- classes area end -->
<!-- trainer area start -->
<section class="trainer-area ptb--100" id="trainers">
	<div class="container">
		<div class="section-title">
			<span>Meet</span>
			<h2>Our Trainers</h2>
		</div>
		<div class="row">
			<div class="col-lg-4 col-md-6">
				<div class="single-trainer">
					<div class="thumb">
						<img src="assets/images/trainer/trainer-img1.jpg" alt="image">
					</div>
					<div class="content">
						<h4>Rosa Dietrich</h4>
						<p>Body Builder Trainer</p>
						<ul class="social">
							<li>
								<a href="#">
									<i class="fa fa-facebook"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-twitter"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-instagram"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-dribbble"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="single-trainer">
					<div class="thumb">
						<img src="assets/images/trainer/trainer-img2.jpg" alt="image">
					</div>
					<div class="content">
						<h4>Rosa Dietrich</h4>
						<p>Body Builder Trainer</p>
						<ul class="social">
							<li>
								<a href="#">
									<i class="fa fa-facebook"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-twitter"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-instagram"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-dribbble"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="single-trainer">
					<div class="thumb">
						<img src="assets/images/trainer/trainer-img3.jpg" alt="image">
					</div>
					<div class="content">
						<h4>Rosa Dietrich</h4>
						<p>Body Builder Trainer</p>
						<ul class="social">
							<li>
								<a href="#">
									<i class="fa fa-facebook"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-twitter"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-instagram"></i>
								</a>
							</li>
							<li>
								<a href="#">
									<i class="fa fa-dribbble"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- trainer area end -->
<!-- testimonial area start -->
<section class="testimonial-area bg-gray pos-rel ptb--100" id="testimonial">
	<div class="container">
		<div class="tst-title">
			<h2>Testimonial</h2>
			<p>what people says about Lavaland</p>
		</div>
		<div class="row">
			<div class="col-xl-10">
				<div class="testimonials-carousel swiper-container">
					<div class="swiper-wrapper">
						<div class="tst-item swiper-slide">
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ducimus sed eum excepturi
								impedit, illo accusantium debitis vel error explicabo libero expedita, maiores iusto
								ab?
							</p>
							<strong>Lincoln Skiles
								<span> / Developer</span>
							</strong>
						</div>
						<div class="tst-item swiper-slide">
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ducimus illo accusantium
								debitis vel error explicabo libero expedita, maiores iusto ab?</p>
							<strong>Abdullah Wilderman
								<span> / Strategist</span>
							</strong>
						</div>
						<div class="tst-item swiper-slide">
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque eum excepturi impedit,
								illo accusantium debitis vel error explicabo libero expedita, maiores iusto ab?</p>
							<strong>Baron Kshlerin
								<span> / Administrator</span>
							</strong>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>
		<div class="right-thumb">
			<img src="assets/images/gym-image/testimonial-right-thumb.png" alt="image">
		</div>
	</div>
</section>
<!-- testimonial area end -->
<!-- feature blog area start -->
<div class="feature-blog pt--100">
	<div class="container">
		<div class="section-title">
			<span>Read</span>
			<h2>Our Letest News</h2>
		</div>
		<div class="row">
			<div class="col-lg-4 col-md-6">
				<div class="single-blog">
					<div class="blog-content">
						<h2>
							<a href="blog.html">Everyday it provides me with exactly what I need</a>
						</h2>
						<span>June 18, 2017</span>
					</div>
					<div class="blog-thumb">
						<img src="assets/images/blog/feature-blog/feature-blog-img1.jpg" alt="">
						<a href="blog.html" class="read-more">Read More
							<i class="fa fa-long-arrow-right"></i>
						</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="single-blog">
					<div class="blog-content">
						<h2>
							<a href="blog.html">Everyday it provides me with exactly what I need</a>
						</h2>
						<span>June 18, 2017</span>
					</div>
					<div class="blog-thumb">
						<img src="assets/images/blog/feature-blog/feature-blog-img2.jpg" alt="">
						<a href="blog.html" class="read-more">Read More
							<i class="fa fa-long-arrow-right"></i>
						</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="single-blog">
					<div class="blog-content">
						<h2>
							<a href="blog.html">Everyday it provides me with exactly what I need</a>
						</h2>
						<span>June 18, 2017</span>
					</div>
					<div class="blog-thumb">
						<img src="assets/images/blog/feature-blog/feature-blog-img3.jpg" alt="">
						<a href="blog.html" class="read-more">Read More
							<i class="fa fa-long-arrow-right"></i>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- feature blog area end -->
<!-- join-club area start -->
<section class="join-club ptb--100 pt-x-none" id="contact">
	<div class="container">
		<div class="section-title">
			<span>Stay Connect</span>
			<h2>With Our Club</h2>
		</div>
		<div class="join-form">
			<form action="#">
				<input type="text" name="fname" placeholder="Your Full Name">
				<input type="text" name="fname" placeholder="Your Phone">
				<input type="submit" name="submit" value="Send Request" id="jsubmit">
			</form>
		</div>
	</div>
</section>
<!-- join-club area end -->
<!-- contact area start -->
<div class="contact-area bg-gray ptb--100">
	<div class="container">
		<div class="section-title">
			<span>Locate Us</span>
			<h2>Contact</h2>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="contact-content">
					<ul>
						<li>
							<i class="fa fa-map-marker"></i>Race Event BeFaster, UK, 2292 Peachtree Rd NW</li>
						<li>
							<i class="fa fa-phone"></i>+1 123 456 8798</li>
						<li>
							<i class="fa fa-envelope"></i>[email protected]</li>
					</ul>
				</div>
			</div>
			<div class="col-md-6">
				<div id="google_map"></div>
			</div>
		</div>
	</div>
</div>
<!-- contact area end -->
<!-- footer area start -->
<div class="footer-area ptb--50">
	<div class="container">
		<div class="footer-content">
			<p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		</div>
	</div>
</div>
<!-- footer area end -->
<!-- jquery latest version -->
<script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
<!-- bootstrap 4 js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- others plugins -->
<script src="assets/js/jquery.slicknav.min.js"></script>
<script src="assets/js/counterup.min.js"></script>
<script src="assets/js/waypoints.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/jquery.zoomslider.min.js"></script>
<script src="assets/js/jquery.firefly.js"></script>
<!-- google map -->
<!---<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO_5h890WNShs_YLGivCBfs2U89qXR-7Y&callback=initMap"></script>--->
<script src="assets/js/scripts.js"></script>



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


热门标签: 扁平化 养生会馆 植物花草 宽屏全屏 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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