绿色宽屏形式响应式互联网业务开发网页模板代码



7 24 9



模板描述:响应式互联网业务开发,绿色宽屏形式响应式互联网业务开发网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="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-->
<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top sticky-navigation">
	<a class="navbar-brand mx-auto" href="index.html">
		Union
	</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="#about">About</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#services">Services</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#process">Process</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#blog">Blog</a>
			</li>
		</ul>
		<form class="form-inline">
			<p class="mb-0 mx-3"><a class="page-scroll font-weight-bold" href="#contact">Work with us</a></p>
		</form>
	</div>
</nav>
<!--hero header-->
<section class="pt-7 pt-md-8" id="home">
	<div class="container">
		<div class="row">
			<div class="col-md-8 mx-auto my-auto text-center">
				<h1>Products & services to help you grow business.</h1>
				<p class="lead mt-4 mb-5">
					Trusted by <b>10,000+</b> customers, Union themes & apps help you create beautiful responsive 
					HTML sites, faster and easier.
				</p>
				<p><img class="img-fluid" src="img/mockup.png" alt="Mockup" /></p>
			</div>
		</div>
	</div>
</section>
<!-- about section -->
<section class="pb-7" id="about">
	<div class="container">
		<hr class="my-6"/>
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<h4 class="dot-circle font-weight-normal">We work with world's top companies to create 
					beautiful products & apps.</h4>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-6 order-2 order-md-1 my-md-auto">
				<h3>Google Design</h3>
				<p class="text-muted lead">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante posuere, vestibulum mauris eget, efficitur felis. Vestibulum tincidunt sit amet odio at gravida. Cras mollis dapibus orci, in interdum odio scelerisque rhoncus.
				</p>
				<a href="#" class="btn btn-primary">View project</a>
			</div>
			<div class="col-md-6 order-1 order-md-2">
				<img src="img/google-design.jpeg" class="img-fluid d-block mx-auto" alt="Google Design"/>
			</div>
			<div class="col-md-6 order-3 mx-auto border-top border-bottom mt-5 mt-md-0 py-4">
				<div class="review text-center">
					<p class="quote">Praesent vulputate dolor velit, in condimentum odio pellentesin condimentum odio pellentesque libero.</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">Ryan Siddle, Google Design</span>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<img src="img/facebook-messenger.jpeg" class="img-fluid d-block mx-auto" alt="Facebook Messenger"/>
			</div>
			<div class="col-md-6 my-md-auto">
				<h3>Facebook Messenger</h3>
				<p class="text-muted lead">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante posuere, vestibulum mauris eget, efficitur felis. Vestibulum tincidunt sit amet odio at gravida. Cras mollis dapibus orci, in interdum odio scelerisque rhoncus.
				</p>
				<a href="#" class="btn btn-primary">View project</a>
			</div>
			<div class="col-md-6 mx-auto border-top border-bottom mt-5 mt-md-0 py-4">
				<div class="review text-center">
					<p class="quote">Integer id ante posuere, vestibulum mauris eget, efficitur felis.</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">Ameli Mao, VP Facebook</span>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 order-2 order-md-1 my-md-auto">
				<h3>Twitter Mobile</h3>
				<p class="text-muted lead">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ante posuere, vestibulum mauris eget, efficitur felis. Vestibulum tincidunt sit amet odio at gravida. Cras mollis dapibus orci, in interdum odio scelerisque rhoncus.
				</p>
				<a href="#" class="btn btn-primary">View project</a>
			</div>
			<div class="col-md-6 order-1 order-md-2">
				<img src="img/twitter-mobile.jpeg" class="img-fluid d-block mx-auto" alt="Twitter Mobile"/>
			</div>
			<div class="col-md-6 order-3 mx-auto border-top border-bottom mt-5 mt-md-0 py-4">
				<div class="review text-center">
					<p class="quote">Praesent vulputate dolor velit, pellentesin condimentum odio pellentesque libero.</p>
					<div class="mt-4 d-flex flex-row align-items-center justify-content-center">
						<img src="img/client-3.jpg" class="img-review rounded-circle mr-2" alt="Client 3"/>
						<span class="text-muted">Kathrine Jones, Twitter</span>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-6">
			<div class="col-md-6 mx-auto text-center">
				<h4>Want to work with us?</h4>
				<p class="lead text-muted">Ready to launch your awesome project? We'd be happy to help you.</p>
				<a href="#" class="btn btn-primary">Get in touch</a>
			</div>
		</div>
	</div>
