黄色宽屏形式html手机应用APP网页模板代码



4 15 6



模板描述:黄色 宽屏 html 手机应用APP 网页模板代码,黄色宽屏形式html手机应用APP网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Alegreya+Sans:100,100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i" rel="stylesheet">

2. HTML代码

<!-- //header -->
<header>
	<div class="container">
		<!-- nav -->
		<nav class="py-4 d-md-flex">
			<div id="logo">
				<h1> <a href="index.html"><span class="fa fa-eercast" aria-hidden="true"></span> Task</a></h1>
			</div>
			<label for="drop" class="toggle">Menu</label>
			<input type="checkbox" id="drop" />
			<ul class="menu mt-md-2 ml-auto">
				<li class="mr-lg-4 mr-2 active"><a href="index.html">Home</a></li>
				<li class="mr-lg-4 mr-2"><a href="#ideas">Services</a></li>
				<li class="mr-lg-4 mr-2"><a href="#how">How It Works</a></li>
				<li class="mr-lg-4 mr-2"><a href="#pricing">Pricing</a></li>
				<li class="mr-lg-4 mr-2"><a href="contact.html">Contact</a></li>
			</ul>
			<div class="login-icon mt-2">
				<a class="user" href="contact.html">Start Project</a>
			</div>
		</nav>
		<!-- //nav -->
	</div>
</header>
<!-- //header -->
<!-- banner -->
<section class="banner" id="home">
	<div class="container">
		<div class="banner-text">
			<div class="slider-info">
				<div class="agileinfo-logo mt-lg-5">
					<h2>Manage Your Team Work In An Easy Way</h2>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at tempus vel, ultrices in ligula leo id viverra feugiat.</p>
				</div>
				<a class="btn mr-2" href="#popup1"><span class="fa fa-info-circle"></span> Get Started</a>
				<ul class="social mt-4">
					<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
					<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
					<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
					<li><a href="#"><span class="fa fa-google-plus icon_g_plus"></span></a></li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- //banner -->
<!-- banner bottom -->
<section class="banner-bottom py-5">
	<div class="container py-lg-5 py-md-3">
		<div class="row bot-grids">
			<div class="col-lg-6">
				<h4 class="mb-3">Ultimate design and experiences with story, emotion and purpose</h4>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at tempus vel, ultrices in ligula leo id viverra feugiat.</p>
			</div>
			<div class="col-lg-6 text-center position-relative pl-lg-5 mt-lg-0 mt-4">
				<div class="bot-grid">
					<span class="fa fa-desktop"></span>
					<h5 class="my-3">Trending Creative Design.</h5>
				</div>
				<div class="bot-grid1 position-absolute">
					<span class="fa fa-building"></span>
					<h5 class="my-3">Ultimate New Technology.</h5>
				</div>
				<div class="bot-grid2 position-absolute">
					<span class="fa fa-cogs"></span>
					<h5 class="my-3">Brand Source Experience.</h5>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //banner bottom -->
<!-- Services -->
<section class="services bg-light py-5" id="ideas">
	<div class="container py-lg-5 py-3">
		<h4 class="heading text-capitalize text-center mb-lg-5 mb-4 pb-2">We Create digital ideas that are bigger, bolder, braver and better.</h4>
		<div class="row service-grids">
			<div class="col-lg-4 col-md-6">
				<div class="grid1 text-center p-4 bg-white">
					<span class="fa fa-building"></span>
					<h5 class="my-3">Newest technology.</h5>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at.</p>
				</div>
			</div>
			<div class="col-lg-4 col-md-6 mt-lg-0 mt-md-5 mt-4">
				<div class="grid2 text-center p-4 bg-white">
					<span class="fa fa-users"></span>
					<h5 class="my-3">Love to work together.</h5>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at.</p>
				</div>
			</div>
			<div class="col-lg-4 col-md-6 mt-lg-0 mt-md-5 mt-4">
				<div class="grid3 text-center p-4 bg-white">
					<span class="fa fa-product-hunt"></span>
					<h5 class="my-3">Amazing Products.</h5>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at.</p>
				</div>
			</div>
			<div class="col-lg-4 col-md-6 mt-md-5 mt-4">
				<div class="grid4 text-center p-4 bg-white">
					<span class="fa fa-desktop"></span>
					<h5 class="my-3">Inspired design.</h5>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at.</p>
				</div>
			</div>
			<div class="col-lg-4 col-md-6 mt-md-5 mt-4">
				<div class="grid5 text-center p-4 bg-white">
					<span class="fa fa-arrows"></span>
					<h5 class="my-3">Attention to details.</h5>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at.</p>
				</div>
			</div>
			<div class="col-lg-4 col-md-6 mt-md-5 mt-4">
				<div class="grid6 text-center p-4 bg-white">
					<span class="fa fa-cogs"></span>
					<h5 class="my-3">Free updates & support.</h5>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at.</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //Services -->
<!-- how it works -->
<section class="about py-5" id="how">
	<div class="container py-md-5">
		<div class="row about-grids">
			<div class="col-lg-6">
				<img src="images/left.png" alt="" class="img-fluid"/>
			</div>
			<div class="col-lg-6 grid1 mt-lg-0 mt-4">
				<span class="fa fa-building"></span>
				<h4 class="my-3">Pellentesque libero justo, semper at tempus vel, ultrices in ligula.</h4>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at tempus vel, ultrices in ligula leo id viverra feugiat.</p>
				<h5 class="mt-md-5 mt-3 mb-2">Pellentesque libero justo, semper at</h5>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at.</p>
				<h5 class="mt-3 mb-2">Pellentesque libero justo, semper at</h5>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at.</p>
			</div>
		</div>
	</div>
