绿色简洁形式html5项目管理系统网页模板代码



9 35 12



模板描述:html5项目管理系统,绿色简洁形式html5项目管理系统网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.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="smart-scroll">
<div class="container-fluid">
	<nav class="navbar navbar-expand-md navbar-light">
		<a class="navbar-brand heading-black" href="index.html">
			Scrum
		</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="menu"></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="#reviews">Reviews</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>
			</ul>
			<form class="form-inline">
				<a class="btn btn-primary page-scroll" href="#signup">Try it for free</a>
			</form>
		</div>
	</nav>
</div>
</section>
<!--hero header-->
<section class="pt-5" id="home">
<div class="container-fluid">
	<div class="row vh-md-100">
		<div class="col-md-4 ml-auto my-auto text-center text-md-left order-2 order-md-1">
			<h1 class="text-capitalize">A Simple way to manage multiple projects.</h1>
			<p class="lead text-muted mb-5">Scrum is developed for agile teams who manage multiple projects. Project
				management has become easy and fun.</p>
			<a href="#features" class="btn btn-primary d-inline-flex flex-row align-items-center page-scroll">
				Get Started
				<em data-feather="arrow-right" width="20" height="20" class="ml-2"></em>
			</a>
		</div>
		<div class="col-md-7 my-auto pt-5 pt-md-0 order-1 order-md-2">
			<img src="img/mockup.svg" class="img-fluid d-block mx-auto" alt="Mockup"/>
		</div>
	</div>
</div>
</section>
<section class="bg-light">
<svg class="align-bottom" enable-background="new 0 0 1440 68" viewBox="0 0 1440 68"
	 xmlns="http://www.w3.org/2000/svg">
	<path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8"
		  fill="#FFF" transform="translate(0-1977)"></path>
</svg>
</section>
<!-- features section -->
<section class="py-7 bg-white" id="features">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2 class="text-capitalize">You'll love what we offer</h2>
			<p class="text-muted lead">Lorem ipsum dolor sit amet, Vestibulum in nisi commodo consectetur adipiscing
				elit. Vestibulum in nisi commodo, tempus odio a, vestibulum nibh.</p>
		</div>
	</div>
	<div class="row mt-5 feature-boxes">
		<div class="col-md-4 box">
			<div class="icon-box">
				<div class="icon-box-inner small text-primary">
					<span data-feather="users" width="30" height="30"></span>
				</div>
			</div>
			<h5>Unlimited users</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-4 box">
			<div class="icon-box">
				<div class="icon-box-inner small text-primary">
					<span data-feather="refresh-ccw" width="30" height="30"></span>
				</div>
			</div>
			<h5>Live updates</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-4 box">
			<div class="icon-box">
				<div class="icon-box-inner small text-primary">
					<span data-feather="layout" width="30" height="30"></span>
				</div>
			</div>
			<h5>Easy-to-use</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-4 box">
			<div class="icon-box">
				<div class="icon-box-inner small text-primary">
					<span data-feather="bell" width="30" height="30"></span>
				</div>
			</div>
			<h5>Smart notifications</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-4 box">
			<div class="icon-box">
				<div class="icon-box-inner small text-primary">
					<span data-feather="message-circle" width="30" height="30"></span>
				</div>
			</div>
			<h5>Team chat</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-4 box">
			<div class="icon-box">
				<div class="icon-box-inner small text-primary">
					<span data-feather="search" width="30" height="30"></span>
				</div>
			</div>
			<h5>Quick search</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 class="row mt-6">
		<div class="col-md-9 mx-auto">
			<div class="alert alert-primary text-center py-5">
				<div class="row">
					<div class="col-md-8 col-10 mx-auto">
						<h4>MacOS user? Download Scrum for macOS.</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in nisi commodo,
							tempus odio a, vestibulum nibh.</p>
						<p class="mt-4 mb-0">
							<a href="#"><img class="img-fluid" src="img/mac-app-store.svg" alt="Download"/></a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<section class="bg-white">
<svg class="align-bottom" enable-background="new 0 0 1440 68" viewBox="0 0 1440 68"
	 xmlns="http://www.w3.org/2000/svg">
	<path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8"
		  fill="#f8f9fa" transform="translate(0-1977)"></path>
