綠色簡潔風格的健身運動專家整站網站源碼下載



7 26 9



模板描述:綠色簡潔風格 健身運動專家 整站網站,綠色簡潔風格的健身運動專家整站網站源碼下載html模板下載

代碼結構

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 href='http://fonts.googleapis.com/css?family=Raleway:400,300,200,100,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link href="css/owl.carousel.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/owl.carousel.js"></script>

3. HTML代碼

<!-- header -->
<div class="header" id="home">
	<div class="header-top">
		<div class="container">
			<div class="logo">
				<a href="index.html"><img src="images/logo.png"></a>
			</div>
			<div class="top-menu">
			<span class="menu"> </span>
				<ul>
				<li><a href="#home"  class="scroll">home</a></li>
					<li><a href="#about"class="scroll">about</a></li>
						<li><a href="#trainers" class="scroll">trainers</a></li>
							<li><a href="#classes" class="scroll">classes</a></li>
								<li><a href="#tips" class="scroll">tips</a></li>
								<li><a href="#contact" class="scroll">contact</a></li>
			</ul>
			</div>
			<!-- script-for-menu -->
				<script>
					$("span.menu").click(function(){
						$(".top-menu ul").slideToggle("slow" , function(){
						});
					});
				</script>
				<!-- script-for-menu -->
			<div class="clearfix"></div>
			<div class="header-info">
			<h1>fit <span>life</span></h1>
			<h2>The reason I exercise is for the quality of life I enjoy.</h2>
			</div>
		</div>
	</div>
</div>
<!-- End header-->
	<div class="content">
		<div class="about-section" id="about">
			<div class="container">
				<div class="col-md-6 about-grid">
				<h2>fit <span>life</span></h2>
				<p>The reason I exercise is for the quality of life I enjoy.</p>
				</div>
				<div class="col-md-6 about-grid1">
				<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever. </p>
				<p class="text">If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever. </p>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
	<div class="trainer-section" >
		<div  class="container">
				<div class="trainer-grids">
					<div class="col-md-4 trainer-grid">
						<img src="images/pic1.jpg">
							<div class="trainer-info">
								<h3>exercise</h3>
						</div>
				</div>
				<div class="col-md-4 trainer-grid span">
						<img src="images/pic2.jpg">
							<div class="trainer-info">
								<h3>exercise</h3>
							</div>
					</div>
				<div class="col-md-4 trainer-grid">
						<img src="images/pic3.jpg">
							<div class="trainer-info">
								<h3>exercise</h3>
						</div>
				</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="trainersection-info">
			<div class="container">
				<div class="trainer-infogrids">
					<div class="col-md-4 trainer-grid1">
						<img src="images/pic4.png">
							<h4>1256 Members</h4>
				</div>
				<div class="col-md-4 trainer-grid1 label1">
					<img src="images/pic5.png">
						<h4>36 Trainers</h4>
				</div>
				<div class="col-md-4 trainer-grid1 label2">
					<img src="images/pic6.png">
						<h4>196 Equipments</h4>
				</div>
					<div class="clearfix"></div>
			</div>
			</div>
		</div>
		<div class="our-trainers" id="trainers">
			<div class="container">
				<div class="ourtrainers-header">
					<h3>Meet Our Trainers</h3>
					<p>Here are some of our main Trainers</p>
				</div>
				<div class="ourtrainer-grids">
				<div class="col-md-4 ourtrainer-grid">
				<h4>Jerry Coper</h4>
				<p>Waitliffting Hear</p>
				<img src="images/pic7.jpg" alt="">
				<div class="ourtrainer-info">
								<p><span>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all whether it's fitness or whatever.</span></p>
									<a href="#"><img src="images/facebook.png"></a>
						</div>
				</div>
				<div class="col-md-4 ourtrainer-grid">
				<h4>Jerry Coper</h4>
				<p>Waitliffting Hear</p>
				<img src="images/pic9.jpg" alt="">
				<div class="ourtrainer-info">
								<p><span>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all whether it's fitness or whatever.</span></p>
										<a href="#"><img src="images/twitter1.png"></a>
						</div>
				</div>
				<div class="col-md-4 ourtrainer-grid">
				<h4>Jerry Coper</h4>
				<p>Waitliffting Hear</p>
				<img src="images/pic8.jpg" alt="">
				<div class="ourtrainer-info">
								<p><span>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all whether it's fitness or whatever.</span></p>
										<a href="#"><img src="images/google.png"></a>
						</div>
				</div>
				<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="our-class" id="classes">
			<div class="container">
				<div class="ourclass-header">
					<h3>our class</h3>
				<p>Here are some of our main Trainers</p>
		</div>
				<div class="ourclass-grids">
					<div class=" col-md-4 ourclass-grid">
					<img src="images/pic10.jpg" alt="">
						<div class="fitness">
					<h4>fitness class</h4>
						<div class="joiningdate">
							<div class="join">
						<h5>joining date:</h5>
				</div>
					<div class="weeks">
				<p>mon-sat</p>
				</div>
			<div class="clearfix"></div>
		</div>
			<div class="timing">
				<div class="times">
					<h5>timing:</h5>
			</div>
			<div class="time">
				<p>10am to 8pm</p>
		</div>
			<div class="clearfix"></div>
		</div>
			<a href="#">details</a>
		</div>
		</div>
		<div class=" col-md-4 ourclass-grid">
					<img src="images/pic11.jpg" alt="">
						<div class="fitness">
					<h4>fitness class</h4>
						<div class="joiningdate">
							<div class="join">
						<h5>joining date:</h5>
				</div>
					<div class="weeks">
				<p>mon-sat</p>
				</div>
			<div class="clearfix"></div>
		</div>
			<div class="timing">
				<div class="times">
					<h5>timing:</h5>
			</div>
			<div class="time">
				<p>10am to 8pm</p>
		</div>
			<div class="clearfix"></div>
		</div>
			<a href="#">details</a>
		</div>
		</div>
		<div class=" col-md-4 ourclass-grid">
					<img src="images/pic12.jpg" alt="">
						<div class="fitness">
					<h4>fitness class</h4>
						<div class="joiningdate">
							<div class="join">
						<h5>joining date:</h5>
				</div>
					<div class="weeks">
				<p>mon-sat</p>
				</div>
			<div class="clearfix"></div>
		</div>
			<div class="timing">
				<div class="times">
					<h5>timing:</h5>
			</div>
			<div class="time">
				<p>10am to 8pm</p>
		</div>
			<div class="clearfix"></div>
		</div>
			<a href="#">details</a>
		</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
