蓝色宽屏形式html水上运动俱乐部网页模板代码



4 13 5



模板描述:蓝色 宽屏 html 水上运动俱乐部 网页模板代码,蓝色宽屏形式html水上运动俱乐部网页模板代码html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="all" />
<link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&amp;subset=devanagari,latin-ext" rel="stylesheet">

2. HTML代码

<!-- header -->
<header>
	<div class="container">
		<div class="header d-lg-flex justify-content-between align-items-center">
			<div class="header-agile">
				<h1>
					<a class="navbar-brand logo" href="index.html">
						<span class="fa fa-google-wallet" aria-hidden="true"></span> Wave Ride 
					</a>
				</h1>
			</div>
			<div class="nav_w3ls">
				<nav>
					<label for="drop" class="toggle mt-lg-0 mt-1"><span class="fa fa-bars" aria-hidden="true"></span></label>
					<input type="checkbox" id="drop" />
						<ul class="menu">
							<li class="mr-lg-3 mr-2 active"><a href="index.html">Home</a></li>
							<li class="mr-lg-3 mr-2"><a href="about.html">About </a></li>
							<li class="mr-lg-3 mr-2"><a href="services.html">Services</a></li>
							<li class="mr-lg-3 mr-2"><a href="blog.html">Blog</a></li>
							<li class="mr-lg-3 mr-2 p-0">
							<!-- First Tier Drop Down -->
							<label for="drop-2" class="toggle">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 class="inner-dropdown">
								<li><a href="about.html">About Page</a></li>
								<li><a href="services.html">Services Page</a></li>
							</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
				</nav>
			</div>
		</div>
	</div>
</header>
<!-- //header -->
<!-- banner -->
<div class="banner_w3lspvt" id="home">
	<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="slider-info bg1">
					<div class="bs-slider-overlay">
						<div class="banner-text">
							<div class="container">
								<h4 class="movetxt agile-title text-capitalize">Welcome to waveride </h4>
								<h4 class="movetxt mb-3 agile-title text-capitalize">water Sports Club</h4>
								<p>Vivamus eget est in odio tempor interdum. Mauris maximus fermentum arcu, ac finibus ante. Sed mattis risus at ipsum elementum, ut auctor turpis cursus. Sed sed odio pharetra, aliq uetsedvelit cursus, vehicula enim. Mauris porta aliquet magna, eget laoreet ligula dolor.</p>					
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="slider-info bg2">
					<div class="bs-slider-overlay1">
						<div class="banner-text">
							<div class="container">
								<h4 class="movetxt agile-title text-capitalize">Welcome to waveride </h4>
								<h4 class="movetxt mb-3 agile-title text-capitalize">water Sports Club</h4>
								<p>Vivamus eget est in odio tempor interdum. Mauris maximus fermentum arcu, ac finibus ante. Sed mattis risus at ipsum elementum, ut auctor turpis cursus. Sed sed odio pharetra, aliq uetsedvelit cursus, vehicula enim. Mauris porta aliquet magna, eget laoreet ligula dolor.</p>					
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="slider-info bg3">
					<div class="bs-slider-overlay1">
						<div class="banner-text">
							<div class="container">
								<h4 class="movetxt agile-title text-capitalize">Welcome to waveride </h4>
								<h4 class="movetxt mb-3 agile-title text-capitalize">water Sports Club</h4>
								<p>Vivamus eget est in odio tempor interdum. Mauris maximus fermentum arcu, ac finibus ante. Sed mattis risus at ipsum elementum, ut auctor turpis cursus. Sed sed odio pharetra, aliq uetsedvelit cursus, vehicula enim. Mauris porta aliquet magna, eget laoreet ligula dolor.</p>				
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="slider-info bg4">
					<div class="bs-slider-overlay1">
						<div class="banner-text">
							<div class="container">
								<h4 class="movetxt agile-title text-capitalize">Welcome to waveride </h4>
								<h4 class="movetxt mb-3 agile-title text-capitalize">water Sports Club</h4>
								<p>Vivamus eget est in odio tempor interdum. Mauris maximus fermentum arcu, ac finibus ante. Sed mattis risus at ipsum elementum, ut auctor turpis cursus. Sed sed odio pharetra, aliq uetsedvelit cursus, vehicula enim. Mauris porta aliquet magna, eget laoreet ligula dolor.</p>					
							</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<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 -->