</svg>
</section>
<!--reviews section-->
<section class="pt-7" id="reviews">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2 class="text-capitalize">What others say about us</h2>
			<p class="text-muted lead">Nam liber tempor cum soluta nobis eleifend option congue nihil imper per tem
				por legere me doming.</p>
		</div>
	</div>
	<div class="row mt-6 review-wrapper">
		<div class="col-md-6">
			<div class="card review">
				<div class="card-body">
					<p class="quote">Praesent vulputate dolor velit, in condimentum odio pellentesin condimentum
						odio pellentesque libero.</p>
					<div class="mt-4 text-muted">
						<img src="img/client-1.jpg" class="img-review rounded-circle mr-2" alt="Client 1"/>
						<strong>Emma Jones</strong>, ClearBit
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card review">
				<div class="card-body">
					<p class="quote">Praesent vulputate dolor velit, pellentesin condimentum odio pellentesque
						libero. Nam liber tempor cum congue nihil imper per tem por legere me doming.</p>
					<div class="mt-4 text-muted">
						<img src="img/client-2.jpg" class="img-review rounded-circle mr-2" alt="Client 2"/>
						<strong>John Doe</strong>, Facebook
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card review">
				<div class="card-body">
					<p class="quote">Praesent vulputate dolor velit, pellentesin condimentum odio pellentesque
						libero. Nam liber tempor cum congue nihil imper per tem por legere me doming.</p>
					<div class="mt-4 text-muted">
						<img src="img/client-3.jpg" class="img-review rounded-circle mr-2" alt="Client 3"/>
						<strong>Katrine Deo</strong>, Twitter
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card review mt-md-6">
				<div class="card-body">
					<p class="quote">Praesent vulputate dolor velit, pellentesin condimentum odio pellentesque
						libero.</p>
					<div class="mt-4 text-muted">
						<img src="img/client-4.jpg" class="img-review rounded-circle mr-2" alt="Client 4"/>
						<strong>Eran Raval</strong>, Google
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<hr class="mt-7"/>
<div class="tlinks">Collect from <a href="https://www.51qianduan.com/">51前端</a></div>
<!--pricing section-->
<section class="py-7" id="pricing">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2 class="text-capitalize">Simple, fair pricing</h2>
			<p class="text-muted lead">Praesent vulputate dolor velit, pellentesin condimentum odio pellentesque
				libero.</p>
		</div>
	</div>
	<!--pricing tables-->
	<div class="row mt-5 pricing-table">
		<div class="col-sm-12">
			<div class="card-group pricing-table">
				<div class="card text-center">
					<div class="card-body">
						<div class="icon-box bg-light">
							<div class="icon-box-inner small-xs text-primary">
								<span data-feather="user" width="30" height="30"></span>
							</div>
						</div>
						<h4 class="card-title pt-3">Freelancer</h4>
						<ul class="list-unstyled pricing-list">
							<li>1 project</li>
							<li>Unlimited revisions</li>
							<li>1 user</li>
							<li>Unlimited guests</li>
							<li>500MB storage</li>
						</ul>
						<div class="card-title text-primary price pb-4"><sup>$</sup> <span>29</span> /month</div>
						<a href="#" class="btn btn-primary">
							Sign up
						</a>
					</div>
				</div>
				<div class="card text-center">
					<div class="card-body">
						<div class="icon-box">
							<div class="icon-box-inner small-xs text-primary">
								<span data-feather="users" width="30" height="30"></span>
							</div>
						</div>
						<h4 class="card-title pt-3">Team</h4>
						<ul class="list-unstyled pricing-list">
							<li>15 projects</li>
							<li>Unlimited revisions</li>
							<li>15 users</li>
							<li>Unlimited guests</li>
							<li>1.5GB storage</li>
						</ul>
						<div class="card-title text-primary price pb-4"><sup>$</sup> <span>49</span> /month</div>
						<a href="#" class="btn btn-primary">
							Sign up
						</a>
					</div>
				</div>
				<div class="card text-center">
					<div class="card-body">
						<div class="icon-box bg-light">
							<div class="icon-box-inner small-xs text-primary">
								<span data-feather="star" width="30" height="30"></span>
							</div>
						</div>
						<h4 class="card-title pt-3">Business</h4>
						<ul class="list-unstyled pricing-list">
							<li>Unlimited projects</li>
							<li>Unlimited revisions</li>
							<li>Unlimited users</li>
							<li>Unlimited guests</li>
							<li>5GB storage</li>
						</ul>
						<div class="card-title text-primary price pb-4"><sup>$</sup> <span>99</span> /month</div>
						<a href="#" class="btn btn-primary">
							Sign up
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row mt-6">
		<div class="col-sm-4">
			<div class="media">
				<div class="icon-box">
					<div class="icon-box-inner small-xs text-primary">
						<span data-feather="refresh-cw" width="30" height="30"></span>
					</div>
				</div>
				<div class="media-body">
					<h6 class="mt-0 mb-2">30-day trail</h6>
					<span class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</span>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="media">
				<div class="icon-box">
					<div class="icon-box-inner small-xs text-primary">
						<span data-feather="credit-card" width="30" height="30"></span>
					</div>
				</div>
				<div class="media-body">
					<h6 class="mt-0 mb-2">No credit card required</h6>
					<span class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</span>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="media">
				<div class="icon-box">
					<div class="icon-box-inner small-xs text-primary">
						<span data-feather="award" width="30" height="30"></span>
					</div>
				</div>
				<div class="media-body">
					<h6 class="mt-0 mb-2">All features included</h6>
					<span class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</span>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<section class="bg-light">
