蓝色宽屏风格pc+wap网络营销公司网页模板代码下载



7 25 9



模板描述:pc+wap网络营销公司,蓝色宽屏风格pc+wap网络营销公司网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/default.css" id="theme-color">

2. 引入JS

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/feather.min.js"></script>
<script src="js/scripts.js"></script>

3. HTML代码

<!--navigation-->
<section class="bg-white px-md-3 py-3">
	<div class="container-fluid">
		<div class="d-flex flex-row align-items-center">
			<h2><a href="index.html">Board</a></h2>
			<a href="#buy" class="ml-auto page-scroll">
				<em data-feather="shopping-bag" class="mr-2"></em>
			</a>
		</div>
	</div>
</section>
<!--hero header-->
<section id="home">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6 order-2 order-md-1 ml-auto my-auto py-md-8 p-5 text-center text-md-left">
				<h1>The whiteboard for creative ideas.</h1>
				<p class="lead mb-4">Makes drawing, collaboration and sharing easy.</p>
				<div class="mb-4">
					<a href="https://www.51qianduan.com/">51前端</a>
					<a href="#watchModal" data-toggle="modal" class="btn btn-link font-weight-bold text-primary d-inline-flex flex-row align-items-center show-video">
						<em data-feather="play" width="20" height="20" class="mr-2"></em>
						Watch video
					</a>
				</div>
				<div class="mt-5">
					<p>Trusted by companies like</p>
					<div class="mb-3">
						<img src="img/press/press-1.png" alt="Client 1" class="img-customer">
						<img src="img/press/press-2.png" alt="Client 2" class="img-customer">
						<img src="img/press/press-3.png" alt="Client 3" class="img-customer">
					</div>
				</div>
			</div>
			<div class="col-md-6 order-1 order-md-2 bg-image" style="background-image: url(img/board-1.jpg)"></div>
		</div>
	</div>
</section>
<!--why section-->
<section class="bg-white" id="why">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6 bg-image" style="background-image: url(img/board-2.jpg)"></div>
			<div class="col-md-6 ml-auto my-auto py-md-7 p-5">
				<h2>Why another whiteboard?</h2>
				<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<ul class="features-list">
					<li>Lorem ipsum dolor sit amet.</li>
					<li>Aenean commodo ligula eget dolor.</li>
					<li>Aenean massa.</li>
					<li>Cum sociis natoque penatibus mus.</li>
					<li>Lorem ipsum consectetuer adipiscing elit.</li>
					<li>Aenean commodo ligula eget dolor.</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<div class="tlinks">Collect from <a href="https://www.51qianduan.com/">51前端</a></div>
<!--features section-->
<section class="bg-white" id="features">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6 order-2 order-md-1 ml-auto my-auto py-md-6 p-5">
				<h2>Designed for team collaboration.</h2>
				<p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				<div class="row mt-5">
					<div class="col-sm-6 mb-2">
						<h6>Easy sketching</h6>
						<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<div class="col-sm-6 mb-2">
						<h6>Write smoothly</h6>
						<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<div class="col-sm-6 mb-2">
						<h6>Quick eraser</h6>
						<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<div class="col-sm-6 mb-2">
						<h6>Wireframing support</h6>
						<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<div class="col-sm-6 mb-2">
						<h6>Take quick notes</h6>
						<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<div class="col-sm-6 mb-2">
						<h6>1 year gaurantee</h6>
						<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
			</div>
			<div class="col-md-6 order-1 order-md-2 bg-image" style="background-image: url(img/board-3.jpg)"></div>
		</div>
	</div>
</section>
<!--first review section-->
<section class="bg-white" id="first-review">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6 bg-image" style="background-image: url(img/board-4.jpg)"></div>
			<div class="col-md-6 ml-auto my-auto py-md-8 p-5 text-center">
				<div class="review">
					<p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor.</p>
					<div class="mt-4 d-flex flex-row align-items-center justify-content-center">
						<img src="img/client-1.jpg" class="img-review rounded-circle mr-2" alt="Client 1"/>
						<span class="text-muted">Jack Dorson, Design at Facebook</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--second review section-->
<section class="bg-white" id="second-review">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6 order-2 order-md-1 ml-auto my-auto py-md-8 p-5 text-center">
				<div class="review">
					<p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p>
					<div class="mt-4 d-flex flex-row align-items-center justify-content-center">
						<img src="img/client-2.jpg" class="img-review rounded-circle mr-2" alt="Client 2"/>
						<span class="text-muted">Kathrine Jones, Product Designer</span>
					</div>
				</div>
			</div>
			<div class="col-md-6 order-1 order-md-2 bg-image" style="background-image: url(img/board-5.jpg)"></div>
		</div>
	</div>