<!-- tabs -->
<section class="middile-sec py-5" id="tabs">
	<div class="container py-md-5">
		<div class="row">
			<div class="col-lg-6 middile-inner-con">
				<h4 class="mb-sm-5 mb-4">We have the best, passionate and experienced instructors</h4>
				<div class="tab-main mx-auto">
					<input id="tab1" type="radio" name="tabs" checked>
					<label for="tab1"><span class="fa fa-cogs" aria-hidden="true"></span> Mission</label>
					<input id="tab2" type="radio" name="tabs">
					<label for="tab2"><span class="fa fa-cogs" aria-hidden="true"></span> Vision</label>
					<input id="tab3" type="radio" name="tabs">
					<label for="tab3"><span class="fa fa-cogs" aria-hidden="true"></span> Values</label>
					<section id="content1">
						<h5 class="mb-3 text-capitalize">Mauris maximus fermentum arcu ac ante. </h5>	
						<p>Vivamus eget est in odio tempor interdum. Mauris maximus fermentum arcu, ac finibus ante. Sed mattis risus at ipsum elementum, ut auctor ut turpis cursus. Vivamus eget est in odio tempor interdum. Mauris max fermentum arcu, ac finibus ante. Sed mattis risus at elementum.</p>
					</section>
					<section id="content2">
						<h5 class="mb-3 text-capitalize">Sed mattis risus at ipsum, ut auctor. </h5>
						<p>Mauris max fermentum arcu, ac finibus ante Vivamus eget est in odio sed tempor interdum. Mauris maximus fermentum arcu, ac finibus ante. Sed mattis risus at ipsum elementum, ut auctor turpis cursus ipsum dolor.</p>
					</section>
					<section id="content3">
						<h5 class="mb-3 text-capitalize">tempor interdum. maximus fermentum arcu. </h5>
						<p>Aac finibus ante. Sed mattis risus at ipsum Vivamus eget est in odio tempor interdum. Mauris maximus fermentum arcu, ac finibus ante. Sed mattis risus at ipsum elementum, ut auctor turpis cursus.</p>
					</section>
				</div>
			</div>
			<div class="col-lg-6 about-img mt-lg-0 mt-4">
				<img src="images/about.jpg" alt="about image" class="img-fluid" />
			</div>
		</div>
	</div>
