白色简洁风格响应式女性瑜伽健身网页模板



4 15 6



模板描述:白色 简洁 响应式 女性瑜伽健身 网页模板,白色简洁风格响应式女性瑜伽健身网页模板html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/css_slider.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet">

2. HTML代码

	<!-- main banner -->
	<div class="main-top" id="home">
		<!-- header -->
		<header>
			<div class="container-fluid">
				<div class="header d-md-flex justify-content-between align-items-center py-3 px-xl-5 px-lg-3 px-2">
					<!-- logo -->
					<div id="logo">
						<h1><a class="" href="index.html">Befit</a></h1>
					</div>
					<!-- //logo -->
					<!-- nav -->
					<div class="nav_w3ls">
						<nav>
							<label for="drop" class="toggle">Menu</label>
							<input type="checkbox" id="drop" />
							<ul class="menu">
								<li><a href="index.html" class="active">Home</a></li>
								<li class="mx-lg-4 mx-md-3 my-md-0 my-2"><a href="about.html">About Us</a></li>
								<li><a href="gallery.html">Gallery</a></li>
								<li class="mx-lg-4 mx-md-3 my-md-0 my-2">
									<!-- First Tier Drop Down -->
									<label for="drop-2" class="toggle toogle-2">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
									</label>
									<a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
									<input type="checkbox" id="drop-2" />
									<ul>
										<li><a href="#services" class="drop-text">Services</a></li>
										<li><a href="blog.html" class="drop-text">Blog</a></li>
										<li><a href="single.html" class="drop-text">Blog Details</a></li>
										<li><a href="#what" class="drop-text">What We do</a></li>
										<li><a href="#testimonials" class="drop-text">Testimonials</a></li>
									</ul>
								</li>
								<li><a href="contact.html">Contact Us</a></li>
							</ul>
						</nav>
					</div>
					<!-- //nav -->
				</div>
			</div>
		</header>
		<!-- //header -->
		<!-- banner -->
		<div class="banner_w3lspvt">
			<div class="csslider infinity" id="slider1">
				<input type="radio" name="slides" checked="checked" id="slides_1" />
				<input type="radio" name="slides" id="slides_2" />
				<input type="radio" name="slides" id="slides_3" />
				<input type="radio" name="slides" id="slides_4" />
				<ul class="banner_slide_bg">
					<li>
						<div class="container">
							<div class="w3ls_banner_txt text-right ml-auto pr-xl-0 pr-sm-4 pr-5">
								<h3 class="w3ls_pvt-title text-wh text-uppercase let mb-2">Welcome Our Befit</h3>
								<p>Sed ut perspiciatis unde omnis iste natus error sit <br>acntium doemque laudantium, totam
									rem aperiam eaque ipsa <br>quae ab illo.</p>
								<a href="about.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Read More</a>
								<a href="contact.html" style="max-width: 150px;" class="btn button-style button-style-2 ml-2 mt-sm-5 mt-4">Contact
									Us</a>
							</div>
						</div>
					</li>
					<li>
						<div class="container">
							<div class="w3ls_banner_txt text-right ml-auto pr-xl-0 pr-sm-4 pr-5">
								<h3 class="w3ls_pvt-title text-wh text-uppercase let mb-2">Yoga & Meditation</h3>
								<p>Sed ut perspiciatis unde omnis iste natus error sit <br>acntium doemque laudantium, totam
									rem aperiam eaque ipsa <br>quae ab illo.</p>
								<a href="about.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Read More</a>
								<a href="contact.html" style="max-width: 150px;" class="btn button-style button-style-2 ml-2 mt-sm-5 mt-4">Contact
									Us</a>
							</div>
						</div>
					</li>
					<li>
						<div class="container">
							<div class="w3ls_banner_txt pl-xl-0 pl-sm-4 pl-5">
								<h3 class="w3ls_pvt-title text-wh text-uppercase let mb-2">Your Health Coach</h3>
								<p>Sed ut perspiciatis unde omnis iste natus error sit <br>acntium doemque laudantium, totam
									rem aperiam eaque ipsa <br>quae ab illo.</p>
								<a href="about.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Read More</a>
								<a href="contact.html" style="max-width: 150px;" class="btn button-style button-style-2 ml-2 mt-sm-5 mt-4">Contact
									Us</a>
							</div>
						</div>
					</li>
					<li>
						<div class="container">
							<div class="w3ls_banner_txt pl-xl-0 pl-sm-4 pl-5">
								<h3 class="w3ls_pvt-title text-wh text-uppercase let mb-2">Health & Strength</h3>
								<p>Sed ut perspiciatis unde omnis iste natus error sit <br>acntium doemque laudantium, totam
									rem aperiam eaque ipsa <br>quae ab illo.</p>
								<a href="about.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Read More</a>
								<a href="contact.html" style="max-width: 150px;" class="btn button-style button-style-2 ml-2 mt-sm-5 mt-4">Contact
									Us</a>
							</div>
						</div>
					</li>
				</ul>
				<div class="arrows">
					<label for="slides_1"></label>
					<label for="slides_2"></label>
					<label for="slides_3"></label>
					<label for="slides_4"></label>
				</div>
				<div class="navigation">
					<div>
						<label for="slides_1"></label>
						<label for="slides_2"></label>
						<label for="slides_3"></label>
						<label for="slides_4"></label>
					</div>
				</div>
			</div>
		</div>
		<!-- //banner -->
	</div>
	<!-- //main banner -->
	<!-- about -->
	<div class="what py-5">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title-w3 mb-sm-4 mb-3 text-bl text-center font-weight-bold">Welcome to Our Website</h3>
			<p class="mx-auto wstyles text-center mb-sm-5 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
				eiusmod tempor incididunt ut labore et dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.</p>
			<img src="images/about2.jpg" alt="" class="img-fluid">
		</div>
	</div>
	<!-- //about -->
	<!-- services -->
	<section class="services bg-li py-5" id="services">
		<div class="container py-xl-5 py-lg-3">
			<div class="row py-xl-3">
				<div class="col-lg-4">
					<h3 class="title-w3 text-bl mb-3 font-weight-bold">Our Services</h3>
					<p class="title-sub-2 mb-4">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
						mollit anim id.</p>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
						laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
						sunt explicabofdfd dsdsd. </p>
				</div>
				<div class="col-lg-8 mt-lg-0 mt-5">
					<div class="row">
						<div class="col-md-6">
							<div class="bottom-gd-ser p-4">
								<div class="row">
									<div class="col-sm-3 bottom-gd-icon text-center">
										<span class="fa fa-apple" aria-hidden="true"></span>
									</div>
									<div class="col-sm-9 bottom-gd-content text-left mt-sm-0 mt-4">
										<h4 class="mb-3">Nutrition Strategy</h4>
										<p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6 my-md-0 my-4">
							<div class="bottom-gd2-active p-4">
								<div class="row">
									<div class="col-sm-3 bottom-gd-icon text-center">
										<span class="fa fa-wheelchair-alt" aria-hidden="true"></span>
									</div>
									<div class="col-sm-9 bottom-gd-content text-left mt-sm-0 mt-4">
										<h4 class="mb-3">Workout Routein</h4>
										<p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row mt-md-5">
						<div class="col-md-6">
							<div class="bottom-gd2-active p-4">
								<div class="row">
									<div class="col-sm-3 bottom-gd-icon text-center">
										<span class="fa fa-hourglass-half" aria-hidden="true"></span>
									</div>
									<div class="col-sm-9 bottom-gd-content text-left  mt-sm-0 mt-4">
										<h4 class="mb-3">Cardio Excercise</h4>
										<p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6 mt-md-0 mt-4">
							<div class="bottom-gd-ser p-4">
								<div class="row">
									<div class="col-sm-3 bottom-gd-icon text-center">
										<span class="fa fa-thumbs-o-up" aria-hidden="true"></span>
									</div>
									<div class="col-sm-9 bottom-gd-content text-left mt-sm-0 mt-4">
										<h4 class="mb-3">Individual Support</h4>
										<p>Integer sit amet mattis quam, sit amet ultricies velit.</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //services -->
	<!-- stats section -->
	<div class="stats py-5" id="stats">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title-w3 text-wh text-center font-weight-bold">Our Statistics</h3>
			<p class="title-sub mb-md-5 mb-4 text-center text-li">Some More here..</p>
			<div class="row text-center py-sm-3">
				<div class="col-md-3 col-sm-6 w3layouts_stats_left">
					<p class="counter">18</p>
					<p class="para-text-w3ls text-li">Years of Experience</p>
				</div>
				<div class="col-md-3 col-sm-6 w3layouts_stats_left mt-md-0 mt-4">
					<p class="counter">1200</p>
					<p class="para-text-w3ls text-li">Contest attended</p>
				</div>
				<div class="col-md-3 col-sm-6 w3layouts_stats_left mt-md-0 mt-4">
					<p class="counter">700</p>
					<p class="para-text-w3ls text-li">Happy Customer</p>
				</div>
				<div class="col-md-3 col-sm-6 w3layouts_stats_left mt-md-0 mt-4">
					<p class="counter">800</p>
					<p class="para-text-w3ls text-li">Weight Loss & Fitness</p>
				</div>
			</div>
		</div>
	</div>
	<!-- //stats section -->
	<!-- what we do -->
	<div class="what py-5" id="what">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title-w3 text-bl text-center font-weight-bold">What we do</h3>
			<p class="title-sub mb-5 text-center">Best Benifits for your Body</p>
			<div class="row pt-xl-4">
				<div class="col-lg-6 serv_bottom text-center mt-xl-3">
					<div class="row mt-xl-4">
						<div class="col-sm-6">
							<div class="bottom-gd">
								<img src="images/wh1.jpg" alt="" class="img-fluid">
								<h3 class="my-3 font-weight-bold">Balance Body</h3>
								<p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
							</div>
						</div>
						<div class="col-sm-6 mt-sm-0 mt-4">
							<div class="bottom-gd">
								<img src="images/wh2.jpg" alt="" class="img-fluid">
								<h3 class="my-3 font-weight-bold">Nutrition Plan</h3>
								<p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
							</div>
						</div>
					</div>
					<div class="row mt-sm-5 mt-4 pt-xl-4">
						<div class="col-sm-6">
							<div class="bottom-gd">
								<img src="images/wh3.jpg" alt="" class="img-fluid">
								<h3 class="my-3 font-weight-bold">Weight Loss Program</h3>
								<p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
							</div>
						</div>
						<div class="col-sm-6 mt-sm-0 mt-4">
							<div class="bottom-gd">
								<img src="images/wh4.jpg" alt="" class="img-fluid">
								<h3 class="my-3 font-weight-bold">Routein program</h3>
								<p>Sit amet mattis quam, sit amet excepteur sint occaecat cupidatat.</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 fetured-sec mt-lg-0 mt-sm-5 mt-4">
					<img src="images/ab.jpg" class="img-fluid" alt="">
				</div>
			</div>
		</div>
	</div>
	<!-- //what we do -->
	<!-- blog -->
	<div class="blog_w3ls pb-5" id="blog">
		<div class="py-xl-5 py-lg-3">
			<h3 class="title-w3 text-bl text-center font-weight-bold">Our Blog</h3>
			<p class="title-sub mb-5 text-center">Latest Posts</p>
			<div class="blog-grids pt-xl-4">
				<div class="container">
					<div class="row">
						<!-- blog grid -->
						<div class="col-lg-4 col-md-6">
							<div class="card border-0 med-blog">
								<div class="card-header p-0">
									<img class="card-img-bottom" src="images/b1.jpg" alt="Card image cap">
								</div>
								<div class="card-body border border-top-0">
									<a href="blog.html" class="blog-title-in card-title m-0">At vero eos</a>
									<p class="my-3">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
									<a href="https://www.51qianduan.com/">51前端</a>
								</div>
							</div>
						</div>
						<!-- //blog grid -->
						<!-- blog grid -->
						<div class="col-lg-4 col-md-6 mt-md-0 mt-5">
							<div class="card border-0 med-blog">
								<div class="card-header p-0">
									<img class="card-img-bottom" src="images/b2.jpg" alt="Card image cap">
								</div>
								<div class="card-body border border-top-0">
									<a href="blog.html" class="blog-title-in card-title m-0">Tccus et ius</a>
									<p class="my-3">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
									<a href="https://www.51qianduan.com/">51前端</a>
								</div>
							</div>
						</div>
						<!-- //blog grid -->
						<!-- blog grid -->
						<div class="col-lg-4 col-md-6 mx-auto mt-lg-0 mt-5">
							<div class="card border-0 med-blog">
								<div class="card-body border right-blog-wthree">
									<a href="blog.html" class="blog-title-in card-title">Sed do eiusmod tempor auris incididunt ut.</a>
									<p class="theme-color">Jan 06 2019</p>
									<a href="blog.html" class="blog-title-in card-title mt-4">Labore et dolore magna aliqua ultricies ligula.</a>
									<p class="theme-color">Jan 07 2019</p>
									<a href="blog.html" class="blog-title-in card-title mt-4">Nemo enim aspernatur aut odit aut fugit fdsdsd.</a>
									<p class="theme-color">Jan 13 2019</p>
								</div>
							</div>
						</div>
						<!-- //blog grid -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //blog -->
	<!-- testimonials -->
	<section class="testimonials py-5" id="testimonials">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title-w3 text-wh text-center font-weight-bold">Testimonials</h3>
			<p class="title-sub mb-5 text-center text-li">Our Reviews</p>
			<div class="row pt-xl-4">
				<div class="col-md-4 test-grid px-lg-5">
					<div class="test-info text-center">
						<p class="text-li">"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
						<div class="test-img text-center mt-4">
							<img src="images/te1.jpg" class="img-fluid" alt="user-image">
						</div>
						<h3 class="mt-md-4 mt-3">Paul Molive</h3>
					</div>
				</div>
				<div class="col-md-4 test-grid px-lg-5 my-md-0 my-5">
					<div class="test-info text-center">
						<p class="text-li">"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
						<div class="test-img text-center mt-4">
							<img src="images/te2.jpg" class="img-fluid" alt="user-image">
						</div>
						<h3 class="mt-md-4 mt-3">Gail Forci</h3>
					</div>
				</div>
				<div class="col-md-4 test-grid px-lg-5">
					<div class="test-info text-center">
						<p class="text-li">"Sed ut perspiciatis unde omnis iste natus error sit volup tatem accus antium dolore tium.</p>
						<div class="test-img text-center mt-4">
							<img src="images/te3.jpg" class="img-fluid" alt="user-image">
						</div>
						<h3 class="mt-md-4 mt-3">Anna Null</h3>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //testimonials -->
	<!-- footer -->
	<footer class="py-5">
		<div class="container py-xl-4">
			<div class="row footer-top">
				<div class="col-md-5 footer-grid_section_1its">
					<div class="row">
						<div class="col-lg-6 col-md-12 col-sm-6">
							<div class="row">
								<div class="col-2 foot-icon-w3">
									<i class="fa fa-user" aria-hidden="true"></i>
								</div>
								<div class="col-10">
									<h2 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">About Us</h2>
									<p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
								</div>
							</div>
						</div>
						<div class="col-lg-6 col-md-12 col-sm-6 mt-lg-0 mt-md-4 mt-sm-0 mt-4">
							<div class="row">
								<div class="col-2 foot-icon-w3">
									<i class="fa fa-hand-o-right" aria-hidden="true"></i>
								</div>
								<div class="col-10">
									<h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">Who We Are</h3>
									<p>Error sit antium dolorts remq hymue laud.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="row mt-4">
						<div class="col-lg-6 col-md-12 col-sm-6">
							<div class="row">
								<div class="col-2 foot-icon-w3">
									<i class="fa fa-ticket" aria-hidden="true"></i>
								</div>
								<div class="col-10">
									<h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">We Offer</h3>
									<p>Sed ut perspiciatis unde omnis iste natus error sit.</p>
								</div>
							</div>
						</div>
						<div class="col-lg-6 col-md-12 col-sm-6 mt-lg-0 mt-md-4 mt-sm-0 mt-4">
							<div class="row">
								<div class="col-2 foot-icon-w3">
									<i class="fa fa-bullhorn" aria-hidden="true"></i>
								</div>
								<div class="col-10">
									<h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">Popular In</h3>
									<p>Error sit antium dolorts remq hymue laud.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 footer-grid_section_1its my-md-0 my-5">
					<h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">Newsletter</h3>
					<p>Be the first to get latest news and offers!<br>Sed ut perspiciatis unde omnis.</p>
					<form action="#" method="post" class="subscribe_form mt-4">
						<input class="form-control" type="email" name="email" placeholder="Enter your email..." required="">
						<button type="submit" class="btn btn-primary">Submit</button>
					</form>
					<!-- social icons -->
					<div class="agileinfo_social_icons mt-4">
						<h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">Connect With Social</h3>
						<ul class="agileits_social_list list-unstyled">
							<li>
								<a href="#" class="w3_agile_facebook">
									<span class="fa fa-facebook-f"></span>
								</a>
							</li>
							<li class="mx-2">
								<a href="#" class="agile_twitter">
									<span class="fa fa-twitter"></span>
								</a>
							</li>
							<li>
								<a href="#" class="w3_agile_dribble">
									<span class="fa fa-dribbble"></span>
								</a>
							</li>
							<li class="ml-2">
								<a href="#" class="w3_agile_google">
									<span class="fa fa-google-plus"></span>
								</a>
							</li>
						</ul>
					</div>
					<!-- social icons -->
				</div>
				<div class="col-md-3 footer-grid_section_1its">
					<h3 class="footer-title text-uppercase text-wh mb-lg-4 mb-3">Contact Us</h3>
					<div class="contact-info">
						<div class="footer-style-w3ls">
							<h4 class="text-li mb-2">Phone</h4>
							<p>+121 098 8907 9987</p>
						</div>
						<div class="footer-style-w3ls my-4">
							<h4 class="text-li mb-2">Email </h4>
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
						</div>
						<div class="footer-style-w3ls">
							<h4 class="text-li mb-2">Location</h4>
							<p>Honey Avenue, New York City</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<!-- //footer -->
	<!-- copyright -->
	<div class="cpy-right text-center py-3">
		<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
		</p>
	</div>
	<!-- //copyright -->
	<!-- move top icon -->
	<a href="https://www.51qianduan.com/">51前端</a>
	<!-- //move top icon -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 大气 霸气 白色 健身房

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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