</section>
<!--services section-->
<section class="bg-light py-7" id="services">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto">
				<h2 class="dot-circle">Services we offer</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 card-services">
					<div class="col-md-6 mb-3">
						<div class="card">
							<div class="card-body text-center">
								<div class="icon-box border-box">
									<div class="icon-box-inner small-xs text-primary">
										<span data-feather="crop" width="30" height="30"></span>
									</div>
								</div>
								<h5 class="mt-0 mb-3">Web design</h5>
								Nam liber tempor cum soluta nobis eleifend option congue nihil imper.
							</div>
						</div>
					</div>
					<div class="col-md-6 mb-3">
						<div class="card">
							<div class="card-body text-center">
								<div class="icon-box border-box">
									<div class="icon-box-inner small-xs text-primary">
										<span data-feather="monitor" width="30" height="30"></span>
									</div>
								</div>
								<h5 class="mt-0 mb-3">Web development</h5>
								Nam liber tempor cum soluta nobis eleifend option congue nihil imper.
							</div>
						</div>
					</div>
					<div class="col-md-6 mb-3">
						<div class="card">
							<div class="card-body text-center">
								<div class="icon-box border-box">
									<div class="icon-box-inner small-xs text-primary">
										<span data-feather="briefcase" width="30" height="30"></span>
									</div>
								</div>
								<h5 class="mt-0 mb-3">Branding</h5>
								Nam liber tempor cum soluta nobis eleifend option congue nihil imper.
							</div>
						</div>
					</div>
					<div class="col-md-6 mb-3">
						<div class="card">
							<div class="card-body text-center">
								<div class="icon-box border-box">
									<div class="icon-box-inner small-xs text-primary">
										<span data-feather="smartphone" width="30" height="30"></span>
									</div>
								</div>
								<h5 class="mt-0 mb-3">Mobile apps</h5>
								Nam liber tempor cum soluta nobis eleifend option congue nihil imper.
							</div>
						</div>
					</div>
					<div class="col-md-6 mb-3">
						<div class="card">
							<div class="card-body text-center">
								<div class="icon-box border-box">
									<div class="icon-box-inner small-xs text-primary">
										<span data-feather="message-square" width="30" height="30"></span>
									</div>
								</div>
								<h5 class="mt-0 mb-3">Social media</h5>
								Nam liber tempor cum soluta nobis eleifend option congue nihil imper.
							</div>
						</div>
					</div>
					<div class="col-md-6 mb-3">
						<div class="card">
							<div class="card-body text-center">
								<div class="icon-box border-box">
									<div class="icon-box-inner small-xs text-primary">
										<span data-feather="headphones" width="30" height="30"></span>
									</div>
								</div>
								<h5 class="mt-0 mb-3">Coaching</h5>
								Nam liber tempor cum soluta nobis eleifend option congue nihil imper.
							</div>
						</div>
					</div>
					<div class="col-md-6 mx-auto text-center">
						<hr class="my-5"/>
						<h4>Need a custom theme or app?</h4>
						<a href="#contact" class="btn btn-primary">Work with us</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--call to action-->
<section class="bg-hero py-8" style="background-image: url(img/parallex.jpg)">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto text-center">
				<h2 class="text-white">We help the world's top companies to create amazing products.</h2>
				<p class="lead text-white my-4">Ready to launch your awesome website?</p>
				<button class="btn btn-primary">Request a free quote</button>
			</div>
		</div>
	</div>