</section>
<section class="about py-5">
	<div class="container py-md-5">
		<div class="row about-grids">
			<div class="col-lg-6 grid2">
				<span class="fa fa-building"></span>
				<h4 class="my-3">Pellentesque libero justo, semper at tempus vel, ultrices in ligula.</h4>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at tempus vel, ultrices in ligula leo id viverra feugiat.</p>
				<h5 class="mt-md-5 mt-3 mb-2">Pellentesque libero justo, semper at</h5>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at.</p>
				<h5 class="mt-3 mb-2">Pellentesque libero justo, semper at</h5>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at.</p>
			</div>
			<div class="col-lg-6 mt-lg-0 mt-4">
				<img src="images/right.png" alt="" class="img-fluid"/>
			</div>
		</div>
	</div>
</section>
<!-- how it works -->
<!-- newsletter -->
<section class="subscribe-main py-5">
	<div class="container py-md-4">
		<h3 class="heading text-capitalize text-center">Subscribe Newsletter</h3>
		<p  class="text-center mb-lg-5 pb-2">Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
			sollicit udin velit. semper at.</p>
		<div class="newsletter-info text-center p-md-4 py-md-0 py-4 px-md-0 px-4">
			<form action="#" method="post" class="d-flex">
				<input type="email" name="email" placeholder="Enter your Email..." required="">
				<input type="submit" value="Subscribe">
			</form>
		</div>
	</div>
</section>
<!-- //newsletter-->
<!-- pricing plans -->
<section class="pricing py-5" id="pricing">
	<div class="container py-md-5">
		<h3 class="heading text-capitalize text-center mb-lg-5 mb-4 pb-2">Affordable Pricing</h3>
		<div class="row pricing-grids">
			<div class="col-lg-4 col-sm-6 price">
				<div class="shadow">
					<div class="head"><h3>Basic <span>12$</span></h3></div>
					<div class="pricing-grid mb-md-0 mb-sm-5 mb-4">
						<p> <strong>05</strong> User Access</p>
						<p> <strong>100gb</strong> Cloud Storage</p>
						<p> <strong>05</strong> Domain Names</p>
						<p> <strong>12</strong> Projects</p>
						<p> <strong>Database</strong> And Tasks</p>
						<p class="mb-3"> <strong>No</strong> Support</p>
						<a href="contact.html">Select Choice</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-sm-6 price mb-lg-0 mb-sm-5 mb-4">
				<div class="shadow">
					<div class="head1"><h3>Standard <span>20$</span></h3></div>
					<div class="pricing-grid1">
						<p> <strong>10</strong> User Access</p>
						<p> <strong>100gb</strong> Cloud Storage</p>
						<p> <strong>10</strong> Domain Names</p>
						<p> <strong>35</strong> Projects</p>
						<p> <strong>Database</strong> And Tasks</p>
						<p class="mb-3"> <strong>Limited</strong> Support</p>
						<a href="contact.html">Select Choice</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-sm-6 price mb-sm-0 mb-4">
				<div class="shadow">
					<div class="head2"><h3>Business <span>35$</span></h3></div>
					<div class="pricing-grid2">
						<p> <strong>25</strong> User Access</p>
						<p> <strong>100gb</strong> Cloud Storage</p>
						<p> <strong>15</strong> Domain Names</p>
						<p> <strong>Unlimited</strong> Projects</p>
						<p> <strong>Database</strong> And Tasks</p>
						<p class="mb-3"> <strong>Unlimited</strong> Support</p>
						<a href="contact.html">Select Choice</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //pricing plans -->
<!-- footer -->
<footer class="pb-5 position-relative">
	<!-- text -->
	<div class="text-grid position-absolute" id="text">
		<div class="container py-3 text-center">
			<div class="text">
				<h5 class="w3pvt-title">The best business phone systems and services for small businesses</h5>
				<p>Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor. Vestibulum at dui nunc. Nulla viverra pharetra sem.</p>
				<a class="btn mr-2" href="contact.html"><span class="fa fa-info-circle"></span> Contact Us </a>
			</div>
		</div>
	</div>
	<!-- //text -->
	<!-- to top -->
	<div class="top-icon">
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
	<!-- //to top -->
	<div class="container">
		<div class="row footer-grids">
			<div class="col-lg-2 footer-left pr-0">
				<h2 class="logo"><a href="index.html"><span class="fa fa-eercast" aria-hidden="true"></span> Task</a></h2>
			</div>
			<div class="col-lg-8 footer-middle p-0">
				<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
			</div>
			<div class="col-lg-2 footer-right pl-0">
				<ul class="social">
					<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
					<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
					<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
					<li class="mr-0"><a href="#"><span class="fa fa-google-plus icon_g_plus"></span></a></li>
				</ul>
			</div>
		</div>
	</div>
</footer>
<!-- //footer -->
<!-- popup -->
<div id="popup1" class="popup-effect">
	<div class="popup">
		<img src="images/bg.jpg" alt="Popup Image" class="img-fluid" />
		<p class="mt-4 ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
			laudantium, totam rem aperiam, eaque ipsa quae ab illo quasi architecto beatae vitae dicta
			sunt explicabo.</p>
		<a class="close" href="#">&times;</a>
	</div>
</div>
<!-- //popup -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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