</section>
<!--//tabs -->
<!-- services -->
<section class="services py-5">
	<div class="container py-md-3">
		<div class="row service-grids">
			<div class="serv-grid-left col-lg-4">
				<h4 class="mb-2">What we offer</h4>
				<h3 class="heading mb-3">We Provide Awesome Services</h3>
				<p>Aac finibus ante. Sed mattis risused ipsum dolor vivamus eget est int sodio tempor interdum et. Mauris maximus fermentume arcu, acne finibus ante. Sed mattis risus at ipsum elementum, sed auctor turpis cursus risus at ipsum vivamus.</p>
			</div>
			<div class="col-lg-8 mt-lg-0 mt-4">
				<div class="row process-grids">
					<div class="col-md-6">
						<div class="ser-grd">
							<div class="row">
								<div class="col-md-3 col-2 text-center services-icon icon-clr1">
									<span class="fa fa-universal-access" aria-hidden="true"></span>
								</div>
								<div class="col-md-9 col-10 text-left services-grid">
									<h4>Wave Riding</h4>
									<p>Mauris maximus fermentum arcus, ac finibus ante. Sed mattis risus at ipsum elementum mauris max.</p>	
								</div>
							</div>
						</div>
						<div class="ser-grd mt-md-5 mt-4">
							<div class="row">							
								<div class="col-md-3 col-2 text-center services-icon icon-clr2">
									<span class="fa fa-tty" aria-hidden="true"></span>
								</div>
								<div class="col-md-9 col-10 text-left services-grid">
									<h4>Sea Diving</h4>
									<p>Mauris maximus fermentum arcus, ac finibus ante. Sed mattis risus at ipsum elementum mauris max.</p>
								</div>
							</div>	
						</div>
					</div>
					<div class="col-md-6">
						<div class="ser-grd mt-md-0 mt-4">
							<div class="row">
								<div class="col-md-3 col-2 text-center services-icon icon-clr3">
									<span class="fa fa-trophy" aria-hidden="true"></span>
								</div>
								<div class="col-md-9 col-10 text-left services-grid">
									<h4>Water Surfing</h4>
									<p>Mauris maximus fermentum arcus, ac finibus ante. Sed mattis risus at ipsum elementum mauris max.</p>	
								</div>
							</div>
						</div>
						<div class="ser-grd mt-md-5 mt-4">
							<div class="row">							
								<div class="col-md-3 col-2 text-center services-icon icon-clr4">
									<span class="fa fa-umbrella" aria-hidden="true"></span>
								</div>
								<div class="col-md-9 col-10 text-left services-grid">
									<h4>Water Diving</h4>
									<p>Mauris maximus fermentum arcus, ac finibus ante. Sed mattis risus at ipsum elementum mauris max.</p>	
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //services -->
<!-- how we work -->
<section class="how py-5" id="how">
	<div class="container">
		<div class="inner-grid py-5">
			<h3 class="heading text-center mb-3">Why Choose Us</h3>
			<div class="row text-center">
				<div class="col-md-4 how-icon mt-4">
					<span class="fa fa-universal-access" aria-hidden="true"></span>
					<div class=" how-grid">
						<h3 class="mt-3">Id viverra elit ipsum</h3>
						<p class="mt-2">Integer pulvinar leo idut viver feugiat. Pellentesque libero justo orci vel.</p>
					</div>
				</div>
				<div class="col-md-4 how-icon1 mt-4">
					<span class="fa fa-tty" aria-hidden="true"></span>
					<div class="how-grid">
						<h3 class="mt-3">Id viverra elit ipsum</h3>
						<p class="mt-2">Integer pulvinar leo idut viver feugiat. Pellentesque libero justo orci vel.</p>
					</div>
				</div>
				<div class="col-md-4 how-icon2 mt-4">
					<span class="fa fa-trophy" aria-hidden="true"></span>
					<div class="how-grid">
						<h3 class="mt-3">Id viverra elit ipsum</h3>
						<p class="mt-2">Integer pulvinar leo idut viver feugiat. Pellentesque libero justo orci vel.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //how we work -->
<!-- improvements -->
<section class="stats py-5">
	<div class="container py-md-5">
		<div class="heading">
			<h3 class="heading text-center">Surfing Sports Club Facts</h3>
			<p class="my-3 head text-center"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus	turpis sodales quis. Integer sit amet mattis quam.</p>
		</div>
		<div class="row mt-5"> 
			<div class="col-lg-3 col-sm-6">
				<div class="bg-white p-4">
					<h5>Registered</h5>
					<h4 class="mt-2 mb-sm-3">200+</h4>
					<p> Vestibulum ante ipsum sed primis in faucibus orci </p>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-sm-0 mt-3">
				<div class="bg-white p-4">
					<h5>Happy Customers</h5>
					<h4 class="mt-2 mb-sm-3">2,800</h4>
					<p> Vestibulum ante ipsum sed primis in faucibus orci </p>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-3">
				<div class="bg-white p-4">
					<h5>Instructors</h5>
					<h4 class="mt-2 mb-sm-3">390+</h4>
					<p> Vestibulum ante ipsum sed primis in faucibus orci </p>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-3">
				<div class="bg-white p-4">
					<h5>Dive Services</h5>
					<h4 class="mt-2 mb-sm-3">2,450</h4>
					<p> Vestibulum ante ipsum sed primis in faucibus orci </p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //improvements -->