</section>
<!--process-->
<section class="py-7" id="process">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto text-center">
				<h2>How we work</h2>
				<p class="lead text-muted">
					Donec lacus enim, ullamcorper nec lectus id, ornare finibus nunc.
					Eleifend option congue nihil imper.
				</p>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-7 mx-auto timeline">
				<div class="media pb-5">
					<div class="icon-box mt-1">
						<div class="icon-box-inner small-xs text-primary">
							<span data-feather="disc"></span>
						</div>
					</div>
					<div class="media-body">
						<h5>Discovery</h5>
						<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</p>
					</div>
				</div>
				<div class="media pb-5">
					<div class="icon-box mt-1">
						<div class="icon-box-inner small-xs text-primary">
							<span data-feather="copy"></span>
						</div>
					</div>
					<div class="media-body">
						<h5>UI/UX Design</h5>
						<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</p>
					</div>
				</div>
				<div class="media pb-5">
					<div class="icon-box mt-1">
						<div class="icon-box-inner small-xs text-primary">
							<span data-feather="box"></span>
						</div>
					</div>
					<div class="media-body">
						<h5>QA & Testing</h5>
						<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</p>
					</div>
				</div>
				<div class="media">
					<div class="icon-box mt-1">
						<div class="icon-box-inner small-xs text-primary">
							<span data-feather="server"></span>
						</div>
					</div>
					<div class="media-body">
						<h5>Deployment</h5>
						<p class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-7">
			<div class="col-md-6 mx-auto text-center">
				<h3 class="dot-circle dot-lg">90-day satisfaction guarantee.</h3>
				<p class="lead text-muted mb-4">We know you're gonna love our professional services, but let us prove it. 
					If our service hasn't exceeded your expectations after 90 days, you'll get a full 
					refund. Simple as that.
				</p>
				<a class="btn btn-primary page-scroll" href="#contact">Get started risk free</a>
			</div>
		</div>
	</div>
</section>
<!--blog section-->
<section class="py-7 bg-light" id="blog">
	<div class="container">
		<div class="row">
			<div class="col-md-10 mx-auto">
				<h2 class="dot-circle">From our blog</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-6 mb-5">
				<div class="card">
					<a href="#">
						<img class="card-img-top" src="img/parallex.jpg" alt="Blog 1">
					</a>
					<div class="card-body">
						<a href="#">
							<h5 class="card-title">How to create a Bootstrap 4 template</h5>
							<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper, consectetur adipiscing elit.</p>
						</a>
					</div>
				</div>
			</div>
			<div class="col-md-6 mb-5">
				<div class="card">
					<a href="#">
						<img class="card-img-top" src="img/parallex2.jpg" alt="Blog 2">
					</a>
					<div class="card-body">
						<a href="#">
							<h5 class="card-title">How to use social icons in Angular 4</h5>
							<p class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper, consectetur adipiscing elit.</p>
						</a>
					</div>
				</div>
			</div>
			<div class="col-md-6 mx-auto text-center mt-5">
				<a href="#" class="btn btn-primary">Explore more posts</a>
			</div>
		</div>
	</div>
</section>
<!--contact section-->
<section class="py-7" id="contact">
	<div class="container">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<h2>Want to work with us?</h2>
				<div class="divider bg-primary mx-auto"></div>
				<p class="text-muted lead">
					Are you working on something great? We'd love to help make it happen.
				</p>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-8 mx-auto">
				<form>
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Your name">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<input type="email"  class="form-control" placeholder="Your email address">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<input type="tel"  class="form-control" placeholder="Phone number">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<input type="url"  class="form-control" placeholder="Your website">
							</div>
						</div>
						<div class="col-12">
							<div class="form-group">
								<textarea rows="5"  class="form-control" placeholder="What are you looking for?"></textarea>
							</div>
						</div>
					</div>
					<div class="text-center mt-3">
						<button class="btn btn-primary">Send your message</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<!--footer / contact-->
<footer class="py-6 bg-light">
	<div class="container">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<ul class="list-inline">
					<li class="list-inline-item"><a href="#">Privacy</a></li>
					<li class="list-inline-item"><a href="#">Terms</a></li>
					<li class="list-inline-item"><a href="#">Affiliates</a></li>
					<li class="list-inline-item"><a href="#">Support</a></li>
					<li class="list-inline-item"><a href="#">Blog</a></li>
				</ul>
				<p class="text-muted small text-uppercase mt-4">
					Follow us on social media
				</p>
				<ul class="list-inline social social-dark 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>
		<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-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响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 绿色 大气 霸气

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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