<svg class="align-bottom" enable-background="new 0 0 1440 68" viewBox="0 0 1440 68"
	 xmlns="http://www.w3.org/2000/svg">
	<path d="m1622.3 1937.7c0 0-410.7 169.1-913.4 75.5-502.7-93.6-977.7 56.3-977.7 56.3v440h1891.1v-571.8"
		  fill="#FFF" transform="translate(0-1977)"></path>
</svg>
</section>
<!--FAQ / CTA section-->
<section class="py-7 bg-white" id="faq">
<div class="container">
	<div class="row">
		<div class="col-md-6 mx-auto text-center">
			<h2 class="text-capitalize">Frequestly Asked Questions</h2>
			<p class="text-muted lead">Praesent vulputate dolor velit, pellentesin condimentum odio pellentesque
				libero.</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 Scrum 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-5">
		<div class="col-md-10 mx-auto">
			<div class="alert alert-primary d-md-flex flex-row align-items-center text-center text-md-left p-5">
				<div class="mb-4 mb-md-0">
					<h4>Try Scrum free for 30 days</h4>
					<span>Sign up now and create your first project.</span>
				</div>
				<a href="#signup"
				   class="btn btn-primary ml-md-auto d-inline-flex flex-row align-items-center page-scroll">
					Get Started
					<em data-feather="arrow-right" width="20" height="20" class="ml-2"></em>
				</a>
			</div>
		</div>
	</div>
</div>
</section>
<!--signup section-->
<section class="bg-hero py-7" id="signup" style="background-image: url(img/mockup.svg)">
<div class="container">
	<div class="row">
		<div class="col-md-6 my-md-auto text-center text-md-left pb-5 pb-md-0">
			<h2 class="text-white">Get started with a free account</h2>
			<p class="lead text-light">Magnis modipsae que voloratati andigen daepeditem quiate conecus aut labore.
				Laceaque quiae sitiorem rest non restibusaes maio es dem tumquam explabo.</p>
		</div>
		<div class="col-md-5 ml-auto">
			<div class="card">
				<div class="card-body p-4">
					<h5 class="text-center">Fill the form below to sign up</h5>
					<form class="signup-form">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Full name">
						</div>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Username">
						</div>
						<div class="form-group">
							<input type="email" class="form-control" placeholder="Email address">
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="Password">
						</div>
						<div class="form-group">
							<button class="btn btn-primary btn-block">Create your account</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</section>
<!--footer-->
<footer class="py-6 bg-white">
<div class="container">
	<div class="row">
		<div class="col-sm-5 mr-auto">
			<h6>About Scrum</h6>
			<p>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-rounded 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">
			<h6>Legal</h6>
			<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">
			<h6>Partner</h6>
			<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">
			<h6>Help</h6>
			<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-md-6 mx-auto 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-green active" data-color="default" title="Default Green"></li>
		<li class="bg-blue" data-color="blue" title="Blue"></li>
		<li class="bg-red" data-color="red" title="Red"></li>
		<li class="bg-indigo" data-color="indigo" title="Indigo"></li>
		<li class="bg-orange" data-color="orange" title="Orange"></li>
		<li class="bg-black" data-color="black" title="Black"></li>
		<li class="bg-teal" data-color="teal" title="Teal"></li>
		<li class="bg-cyan" data-color="cyan" title="Cyan"></li>
		<li class="bg-purple" data-color="purple" title="Purple"></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响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 绿色 大气 霸气 咨询管理 咨询 管理 咨询管理公司 咨询公司 管理公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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