<!-- subscribe -->
<section class="subscribe">
	<div class="subscribe-overlay py-5">
		<div class="container py-md-5">
			<div class="row subscribe-grids">
				<div class="col-lg-6">
					<p class="mb-4">Vestibulum ante ipsum eut in faucibus orci luctuset ipsum ultrices ut posuere cubilia Curae; Nulla mollis dapibus nunc, sed rhoncus turpis sodales ut quis. Integer sit amet matis quam luctuset ipsum ultrices posuere cubilia Curae orci luctuset posuere cubilia.</p>
					<h5><span class="fa mr-2 fa-cogs" aria-hidden="true"></span> Posuere Curae, Nulla mollis dapibus.</h5>
					<h5><span class="fa mr-2 fa-tty" aria-hidden="true"></span> Faucibus orci luctuset ipsum.</h5>
					<h5><span class="fa mr-1 fa-cubes" aria-hidden="true"></span> Vestibulum ante ipsum eut in orci.</h5>
				</div>
				<div class="col-lg-6 mt-lg-0 mt-sm-5 mt-4">
					<h3 class="heading">Let's waveride with us</h3>
					<p class="mb-4">Get involved and stay up to date with what's happening.</p>
					<form action="#" method="post" class="mt-4">  
						<input type="text" name="Name" placeholder="Full Name" required="">
						<input type="email" name="Email" class="mr-0" placeholder="Enter Email" required="">
						<button type="submit" class="btn mt-2"> Subscribe</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- subscribe -->
<!-- testimonials -->
<section class="testimonials py-5">
	<div class="container py-md-5">
		<h3 class="heading text-center mb-5">What people say about us</h3>
		<div class="row testi-grids">
			<div class="col-lg-3 col-md-5 pr-0">
				<img src="images/test1.jpg" class="img-fluid" alt="" />
			</div>
			<div class="col-lg-3 col-md-7 bg-clr mt-md-4 mt-0">
				<p class="mb-4"><span class="fa mr-2 fa-quote-left" aria-hidden="true"></span> Vestibulum ante ipsum eut in faucibus orci luctuset ipsum ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, sed rhoncus turpis sodales ut quis. Integer sit amet quam.</p>
				<h4>Johnson Eric</h4>
				<p>Customer Say</p>
			</div>
			<div class="col-lg-3 col-md-5 pr-0 mt-lg-0 mt-5">
				<img src="images/test2.jpg" class="img-fluid" alt="" />
			</div>
			<div class="col-lg-3 col-md-7 bg-clr mt-lg-4 mt-md-5 mt-0">
				<p class="mb-4"><span class="fa mr-2 fa-quote-left" aria-hidden="true"></span> Vestibulum ante ipsum eut in faucibus orci luctuset ipsum ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, sed rhoncus turpis sodales ut quis. Integer sit amet quam.</p>
				<h4>John Watson</h4>
				<p>Customer Say</p>
			</div>
		</div>
	</div>
</section>
<!-- //testimonials -->
<!-- footer -->
<footer class="py-sm-5 py-4">
	<div class="container py-md-3">
		<div class="footer-grids text-center">
			<h2 class="logo"><a href="index.html"><span class="fa fa-google-wallet" aria-hidden="true"></span> Wave Ride</a></h2>
		</div>
		<!-- to top -->
		<div class="top-icon text-center mt-2">
			<a href="https://www.51qianduan.com/">51前端</a>
		</div>
		<!-- //to top -->
		<div class="middle mt-3">
			<ul class="social mb-4">
				<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
				<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
				<li><a href="#"><span class="fa fa-google-plus icon_google-plus"></span></a></li>
				<li><a href="#"><span class="fa fa-linkedin icon_linkedin"></span></a></li>
				<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
			</ul>
			<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
		</div>
	</div>
</footer>
<!-- //footer -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 体育 体育信息

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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