绿色欧美样式响应式VIP付费软件服务网页模板



6 21 8



模板描述:响应式VIP付费软件服务,绿色欧美样式响应式VIP付费软件服务网页模板html模板下载

代码结构

1. 引入CSS

<link href="https://rsms.me/inter/inter-ui.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/slick.min.css">
<link rel="stylesheet" href="css/slick-theme.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/slick.min.js"></script>
<script src="js/scripts.js"></script>

3. HTML代码

<!--navigation-->
<section class="smart-scroll">
<div class="container-fluid">
	<nav class="navbar navbar-expand-md navbar-dark">
		<a class="navbar-brand heading-black" href="index.html">
			Knight
		</a>
		<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
				data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
				aria-label="Toggle navigation">
			<span data-feather="grid"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item">
					<a class="nav-link page-scroll" href="#features">Features</a>
				</li>
				<li class="nav-item">
					<a class="nav-link page-scroll" href="#pricing">Pricing</a>
				</li>
				<li class="nav-item">
					<a class="nav-link page-scroll" href="#faq">FAQ</a>
				</li>
				<li class="nav-item">
					<a class="nav-link page-scroll" href="#blog">Blog</a>
				</li>
				<li class="nav-item">
					<a class="nav-link page-scroll d-flex flex-row align-items-center text-primary" href="#">
						<em data-feather="layout" width="18" height="18" class="mr-2"></em>
						Try Generator
					</a>
				</li>
			</ul>
		</div>
	</nav>
</div>
</section>
<!--hero header-->
<section class="py-7 py-md-0 bg-hero" id="home">
<div class="container">
	<div class="row vh-md-100">
		<div class="col-md-8 col-sm-10 col-12 mx-auto my-auto text-center">
			<h1 class="heading-black text-capitalize">Quickly build landing pages with Knight</h1>
			<p class="lead py-3">Knight is a platform that helps freelancers and companies build beautiful landing
				pages in minutes. Sign up for free.</p>
			<button class="btn btn-primary d-inline-flex flex-row align-items-center">
				Get started now
				<em class="ml-2" data-feather="arrow-right"></em>
			</button>
		</div>
	</div>
</div>
</section>
<!-- features section -->
<section class="pt-6 pb-7" id="features">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2 class="heading-black">Knight offers everything you need.</h2>
			<p class="text-muted lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi
				commodo, tempus odio a, vestibulum nibh.</p>
		</div>
	</div>
	<div class="row mt-5">
		<div class="col-md-10 mx-auto">
			<div class="row feature-boxes">
				<div class="col-md-6 box">
					<div class="icon-box box-primary">
						<div class="icon-box-inner">
							<span data-feather="edit-3" width="35" height="35"></span>
						</div>
					</div>
					<h5>Create once. Share everywhere.</h5>
					<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in
						nisi commodo, tempus odio a, vestibulum nibh.</p>
				</div>
				<div class="col-md-6 box">
					<div class="icon-box box-success">
						<div class="icon-box-inner">
							<span data-feather="monitor" width="35" height="35"></span>
						</div>
					</div>
					<h5>Unlimited devices</h5>
					<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in
						nisi commodo, tempus odio a, vestibulum nibh.</p>
				</div>
				<div class="col-md-6 box">
					<div class="icon-box box-danger">
						<div class="icon-box-inner">
							<span data-feather="layout" width="35" height="35"></span>
						</div>
					</div>
					<h5>Beautiful tempates & layouts</h5>
					<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in
						nisi commodo, tempus odio a, vestibulum nibh.</p>
				</div>
				<div class="col-md-6 box">
					<div class="icon-box box-info">
						<div class="icon-box-inner">
							<span data-feather="globe" width="35" height="35"></span>
						</div>
					</div>
					<h5>Available globally</h5>
					<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in
						nisi commodo, tempus odio a, vestibulum nibh.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="row mt-6">
		<div class="col-md-6 mr-auto">
			<h2>Knight is more than just a page builder.</h2>
			<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis pulvinar vestibulum. Donec eleifend, sem sed dictum mattis, turpis purus placerat eros.</p>
			<a href="#" class="btn btn-light">
				Try the live demo
			</a>
		</div>
		<div class="col-md-5">
			<div class="slick-about">
				<img src="img/blog-1.jpg" class="img-fluid rounded d-block mx-auto" alt="Work 1"/>
				<img src="img/blog-2.jpg" class="img-fluid rounded d-block mx-auto" alt="Work 2"/>
				<img src="img/blog-3.jpg" class="img-fluid rounded d-block mx-auto" alt="Work 3"/>
			</div>
		</div>
	</div>
