红色宽屏形式pc+wap创意机构网页模板代码



4 15 6



模板描述:红色 宽屏 pc+wap 创意机构 网页模板代码,红色宽屏形式pc+wap创意机构网页模板代码html模板下载

代码结构

1. 引入CSS

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

2. HTML代码

<!-- header -->
<header>
	<div class="container">
		<div class="header d-lg-flex justify-content-between align-items-center">
			<div class="header-agile">
				<h1>
					<a class="navbar-brand logo" href="index.html">
						<span class="fa fa-folder-open-o"></span>Official
					</a>
				</h1>
			</div>
			<div class="nav_w3ls">
				<nav>
					<label for="drop" class="toggle mt-lg-0 mt-2"><span class="fa fa-bars" aria-hidden="true"></span></label>
					<input type="checkbox" id="drop" />
						<ul class="menu">
							<li class="mr-lg-3 mr-2 active"><a href="index.html">Home</a></li>
							<li class="mr-lg-3 mr-2"><a href="about.html">About</a></li>
							<li class="mr-lg-3 mr-2"><a href="services.html">Services</a></li>
							<li class="mr-lg-3 mr-2 p-0">
							<!-- First Tier Drop Down -->
							<label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label>
							<a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
							<input type="checkbox" id="drop-2"/>
							<ul class="inner-dropdown">
								<li><a href="#how">What We Do</a></li>
								<li><a href="#team">Team Members</a></li>
								<li><a href="#blog">Blog Posts</a></li>
								<li><a href="#stats">Stats</a></li>
							</ul>
							</li>
							<li><a href="projects.html">Projects</a></li>
						</ul>
				</nav>
			</div>
			<div class="buttons mt-lg-0 mt-2">
				<a href="contact.html">Contact Us </a>
			</div>
		</div>
	</div>
</header>
<!-- //header -->
<!-- banner -->
<div class="banner_w3lspvt" id="home">
	<div class="container">
		<div class="row banner-tops-style">
			<div class="col-lg-8 style-banner">
				<h3 class="text-wh"> Creative Agencies <br> Also tends to Cover</h3>
				<p class="text-li mt-4">Praesent at molestie nibh, eu laoreet massa. Nam tristique tortor risus, vitae ornare diam tincidunt vitae. In in porta arcu. Integer non convallis mauris. Quisque at nunc at nibh dapibus rutrum vel eu metus. Nullam laoreet vulputate tortor.</p>
				<a href="about.html" class="btn button-style mt-sm-5 mt-4">Know About Us</a>
				<a href="#" class="btn call mt-sm-5 mt-4"> <span class="fa fa-phone" aria-hidden="true"></span> Call: +012 898 909 2317</a>
			</div>
		</div>
	</div>
</div>
<!-- //banner -->
<!-- banner bottom -->
<section class="banner_bottom py-sm-5 py-4">
	<div class="container py-lg-3">
		<div class="row text-center">
			<div class="col-md-4 how-icon mt-md-0">
				<div class="shadow">
					<div class="grid1-bg">
					</div>
					<span class="fa fa-cogs" aria-hidden="true"></span>
					<div class=" how-grid">
						<h3 class="mt-3">The Creative Agency </h3>
						<p class="mt-3">Integer pulvinar leo idut viver feugiat. Pellentesque libero justo orci fermen tum dolor.</p>
					</div>
				</div>
			</div>
			<div class="col-md-4 how-icon1 mt-md-0 mt-4">
				<div class="shadow">
					<div class="grid1-bg1">
					</div>
					<span class="fa fa-headphones" aria-hidden="true"></span>
					<div class="how-grid">
						<h3 class="mt-3">Experienced Staff </h3>
						<p class="mt-3">Integer pulvinar leo idut viver feugiat. Pellentesque libero justo orci fermen tum dolor.</p>
					</div>
				</div>
			</div>
			<div class="col-md-4 how-icon2 mt-md-0 mt-4">
				<div class="shadow">
					<div class="grid1-bg2">
					</div>
					<span class="fa fa-calendar" aria-hidden="true"></span>
					<div class="how-grid">
						<h3 class="mt-3">Development Program</h3>
						<p class="mt-3">Integer pulvinar leo idut viver feugiat. Pellentesque libero justo orci fermen tum dolor.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //banner bottom -->
