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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

35 136 46



模板描述:响应式互联网业务开发。绿色宽屏形式响应式互联网业务开发网页模板代码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自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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