</div>
</section>
<!--pricing section-->
<section class="py-7 bg-dark section-angle top-right bottom-right" id="pricing">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2 class="text-white heading-black">Choose your pricing plan.</h2>
			<p class="text-light lead">Simply pricing - 7 Days free trial</p>
		</div>
	</div>
	<!--pricing tables-->
	<div class="row pt-5 pricing-table">
		<div class="col-12 mx-auto">
			<div class="card-deck pricing-table">
				<div class="card">
					<div class="card-body">
						<h3 class="card-title pt-3">Personal</h3>
						<h2 class="card-title text-primary mb-0 pt-4">$59</h2>
						<div class="text-muted font-weight-medium mt-2">per month</div>
						<ul class="list-unstyled pricing-list">
							<li>1 user</li>
							<li>10 websites</li>
							<li>Access to premium templates</li>
							<li>Basic support</li>
						</ul>
						<a href="#" class="btn btn-primary">
							Start free trial
						</a>
					</div>
				</div>
				<div class="card">
					<div class="card-body">
						<h3 class="card-title pt-3">Agency</h3>
						<h2 class="card-title text-info mb-0 pt-4">$159</h2>
						<div class="text-muted font-weight-medium mt-2">per month</div>
						<ul class="list-unstyled pricing-list">
							<li>2-15 users</li>
							<li>50 websites</li>
							<li>Access to premium templates</li>
							<li>Priority support</li>
						</ul>
						<a href="#" class="btn btn-info">
							Start free trial
						</a>
					</div>
				</div>
				<div class="card">
					<div class="card-body">
						<h3 class="card-title pt-3">Enterprise</h3>
						<h2 class="card-title text-primary mb-0 pt-4">$499</h2>
						<div class="text-muted font-weight-medium mt-2">per month</div>
						<ul class="list-unstyled pricing-list">
							<li>Unlimited users</li>
							<li>Unlimited websites</li>
							<li>Access to premium templates</li>
							<li>24/7 support</li>
						</ul>
						<a href="#" class="btn btn-primary">
							Start free trial
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row mt-6">
		<div class="col-md-4 mr-auto">
			<h3>Everything is covered.</h3>
			<p class="lead">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo, tempus odio a,
				vestibulum nibh.
			</p>
		</div>
		<div class="col-md-7 offset-md-1">
			<ul class="features-list">
				<li>Weekly new templates</li>
				<li>Access to new features</li>
				<li>MailChimp integration</li>
				<li>Stripe integration</li>
				<li>100 refund guarantee</li>
				<li>Advance SEO tools</li>
				<li>Free unlimited support</li>
			</ul>
		</div>
	</div>
	<div class="row mt-5">
		<div class="col-md-8 col-12 divider top-divider mx-auto pt-5 text-center">
			<h3>Try Knight free for 7 days</h3>
			<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo,
				tempus odio a, vestibulum nibh.</p>
			<button class="btn btn-primary">
				Create your account
			</button>
		</div>
	</div>
</div>
</section>
<!--faq section-->
<section class="py-7" id="faq">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2>Frequently asked questions</h2>
			<p class="text-muted lead">Answers to most common questions.</p>
		</div>
	</div>
	<div class="row mt-5">
		<div class="col-md-10 mx-auto">
			<div class="row">
				<div class="col-md-6 mb-5">
					<h6>Can I try it for free?</h6>
					<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p>
				</div>
				<div class="col-md-6 mb-5">
					<h6>Do you have hidden fees?</h6>
					<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p>
				</div>
				<div class="col-md-6 mb-5">
					<h6>What are the payment methods you accept?</h6>
					<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p>
				</div>
				<div class="col-md-6 mb-5">
					<h6>How often do you release updates?</h6>
					<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p>
				</div>
				<div class="col-md-6 mb-5">
					<h6>What is your refund policy?</h6>
					<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p>
				</div>
				<div class="col-md-6 mb-5">
					<h6>How can I contact you?</h6>
					<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem por legere me doming.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="row mt-4">
		<div class="col-md-6 mx-auto text-center">
			<h5 class="mb-4">Have questions?</h5>
			<a href="#" class="btn btn-primary">Contact us</a>
		</div>
	</div>