<!-- 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 about-left">
				<h3 class="heading mb-4">What We Do</h3>
				<p class="mb-3">Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit sed.</p>
				<img src="images/about.jpg" alt="" class="img-fluid"/>
			</div>
			<div class="col-lg-6 grid1 mt-lg-0 mt-4 pl-lg-5">
				<h4 class="my-3">Pellentesque libero justo, semper at tempus vel, ultrices in ligula libero ut justo.</h4>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero ut justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. semper at tempus vel, ultrices in ligula leo sed viverra feugiat Nulla sollicit udin velit.</p>
				<h5 class="mt-md-4 mt-3 mb-2 how-icon"><span class="fa fa-cubes mr-2"></span> Integer libero justo, semper.</h5>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula.</p>
				<h5 class="my-2 how-icon1"><span class="fa fa-cogs mr-2"></span> Integer libero justo, semper.</h5>
				<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit.</p>
			</div>
		</div>
	</div>
</section>
<!-- how it works -->
<!-- stats -->
<section class="stats py-5" id="stats">
	<div class="container py-lg-5 py-md-3">
		<div class="row stat-grids">
			<div class="col-lg-6 stats-left">
				<h3 class="heading mb-4 text-li">Years in the field</h3>
				<p class="mb-3 text-li">Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla	sollicit sed.</p>
				<h4 class="text-wh"><span>20+</span> Years of Experience</h4>
			</div>
			<div class="col-lg-6 grid1 stats-right mt-lg-0 mt-4 pl-5">
				<div class="row">
					<div class="col-sm-4 col-6">
						<p class="text-li">Happy Customers</p>
						<h4 class="text-wh">12k</h4>
						<span class="fa fa-users mr-2"></span>
					</div>
					<div class="col-sm-4 col-6">
						<p class="text-li">Completed Work</p>
						<h4 class="text-wh">15k</h4>
						<span class="fa fa-file mr-2"></span>
					</div>
					<div class="col-sm-4 col-6 mt-sm-0 mt-5">
						<p class="text-li">Total Projects</p>
						<h4 class="text-wh">25k</h4>
						<span class="fa fa-photo mr-2"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //stats -->
<!-- Team section -->
<section class="team py-5" id="team">
    <div class="container py-lg-5">	
		<h3 class="heading mb-5">Our Team Members</h3>
		<div class="section_header">
			<div class="row">
				<div class="col-lg-3 col-sm-6 position-relative">
					<img src="images/team1.jpg" class="team_member img-fluid" alt="Team Member">
					<div class="team_info mt-3 position-absolute">
						<h3 class="team_name">Suzan Lois</h3>
						<span class="team_role">Agency Manager</span>
						<ul class="team-social mt-2">
							<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-linkedin icon_linkedin"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_google-plus"></span></a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-sm-0 mt-4 position-relative">
					<img src="images/team2.jpg" class="team_member img-fluid" alt="Team Member">
					<div class="team_info mt-3 position-absolute">
						<h3 class="team_name">Dora Caelan</h3>
						<span class="team_role">Chief Executive</span>
						<ul class="team-social mt-2">
							<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-linkedin icon_linkedin"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_google-plus"></span></a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4 position-relative">
					<img src="images/team3.jpg" class="team_member img-fluid" alt="Team Member">
					<div class="team_info mt-3 position-absolute">
						<h3 class="team_name">Rosanna</h3>
						<span class="team_role">CEO & Founder</span>
						<ul class="team-social mt-2">
							<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-linkedin icon_linkedin"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_google-plus"></span></a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4 position-relative">
					<img src="images/team4.jpg" class="team_member img-fluid" alt="Team Member">
					<div class="team_info mt-3 position-absolute">
						<h3 class="team_name">Rose Alpha</h3>
						<span class="team_role">Chief Manager</span>
						<ul class="team-social mt-2">
							<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-linkedin icon_linkedin"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_google-plus"></span></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
    </div>