</section>
<!--buy now section-->
<section class="bg-white" id="buy">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6 bg-image" style="background-image: url(img/board-6.jpg)"></div>
			<div class="col-md-6 ml-auto my-auto py-md-6 py-5 px-2 px-md-6 text-center text-md-left">
				<div class="d-flex flex-row align-items-center">
					<h2 class="text-primary">$59.99</h2>
					<span class="text-muted ml-2">Free shipping worldwide</span>
				</div>
				<form>
					<div class="row">
						<div class="col-md-12">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Name">
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group">
								<input type="email"  class="form-control" placeholder="Email address">
							</div>
						</div>
						<div class="col-md-12">
							<div class="form-group input-group">
								<input type="text" class="form-control w-50" placeholder="Credit card">
								<input type="text" class="form-control w-20" placeholder="MM / YY">
								<input type="text" class="form-control w-15" placeholder="CVC">
							</div>
						</div>
						<div class="col-12">
							<div class="form-group">
								<textarea rows="2"  class="form-control" placeholder="Shipping address"></textarea>
							</div>
						</div>
					</div>
					<div class="mt-3 d-flex flex-row align-items-center">
						<button class="btn btn-primary mr-2">Buy now</button>
						<em data-feather="lock" width="18" height="18" class="ml-auto text-muted small-xl mr-2"></em>
						<span class="text-muted small-xl">Payments are processed securely with Stripe.</span>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<!--faq section-->
<section class="py-6" id="faq">
	<div class="container">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<h2>Have questions?</h2>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-10 mx-auto">
				<div class="row">
					<div class="col-md-6 mb-4">
						<h6>Lorem ipsum dolor sit amet?</h6>
						<p>
							Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore. Laceaque quiae sitiorem.
						</p>
					</div>
					<div class="col-md-6 mb-4">
						<h6>Lorem sit andigen daepeditem amet?</h6>
						<p>
							Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore. Laceaque quiae sitiorem.
						</p>
					</div>
					<div class="col-md-6 mb-4">
						<h6>Lorem ipsum dolor sit andigen daepeditem amet?</h6>
						<p>
							Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore. Laceaque quiae sitiorem.
						</p>
					</div>
					<div class="col-md-6 mb-4">
						<h6>Lorem sit andigen daepeditem amet dem tumquam explabo?</h6>
						<p>
							Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore. Laceaque quiae sitiorem.
						</p>
					</div>
					<div class="col-md-6 mb-4">
						<h6>Lorem sit andigen daepeditem amet?</h6>
						<p>
							Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore. Laceaque quiae sitiorem.
						</p>
					</div>
					<div class="col-md-6 mb-4">
						<h6>Lorem sit daepeditem amet?</h6>
						<p>
							Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore. Laceaque quiae sitiorem.
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-4">
			<div class="col-md-6 mx-auto text-center">
				<p><strong>More questions?</strong></p>
				<a href="#" class="btn btn-primary">
					Get in touch
				</a>
			</div>
		</div>
	</div>
</section>
<!--call to action-->
<section class="bg-hero py-7" style="background-image: url(img/board-4.jpg)">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto text-center">
				<span class="text-uppercase text-light small-xl">Love offers and discounts?</span>
				<h2 class="text-white mt-2">Subscribe to our newsletter and don't miss huge discounts.</h2>
				<p class="text-white mb-5">Just enter your email address and we'll take care of the rest.</p>
				<div class="input-group px-md-5 mt-4">
					<input type="text" class="form-control" placeholder="Email address">
					<div class="input-group-append">
						<button class="btn btn-primary" type="button">Subscribe</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--footer--> 
<footer class="py-5">
	<div class="container">
		<div class="row">
			<div class="col-md-11 mx-auto text-center">
				<p class="text-muted">Join us on Social Media</p>
				<ul class="list-inline social social-rounded social-sm my-3">
					<li class="list-inline-item">
						<a href=""><i class="fa fa-facebook"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-twitter"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-google-plus"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-vine"></i></a>
					</li>
				</ul>
				<div class="text-muted small-xl">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></div>
			</div>
		</div>
	</div>
</footer>
<!--watch video--> 
<div class="modal fade" id="watchModal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content bg-transparent border-0">
			<div class="modal-body p-0">
				<button type="button" class="close mb-1" data-dismiss="modal" aria-label="Close">
					<em data-feather="x"></em>
				</button>
				<div class="embed-responsive embed-responsive-16by9">
					<iframe class="embed-responsive-item" src="#" allowfullscreen></iframe>
				</div>
			</div>
		</div>
	</div>
</div>
<!--scroll to top-->
<div class="scroll-top">
	<i class="fa fa-angle-up" aria-hidden="true"></i>
</div>
<!-- theme switcher (FOR DEMO ONLY - REMOVE FROM PRODUCTION)-->
<div class="switcher-wrap">
	<div class="switcher-trigger">
		<span class="fa fa-gear"></span>
	</div>
	<div class="color-switcher">
		<h6>Color Switcher</h6>
		<ul class="mt-3 clearfix">
			<li class="bg-blue active" data-color="default" title="Default Blue"></li>
			<li class="bg-red" data-color="red" title="Red"></li>
			<li class="bg-pink" data-color="pink" title="Pink"></li>
			<li class="bg-indigo" data-color="indigo" title="Indigo"></li>
			<li class="bg-green" data-color="green" title="Green"></li>
			<li class="bg-orange" data-color="orange" title="Orange"></li>
			<li class="bg-teal" data-color="teal" title="Teal"></li>
			<li class="bg-black" data-color="black" title="Black"></li>
			<li class="bg-cyan" data-color="cyan" title="Cyan"></li>
			<li class="bg-purple" data-color="purple" title="Purple"></li>
		</ul>
		<p>These are just demo colors. You can <b>easily</b> create your own color scheme.</p>
	</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 大气 霸气

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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