</div>
</section>
<!--news section-->
<section class="py-7 bg-dark section-angle top-left bottom-left" id="blog">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2 class="heading-black">News from Knight.</h2>
			<p class="text-muted lead">What's new at Knight.</p>
		</div>
	</div>
	<div class="row mt-5">
		<div class="col-md-4">
			<div class="card">
				<a href="#">
					<img class="card-img-top img-raised" src="img/blog-1.jpg" alt="Blog 1">
				</a>
				<div class="card-body">
					<a href="#" class="card-title mb-2"><h5>We launch new iOS & Android mobile apps</h5></a>
					<p class="text-muted small-xl mb-2">Sep 27, 2018</p>
					<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper,
						consectetur adipiscing elit. <a href="#">Learn more</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<a href="#">
					<img class="card-img-top img-raised" src="img/blog-2.jpg" alt="Blog 2">
				</a>
				<div class="card-body">
					<a href="#" class="card-title mb-2"><h5>New update is available for the editor</h5></a>
					<p class="text-muted small-xl mb-2">August 16, 2018</p>
					<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper,
						consectetur adipiscing elit. <a href="#">Learn more</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<a href="#">
					<img class="card-img-top img-raised" src="img/blog-3.jpg" alt="Blog 3">
				</a>
				<div class="card-body">
					<a href="#" class="card-title mb-2"><h5>The story of building #1 page builder</h5></a>
					<p class="text-muted small-xl mb-2">December 2nd, 2017</p>
					<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper,
						consectetur adipiscing elit. <a href="#">Learn more</a></p>
				</div>
			</div>
		</div>
	</div>
	<div class="row mt-6">
		<div class="col-md-6 mx-auto text-center">
			<a href="#" class="btn btn-primary">View all posts</a>
		</div>
	</div>
</div>
</section>
<!--footer-->
<footer class="py-6">
<div class="container">
	<div class="row">
		<div class="col-sm-5 mr-auto">
			<h5>About Knight</h5>
			<p class="text-muted">Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore.
				Laceaque quiae sitiorem rest non restibusaes maio es dem tumquam explabo.</p>
			<ul class="list-inline social social-sm">
				<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-dribbble"></i></a>
				</li>
			</ul>
		</div>
		<div class="col-sm-2">
			<h5>Legal</h5>
			<ul class="list-unstyled">
				<li><a href="#">Privacy</a></li>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Refund policy</a></li>
			</ul>
		</div>
		<div class="col-sm-2">
			<h5>Partner</h5>
			<ul class="list-unstyled">
				<li><a href="#">Refer a friend</a></li>
				<li><a href="#">Affiliates</a></li>
			</ul>
		</div>
		<div class="col-sm-2">
			<h5>Help</h5>
			<ul class="list-unstyled">
				<li><a href="#">Support</a></li>
				<li><a href="#">Log in</a></li>
			</ul>
		</div>
	</div>
	<div class="row mt-5">
		<div class="col-12 text-muted text-center small-xl">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></div>
	</div>
</div>
</footer>
<!--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-teal active" data-color="default" title="Default Teal"></li>
		<li class="bg-purple" data-color="purple" title="Purple"></li>
		<li class="bg-blue" data-color="blue" title="Blue"></li>
		<li class="bg-red" data-color="red" title="Red"></li>
		<li class="bg-green" data-color="green" title="Green"></li>
		<li class="bg-indigo" data-color="indigo" title="Indigo"></li>
		<li class="bg-orange" data-color="orange" title="Orange"></li>
		<li class="bg-cyan" data-color="cyan" title="Cyan"></li>
		<li class="bg-yellow" data-color="yellow" title="Yellow"></li>
		<li class="bg-pink" data-color="pink" title="Pink"></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

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