</section>
<!-- //Team section -->
<!-- text -->
<div class="text py-lg-5 py-5 text-center" id="text">
	<div class="container py-lg-5 py-md-3">
		<div class="row">
			<div class="col-md-12">
				<h5 class="text-wh">Traditional / Creative Agencies Also tends to Cover</h5>
				<p>Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor. Vestibulum at dui nunc. Nulla viverra pharetra sem, eget pulvinar neque pharetra ac int. lorem ipsum Vestibulum. placerat placerat dolor. Vestibulum at dui nunc. Nullam eu elit neque lectus.</p>
				<div class="text-center mt-3">
					<a href="contact.html" class="text-capitalize mr-2 work btn">Get In Touch </a>
					<a href="Projects.html" class="text-capitalize mr-2 work btn">Find Projects </a>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- //text -->
<!-- Blog section -->
<section class="blog py-5" id="blog">
    <div class="container py-lg-5">	
		<h3 class="heading mb-5">Checkout Our Blog Posts</h3>
		<div class="row">
			<div class="col-lg-4 col-md-6">
				<img src="images/blog1.jpg" class="img-fluid" alt="Blog Post1">			
				<h4 class="my-3">Pellentesque libero justo.</h4>
				<p>Integer pulvinar leo id viverra feugiat sed. Pellentesque libero ut justo, semper ate tempus vel, ultrices in ligula viverra.</p>
				<p class="mt-1"><span class="fa fa-calendar" aria-hidden="true"></span> 13 Dec 2019</p>
			</div>
			<div class="col-lg-4 col-md-6 mt-md-0 mt-5">
				<img src="images/blog2.jpg" class="img-fluid" alt="Blog Post1">			
				<h4 class="my-3">Pellentesque libero sed.</h4>
				<p>Integer pulvinar leo id viverra feugiat sed. Pellentesque libero ut justo, semper ate tempus vel, ultrices in ligula viverra.</p>
				<p class="mt-1"><span class="fa fa-calendar" aria-hidden="true"></span> 14 Dec 2019</p>
			</div>
			<div class="col-lg-4 col-md-6 mt-lg-0 mt-5">
				<img src="images/blog3.jpg" class="img-fluid" alt="Blog Post1">			
				<h4 class="my-3">Pellentesque et tempus.</h4>
				<p>Integer pulvinar leo id viverra feugiat sed. Pellentesque libero ut justo, semper ate tempus vel, ultrices in ligula viverra.</p>
				<p class="mt-1"><span class="fa fa-calendar" aria-hidden="true"></span> 15 Dec 2019</p>
			</div>
		</div>
    </div>
</section>
<!-- //Blog section -->
<!-- brands -->
<section class="brands py-5" id="brands">
    <div class="container py-lg-0">	
		<div class="row text-center">
			<div class="col-sm-2 col-3">
				<a href="#"><span class="fa fa-connectdevelop" aria-hidden="true"></span></a>
			</div>
			<div class="col-sm-2 col-3">
				<a href="#"><span class="fa fa-empire" aria-hidden="true"></span></a>
			</div>
			<div class="col-sm-2 col-3">
				<a href="#"><span class="fa fa-ioxhost" aria-hidden="true"></span></a>
			</div>
			<div class="col-sm-2 col-3">
				<a href="#"><span class="fa fa-first-order" aria-hidden="true"></span></a>
			</div>
			<div class="col-sm-2 col-3 mt-sm-0 mt-4">
				<a href="#"><span class="fa fa-joomla" aria-hidden="true"></span></a>
			</div>
			<div class="col-sm-2 col-3 mt-sm-0 mt-4">
				<a href="#"><span class="fa fa-dropbox" aria-hidden="true"></span></a>
			</div>
		</div>
    </div>
</section>
<!-- brands -->
<!-- footer -->
<footer class="py-5">
	<div class="container py-md-3">
		<div class="row footer-grids">
			<div class="col-md-4">
				<div class="footer-grid left">
					<h2 class="logo"><a href="index.html"><span class="fa fa-folder-open-o"></span>Official</a></h2>
				</div>
			</div>
			<div class="col-md-4 middle">
				<p class="btn call"> <span class="fa fa-phone"></span> Call: +012 898 909 2317</p>
			</div>
			<div class="col-md-4 right">
				<!-- to top -->
				<div class="top-icon">
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
				<!-- //to top -->
			</div>
		</div>
		<div class="middle mt-3">
			<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
			<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-google-plus icon_google-plus"></span></a></li>
				<li><a href="#"><span class="fa fa-linkedin icon_linkedin"></span></a></li>
				<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
			</ul>
		</div>
	</div>
</footer>
<!-- //footer -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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