</div>
<div id="testimonial" class="Testimonials">
		<div class="container">
			<!---- testmonials ---->
		<div class="test-monials">
				<!----sreen-gallery-cursual---->
						<div class="sreen-gallery-cursual">
							 <!-- requried-jsfiles-for owl -->
							        <script>
							    $(document).ready(function() {
							      $("#owl-demo").owlCarousel({
							        items : 1,
							        lazyLoad : true,
							        autoPlay : true,
							        navigation : false,
							        navigationText :  false,
							        pagination : true,
							      });
							    });
							    </script>
							 <!-- //requried-jsfiles-for owl -->
							 <!-- start content_slider -->
						       <div id="owl-demo" class="owl-carousel">
					                <div class="item">
					                		<div class="col-md-3 testmonial-img">
						                		<img src="images/gal-img11.png" class="img-responsive" alt=""/>
					                		</div>
					                		<div class="col-md-9 testmonial-text">
						                		<p>Lorem ipsum dolor sit amet, offendit volutpat sea ex, at omnium scripta pro, at omnium scripta pro, ei mea oratio malorum forensibus. ei mea oratio malorum forensibus. Sed ei omnes laoreet posidonium ei mea oratio malorum forensibus.</p>
						                		<h4>John Doe</h4>
					                		</div>
					                		<div class="clearfix"> </div>
					                </div>
					                 <div class="item">
					                		<div class="col-md-3 testmonial-img">
						                		<img src="images/gal-img2.png" class="img-responsive" alt=""/>
					                		</div>
					                		<div class="col-md-9 testmonial-text">
											<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever.</p>
						                		<h4>John Doe</h4>
					                		</div>
					                		<div class="clearfix"> </div>
					                </div>
					                 <div class="item">
					                	<div class="col-md-3 testmonial-img">
						                		<img src="images/gal-img3.png" class="img-responsive" alt=""/>
					                		</div>
					                		<div class="col-md-9 testmonial-text">
											<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever.</p>
						                		<h4>John Doe</h4>
					                		</div>
					                		<div class="clearfix"> </div>
					                </div>
									 <div class="item">
					                		<div class="col-md-3 testmonial-img">
						                		<img src="images/gal-img4.png" class="img-responsive" alt=""/>
					                		</div>
					                		<div class="col-md-9 testmonial-text">
											<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever.</p>
						                		<h4>John Doe</h4>
					                		</div>
					                		<div class="clearfix"> </div>
					                </div>
				              </div>
						<!--//sreen-gallery-cursual---->
					</div>
				</div>
			</div>
		</div>
		<!---- testmonials ---->
		<div class="fitnesstips-section" id="tips">
			<div class="container">
				<div class="fitnesstip-header">
					<h3>fitness tips</h3>
				<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever.</p>
		</div>
			</div>
		<div class="fitnesstips-grids">
			<div class="fitnesstips-grid1">
				<div class="col-md-3 left-grid">
					<img src="images/pic13.jpg" class="img-responsive" alt="">
				</div>
				<div class="col-md-9 right-grid">
				<h4>I'm not going to sit at home and feel sorry </h4>
				<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever. </p>
				<div class="details">
				<div class="date">
				<h5>10/01/15</h5>
			</div>
			<div class="detail">
			<a href="#">details</a>
			</div>
			<div class="clearfix"></div>
			</div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="fitnesstips-grid2">
				<div class="col-md-9 left-grid1">
				<h4>I'm not going to sit at home and feel sorry </h4>
				<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever. </p>
				<div class="details">
				<div class="date">
				<h5>10/01/15</h5>
			</div>
			<div class="detail">
			<a href="#">details</a>
			</div>
			<div class="clearfix"></div>
			</div>
				</div>
				<div class="col-md-3 right-grid1">
				<img src="images/pic14.jpg" class="img-responsive" alt="">
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="fitnesstips-grid3">
				<div class="col-md-3 left-grid">
					<img src="images/pic15.jpg" class="img-responsive" alt="">
				</div>
				<div class="col-md-9 right-grid">
				<h4>I'm not going to sit at home and feel sorry </h4>
				<p>If I don't feel confident about my body, I'm not going to sit at home and feel sorry for myself and not do something about it. It's all about taking action and not being lazy. So you do the work, whether it's fitness or whatever. </p>
				<div class="details">
				<div class="date">
				<h5>10/01/15</h5>
			</div>
			<div class="detail">
			<a href="#">details</a>
			</div>
			<div class="clearfix"></div>
			</div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
	<div class="map">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10015.498657932954!2d-0.1570060357124469!3d51.129219866008135!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4875f1c859d0e855%3A0xb0ce82410da5809!2sA2011%2C+Crawley%2C+West+Sussex+RH10%2C+UK!5e0!3m2!1sen!2sin!4v1409743498026" frameborder="0" style="border:0"></iframe>
		</div>
		<div class="contact-section-bottom" id="contact">
					<div class="contact-form">
						<form>
						<div class="col-md-6 contact-left">
							<input type="text" class="text" value="Name*" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name*';}">
							<input type="text" class="text" value="E-mail*" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'E-mail*';}">
							<input type="text" class="text" value="Phone*" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone*';}">
						</div>
						<div class="col-md-6 contact-right">
							<textarea value="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
						</div>
							<input type="submit" value="Send " />
						</form>
					</div>
				</div>
	</div>
	<div class="footer-section">
			<div class="container">
				<div class="footer-top">
				<a href="#"><img src="images/footer-icon.png"></a>
				<span> </span>
			<div class="social-icons">
				<a href="#"><i class="facebook"></i></a>
				<a href="#"><i class="twitter"></i></a>
				</div>
				<label> </label>
					</div>
			<div class="footer-bottom">
							<p> Copyright &copy;2015  All rights  Reserved | Template by<a href="http://w3layouts.com" target="target_blank">W3Layouts</a></p>
					</div>
					<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>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
		</div>
	</div>
<!-- footer -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 綠色 簡潔 簡約 簡單 寬屏 全屏 滿屏 健身房
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表