红色宽屏形式pc+wap建筑设计企业网页模板代码



4 14 5



模板描述:pc+wap建筑设计企业,红色宽屏形式pc+wap建筑设计企业网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/slick-theme.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/fonticons.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/bootsnav.css">
<link rel="stylesheet" href="assets/css/plugins.css" />
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/colors/maron.css">
<link rel="stylesheet" href="assets/css/responsive.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/slick-theme.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/fonticons.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/bootsnav.css">
<link rel="stylesheet" href="assets/css/plugins.css" />
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/colors/maron.css">
<link rel="stylesheet" href="assets/css/responsive.css" />

2. 引入JS

<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/jquery.magnific-popup.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/jquery.collapse.js"></script>
<script src="assets/js/bootsnav.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/jquery.magnific-popup.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/jquery.collapse.js"></script>
<script src="assets/js/bootsnav.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>

3. HTML代码

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.ico">
<!--Google Font link-->
<!--For Plugins external css-->
<!--<link rel="stylesheet" href="assets/css/plugins.css" />-->
<!--Theme custom css -->
<!--<link rel="stylesheet" href="assets/css/colors/maron.css">-->
<!--Theme Responsive css-->
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<!-- Preloader -->
<div id="loading">
<div id="loading-center">
	<div id="loading-center-absolute">
		<div class="object" id="object_one"></div>
		<div class="object" id="object_two"></div>
		<div class="object" id="object_three"></div>
		<div class="object" id="object_four"></div>
	</div>
</div>
</div><!--End off Preloader -->
<div class="culmn">
<!--Home page style-->
<nav class="navbar navbar-default navbar-fixed white no-background bootsnav">
	<!-- Start Top Search -->
	<div class="top-search">
		<div class="container">
			<div class="input-group">
				<span class="input-group-addon"><i class="fa fa-search"></i></span>
				<input type="text" class="form-control" placeholder="Search">
				<span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
			</div>
		</div>
	</div>
	<!-- End Top Search -->
	<div class="container">    
		<!-- Start Atribute Navigation -->
		<div class="attr-nav">
			<ul>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" >
						<i class="fa fa-shopping-bag"></i>
						<span class="badge">3</span>
					</a>
					<ul class="dropdown-menu cart-list">
						<li>
							<a href="#" class="photo"><img src="assets/images/thumb01.jpg" class="cart-thumb" alt="" /></a>
							<h6><a href="#">Delica omtantur </a></h6>
							<p class="m-top-10">2x - <span class="price">$99.99</span></p>
						</li>
						<li>
							<a href="#" class="photo"><img src="assets/images/thumb01.jpg" class="cart-thumb" alt="" /></a>
							<h6><a href="#">Delica omtantur </a></h6>
							<p class="m-top-10">2x - <span class="price">$99.99</span></p>
						</li>
						<li>
							<a href="#" class="photo"><img src="assets/images/thumb01.jpg" class="cart-thumb" alt="" /></a>
							<h6><a href="#">Delica omtantur </a></h6>
							<p class="m-top-10">2x - <span class="price">$99.99</span></p>
						</li>
						<!---- More List ---->
						<li class="total">
							<span class="pull-right"><strong>Total</strong>: $0.00</span>
							<a href="#" class="btn btn-cart">Cart</a>
						</li>
					</ul>
				</li>
				<li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
				<li class="side-menu"><a href="#"><i class="fa fa-bars"></i></a></li>
			</ul>
		</div>        
		<!-- End Atribute Navigation -->
		<!-- Start Header Navigation -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
				<i class="fa fa-bars"></i>
			</button>
			<a class="navbar-brand" href="#brand">
				<img src="assets/images/logo.png" class="logo logo-display m-top-10" alt="">
				<img src="assets/images/logo.jpg" class="logo logo-scrolled" alt="">
			</a>
		</div>
		<!-- End Header Navigation -->
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="navbar-menu">
			<ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeOutUp">
				<li><a href="#hello">Hello</a></li>                    
				<li><a href="#about">About</a></li>                    
				<li><a href="#service">Services</a></li>                    
				<li><a href="#portfolio">Portfolio</a></li>                    
				<li><a href="#pricing">Pricing</a></li>                    
				<li><a href="#blog">Blog</a></li>                    
				<li><a href="#contact">Contact</a></li>  
			</ul>
		</div><!-- /.navbar-collapse -->
	</div>  
	<!-- Start Side Menu -->
	<div class="side">
		<a href="#" class="close-side"><i class="fa fa-times"></i></a>
		<div class="widget">
			<h6 class="title">Custom Pages</h6>
			<ul class="link">
				<li><a href="#">About</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<div class="widget">
			<h6 class="title">Additional Links</h6>
			<ul class="link">
				<li><a href="#">Retina Homepage</a></li>
				<li><a href="#">New Page Examples</a></li>
				<li><a href="#">Parallax Sections</a></li>
				<li><a href="#">Shortcode Central</a></li>
				<li><a href="#">Ultimate Font Collection</a></li>
			</ul>
		</div>
	</div>
	<!-- End Side Menu -->
</nav>
<!--Home Sections-->
<section id="hello" class="home bg-mega">
	<div class="overlay"></div>
	<div class="container">
		<div class="row">
			<div class="main_home">
				<div class="home_text">
					<h1 class="text-white">WE’RE <br /> CREATIVE DESIGNERS!</h1>
				</div>
				<div class="home_btns m-top-40">
					<a href="https://www.51qianduan.com/">51前端</a>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</div>
		</div><!--End off row-->
	</div><!--End off container -->
</section> <!--End off Home Sections-->
<!--About Sections-->
<section id="about" class="about roomy-100">
	<div class="container">
		<div class="row">
			<div class="main_about">
				<div class="col-md-6">
					<div class="about_content">
						<h2>ABOUT US</h2>
						<div class="separator_left"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
							magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
							quis nostrud exerci tation ullamcorper suscipit lobortis 
							nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
							sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
							euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
							Ut wisi enim ad minim veniam, quis nostrud exerci tation 
							ullamcorper suscipit lobortis nisl ut aliquip 
							ex ea commodo consequat. </p>
						<div class="about_btns m-top-40">
							<a href="" class="btn btn-primary">DOWNLOAD NOW</a>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="about_accordion wow fadeIn">
						<div id="faq_main_content" class="faq_main_content">
							<h6><i class="fa fa-angle-right"></i> UNIQUE DESIGN </h6>
							<div>
								<div class="content">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
										sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
										magna aliquam erat volutpat. Ut wisi enim ad minim veniam, </p>
								</div>
							</div> <!-- End off accordion item-1 -->
							<h6 class="open"><i class="fa fa-angle-right"></i> EXPERIENCE TEAM</h6>
							<div class="open">
								<div class="content">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
										sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
										magna aliquam erat volutpat. Ut wisi enim ad minim veniam, </p>
								</div>
							</div> <!-- End off accordion item-2 -->
							<h6> <i class="fa fa-angle-right"></i> GREAT SERVICE </h6>
							<div>
								<div class="content">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
										sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
										magna aliquam erat volutpat. Ut wisi enim ad minim veniam, </p>
								</div>
							</div> <!-- End off accordion item-3 -->
							<h6><i class="fa fa-angle-right"></i> FREE UPDATES </h6>
							<div>
								<div class="content">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
										sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
										magna aliquam erat volutpat. Ut wisi enim ad minim veniam, </p>
								</div>
							</div> <!-- End off accordion item-4 -->
						</div>
					</div>
				</div>
			</div>
		</div><!--End off row-->
	</div><!--End off container -->
	<br />
	<br />
	<br />
	<br />
	<hr />
	<br />
	<br />
	<div class="container">
		<div class="row">
			<div class="about_bottom_content">
				<div class="col-md-4">
					<div class="about_bottom_item m-top-20">
						<div class="ab_head">
							<div class="ab_head_icon">
								<i class="icofont icofont-fire-burn"></i>
							</div>
							<h6 class="m-top-20"> WE’RE CREATIVE</h6>
						</div>
						<p class="m-top-20">Lorem ipsum dolor sit amet, consectetuer adipiscing ealit, 
							sed diaim nonummy nibsih euismod tincidiunt laorieet doloire
							magna diam aliquafm erat voluitpati. </p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="about_bottom_item m-top-20">
						<div class="ab_head">
							<div class="ab_head_icon">
								<i class="icofont icofont-speech-comments"></i>
							</div>
							<h6 class="m-top-20">WE'RE FRIENDLY</h6>
						</div>
						<p class="m-top-20">Lorem ipsum dolor sit amet, consectetuer adipiscing ealit, 
							sed diaim nonummy nibsih euismod tincidiunt laorieet doloire
							magna diam aliquafm erat voluitpati. </p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="about_bottom_item m-top-20">
						<div class="ab_head">
							<div class="ab_head_icon">
								<i class="icofont icofont-heart"></i>
							</div>
							<h6 class="m-top-20">WE LOVE MINIMALISM</h6>
						</div>
						<p class="m-top-20">Lorem ipsum dolor sit amet, consectetuer adipiscing ealit, 
							sed diaim nonummy nibsih euismod tincidiunt laorieet doloire
							magna diam aliquafm erat voluitpati. </p>
					</div>
				</div>
			</div>
		</div><!--End off row-->
	</div><!--End off container -->
</section> <!--End off About section -->
<!--Video section-->
<section id="video" class="video">
	<div class="overlay"></div>
	<div class="main_video roomy-100 m-top-100 m-bottom-100 text-center">
		<div class="video_text text-center">
			<a href="#" class="video-link"><span class="fa fa-play"></span></a>
		</div>
	</div>
</section><!--End off video section -->
<div class="container">
	<div class="row">
		<div class="main_featured m-top-100">
			<div class="col-sm-12">
				<div class="head_title text-center">
					<h2>FEATURED WORK</h2>
					<div class="separator_auto"></div>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
						sed diam nonummy nibh euismod nostrud exerci tation ullamcorper 
						suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="featured_slider">
	<div>
		<div class="featured_img">
			<img src="assets/images/fprojects/1.jpg" alt="" />
			<a href="https://www.51qianduan.com/">51前端</a>
		</div>
	</div>
	<div>
		<div class="featured_img">
			<img src="assets/images/fprojects/2.jpg" alt="" />
			<a href="https://www.51qianduan.com/">51前端</a>
		</div>
	</div>
	<div>
		<div class="featured_img">
			<img src="assets/images/fprojects/3.jpg" alt="" />
			<a href="https://www.51qianduan.com/">51前端</a>
		</div>
	</div>
	<div>
		<div class="featured_img">
			<img src="assets/images/fprojects/4.jpg" alt="" />
			<a href="https://www.51qianduan.com/">51前端</a>
		</div>
	</div>
	<div>
		<div class="featured_img">
			<img src="assets/images/fprojects/5.jpg" alt="" />
			<a href="https://www.51qianduan.com/">51前端</a>
		</div>
	</div>
</div><!-- End off featured slider -->
<!--Service Section-->
<section id="service" class="service">
	<div class="container">
		<div class="row">
			<div class="main_service roomy-100">
				<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
					<div class="head_title text-center">
						<h2>OUR SERVICES</h2>
						<div class="separator_auto"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod nostrud exerci tation ullamcorper 
							suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="service_item">
						<i class="icofont icofont-light-bulb"></i>
						<h6 class="m-top-30">BRANDING</h6>
						<div class="separator_small"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
							magna aliquam erat volutpat. </p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="service_item">
						<i class="icofont icofont-imac"></i>
						<h6 class="m-top-30">BRANDING</h6>
						<div class="separator_small"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
							magna aliquam erat volutpat. </p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="service_item">
						<i class="icofont icofont-video"></i>
						<h6 class="m-top-30">BRANDING</h6>
						<div class="separator_small"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
							magna aliquam erat volutpat. </p>
					</div>
				</div>
			</div>
		</div><!--End off row -->
	</div><!--End off container -->
</section> <!--End off Featured section-->
<!--Impress section-->
<section id="impress" class="impress roomy-100">
	<div class="overlay"></div>
	<div class="container">
		<div class="row">
			<div class="main_impress text-center">
				<div class="col-sm-8 col-sm-offset-2">
					<h2 class="text-white text-uppercase">Impressed?  Let’s work together</h2>
					<p class="m-top-40 text-white">At vero eos et accusamus et iusto odio dignissimos ducimus qui ditqs praesentium 
						voluptatum deleniti atque corrupti quos dolores et quas molestias</p>
					<div class="impress_btns m-top-30">
						<a href="https://www.51qianduan.com/">51前端</a>
						<a href="https://www.51qianduan.com/">51前端</a>
					</div>
				</div>
			</div>
		</div><!--End off row -->
	</div><!--End off container -->
</section><!-- End off Impress section-->
<!--Portfolio Section-->
<section id="portfolio" class="portfolio lightbg">
	<div class="container">
		<div class="row">
			<div class="main_portfolio roomy-100">
				<div class="col-md-8 col-md-offset-2">
					<div class="head_title text-center">
						<h2>OUR PORTOFLIO</h2>
						<div class="separator_auto"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod nostrud exerci tation ullamcorper 
							suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
					</div>
				</div>
				<div class="portfolio_content">
					<div class="col-md-8">
						<div class="row">
							<div class="col-md-12">
								<div class="portfolio_item">
									<img src="assets/images/Portfolio/2.jpg" alt="" />
									<div class="portfolio_hover text-center">
										<h6 class="text-uppercase text-white">Title</h6>
										<p class=" text-white">Lorem ipsum dolor sit amet</p>
										<div class="portfolio_hover_icon">
											<a href="https://www.51qianduan.com/">51前端</a>
											<a href=""><i class="fa fa-search"></i></a>
										</div>
									</div>
								</div>  
							</div>
							<div class="col-md-6 m-top-30">
								<div class="portfolio_item portfolio_item2">
									<img src="assets/images/Portfolio/3.jpg" alt="" />
									<div class="portfolio_hover text-center">
										<h6 class="text-uppercase text-white">Title</h6>
										<p class=" text-white">Lorem ipsum dolor sit amet</p>
										<div class="portfolio_hover_icon">
											<a href="https://www.51qianduan.com/">51前端</a>
											<a href=""><i class="fa fa-search"></i></a>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-6 m-top-30">
								<div class="portfolio_item portfolio_item2">
									<img src="assets/images/Portfolio/5.jpg" alt="" />
									<div class="portfolio_hover text-center">
										<h6 class="text-uppercase text-white">Title</h6>
										<p class=" text-white">Lorem ipsum dolor sit amet</p>
										<div class="portfolio_hover_icon">
											<a href="https://www.51qianduan.com/">51前端</a>
											<a href=""><i class="fa fa-search"></i></a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="portfolio_item portfolio_item3 sm-m-top-30">
							<img src="assets/images/Portfolio/1.jpg" alt="" />
							<div class="portfolio_hover text-center">
								<h6 class="text-uppercase text-white">Title</h6>
								<p class=" text-white">Lorem ipsum dolor sit amet</p>
								<div class="portfolio_hover_icon">
									<a href="https://www.51qianduan.com/">51前端</a>
									<a href=""><i class="fa fa-search"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 m-top-30">
						<div class="portfolio_item portfolio_item2">
							<img src="assets/images/Portfolio/6.jpg" alt="" />
							<div class="portfolio_hover text-center">
								<h6 class="text-uppercase text-white">Title</h6>
								<p class=" text-white">Lorem ipsum dolor sit amet</p>
								<div class="portfolio_hover_icon">
									<a href="https://www.51qianduan.com/">51前端</a>
									<a href=""><i class="fa fa-search"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-8 m-top-30">
						<div class="portfolio_item">
							<img src="assets/images/Portfolio/4.jpg" alt="" />
							<div class="portfolio_hover text-center">
								<h6 class="text-uppercase text-white">Title</h6>
								<p class=" text-white">Lorem ipsum dolor sit amet</p>
								<div class="portfolio_hover_icon">
									<a href="https://www.51qianduan.com/">51前端</a>
									<a href=""><i class="fa fa-search"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div><!--End off row -->
	</div><!--End off container -->
</section><!-- End off Portfolio section-->
<!--Skill Sections-->
<section id="skill" class="skill roomy-100">
	<div class="container">
		<div class="row">
			<div class="main_skill">
				<div class="col-md-6">
					<div class="skill_content wow fadeIn">
						<h2>Our skill</h2>
						<div class="separator_left"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
							magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
							quis nostrud exerci tation ullamcorper suscipit lobortis 
							nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
							sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
							euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
							Ut wisi enim ad minim veniam, quis nostrud exerci tation 
							ullamcorper suscipit lobortis nisl ut aliquip 
							ex ea commodo consequat. </p>
					</div>
				</div>
				<div class="col-md-6">
					<div class="skill_bar sm-m-top-50">    
						<div class="teamskillbar clearfix m-top-20" data-percent="80%">
							<h6>GRAPHIC DESIGN</h6>
							<div class="teamskillbar-bar"></div>
						</div> <!-- End Skill Bar -->
						<div class="teamskillbar clearfix m-top-50" data-percent="75%">
							<h6>TYPOGRAPHY</h6>
							<div class="teamskillbar-bar"></div>
						</div> <!-- End Skill Bar -->
						<div class="teamskillbar clearfix m-top-50" data-percent="90%">
							<h6>HTML / CSS</h6>
							<div class="teamskillbar-bar"></div>
						</div> <!-- End Skill Bar -->
					</div>
				</div>
			</div>
		</div><!--End off row-->
	</div><!--End off container -->
	<br />
	<br />
	<br />
	<hr />
	<br />
	<br />
	<br />
	<div class="container">
		<div class="row">
			<div class="skill_bottom_content text-center">
				<div class="col-md-3">
					<div class="skill_bottom_item">
						<h2 class="statistic-counter">3468</h2>
						<div class="separator_small"></div>
						<h5><em>Projects Finished</em></h5>
					</div>
				</div>
				<div class="col-md-3">
					<div class="skill_bottom_item">
						<h2 class="statistic-counter">4638</h2>
						<div class="separator_small"></div>
						<h5><em>Happy Clients</em></h5>
					</div>
				</div>
				<div class="col-md-3">
					<div class="skill_bottom_item">
						<h2 class="statistic-counter">3468</h2>
						<div class="separator_small"></div>
						<h5><em>Hours of work</em></h5>
					</div>
				</div>
				<div class="col-md-3">
					<div class="skill_bottom_item">
						<h2 class="statistic-counter">3468</h2>
						<div class="separator_small"></div>
						<h5><em>Cup of coffee</em></h5>
					</div>
				</div>
			</div>
		</div><!--End off row-->
	</div><!--End off container -->
</section> <!--End off Skill section -->
<!--Testimonial Section-->
<section id="testimonial" class="testimonial fix">
	<div class="overlay"></div>
	<div class="container">
		<div class="row">
			<div class="main_testimonial roomy-100">
				<div class="head_title text-center">
					<h2 class="text-white">OUR TESTIMONIALS</h2>
				</div>
				<div class="testimonial_slid text-center">
					<div class="testimonial_item">
						<div class="col-sm-10 col-sm-offset-1">
							<p class="text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
								nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
								Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
								suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
							<div class="test_authour m-top-30">
								<h6 class="text-white m-bottom-20">JOHN DOE - THEMEFOREST USER</h6>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
						</div>
					</div>
					<div class="testimonial_item">
						<div class="col-sm-10 col-sm-offset-1">
							<p class="text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
								nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
								Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
								suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
							<div class="test_authour m-top-30">
								<h6 class="text-white m-bottom-20">JOHN DOE - THEMEFOREST USER</h6>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
						</div>
					</div>
					<div class="testimonial_item">
						<div class="col-sm-10 col-sm-offset-1">
							<p class="text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
								nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
								Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
								suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
							<div class="test_authour m-top-30">
								<h6 class="text-white m-bottom-20">JOHN DOE - THEMEFOREST USER</h6>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
						</div>
					</div>
					<div class="testimonial_item">
						<div class="col-sm-10 col-sm-offset-1">
							<p class="text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
								nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
								Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
								suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
							<div class="test_authour m-top-30">
								<h6 class="text-white m-bottom-20">JOHN DOE - THEMEFOREST USER</h6>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
								<i class="fa fa-star"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div><!--End off row-->
	</div><!--End off container -->
</section> <!--End off Testimonial section -->
<!--Pricing Section-->
<section id="pricing" class="pricing lightbg">
	<div class="container">
		<div class="row">
			<div class="main_pricing roomy-100">
				<div class="col-md-8 col-md-offset-2 col-sm-12">
					<div class="head_title text-center">
						<h2>OUR PRICING</h2>
						<div class="separator_auto"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
							sed diam nonummy nibh euismod tincidunt tation ullamcorper 
							suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
					</div>
				</div>
				<div class="col-md-4 col-sm-12">
					<div class="pricing_item">
						<div class="pricing_head p-top-30 p-bottom-100 text-center">
							<h3 class="text-uppercase">STARTER</h3>
						</div>
						<div class="pricing_price_border text-center">
							<div class="pricing_price">
								<h3 class="text-white">$19</h3>
								<p class="text-white">per month</p>
							</div>
						</div>
						<div class="pricing_body bg-white p-top-110 p-bottom-60">
							<ul>
								<li><i class="fa fa-check-circle text-primary"></i> <span>10</span> user</li>
								<li class="disabled"><i class="fa fa-times-circle"></i> Unlimited Bandwidth</li>
								<li class="disabled"><i class="fa fa-times-circle"></i> Full Statistics</li>
							</ul>
							<div class="pricing_btn text-center m-top-40">
								<a href="" class="btn btn-primary">CHOOSE PLAN</a>
							</div>
						</div>
					</div>
				</div><!-- End off col-md-4 -->
				<div class="col-md-4 col-sm-12">
					<div class="pricing_item sm-m-top-30">
						<div class="pricing_top_border"></div>
						<div class="pricing_head p-top-30 p-bottom-100 text-center">
							<h3 class="text-uppercase">PREMIUM</h3>
						</div>
						<div class="pricing_price_border text-center">
							<div class="pricing_price">
								<h3 class="text-white">$39</h3>
								<p class="text-white">per month</p>
							</div>
						</div>
						<div class="pricing_body bg-white p-top-110 p-bottom-60">
							<ul>
								<li><i class="fa fa-check-circle text-primary"></i> <span>50</span> user</li>
								<li><i class="fa fa-check-circle text-primary"></i> Unlimited Bandwidth</li>
								<li class="disabled"><i class="fa fa-times-circle"></i> Full Statistics</li>
							</ul>
							<div class="pricing_btn text-center m-top-40">
								<a href="" class="btn btn-primary">CHOOSE PLAN</a>
							</div>
						</div>
					</div>
				</div><!-- End off col-md-4 -->
				<div class="col-md-4 col-sm-12">
					<div class="pricing_item sm-m-top-30">
						<div class="pricing_head p-top-30 p-bottom-100 text-center">
							<h3 class="text-uppercase">bUSINESS</h3>
						</div>
						<div class="pricing_price_border text-center">
							<div class="pricing_price">
								<h3 class="text-white">$99</h3>
								<p class="text-white">per month</p>
							</div>
						</div>
						<div class="pricing_body bg-white p-top-110 p-bottom-60">
							<ul>
								<li><i class="fa fa-check-circle text-primary"></i> Unlimited Users</li>
								<li><i class="fa fa-check-circle text-primary"></i> Unlimited Bandwidth</li>
								<li><i class="fa fa-check-circle text-primary"></i> Full Statistics</li>
							</ul>
							<div class="pricing_btn text-center m-top-40">
								<a href="" class="btn btn-primary">CHOOSE PLAN</a>
							</div>
						</div>
					</div>
				</div><!-- End off col-md-4 -->
			</div>
		</div><!--End off row-->
	</div><!--End off container -->
</section> <!--End off Pricing section -->
<!--client brand section-->
<section id="cbrand" class="cbrand">
	<div class="container">
		<div class="row">
			<div class="main_cbrand text-center roomy-100">
				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="cbrand_item m-bottom-10">
						<a href=""><img src="assets/images/clients/1.jpg" alt="" /></a>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="cbrand_item m-bottom-10">
						<a href=""><img src="assets/images/clients/2.jpg" alt="" /></a>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="cbrand_item m-bottom-10">
						<a href=""><img class="" src="assets/images/clients/5.jpg" alt="" /></a>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="cbrand_item m-bottom-10">
						<a href=""><img src="assets/images/clients/4.jpg" alt="" /></a>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="cbrand_item m-bottom-10">
						<a href=""><img src="assets/images/clients/3.jpg" alt="" /></a>
					</div>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6">
					<div class="cbrand_item m-bottom-10">
						<a href=""><img src="assets/images/clients/1.jpg" alt="" /></a> 
					</div>
				</div>
			</div>
		</div><!-- End off row -->
	</div><!-- End off container -->
</section><!-- End off Cbrand section -->
<!--Subscribe section-->
<section id="subscribe" class="subscribe roomy-100 fix">
	<div class="overlay"></div>
	<div class="container">
		<div class="row">
			<div class="main_subscribe text-center">
				<div class="col-sm-8 col-sm-offset-2">
					<h2 class="text-white">SUBSCRIBE US</h2>
					<p class="m-top-30 text-white">At vero eos et accusamus et iusto odio dignissimos 
						ducimus qui blanditiis praesentium</p>
				</div>
				<div class="col-sm-10 col-sm-offset-1">
					<div class="subscribe_btns m-top-40">
						<form class="form-inline">
							<div class="form-group">
								<input type="email" class="form-control" id="inputEmail2" placeholder="Email Address">
							</div>
							<button type="submit" class="btn btn-primary">SUBSCRIBE</button>
						</form>
					</div>
				</div>
			</div>
		</div><!--End off row -->
	</div><!--End off container -->
</section><!-- End off Impress section-->
<!--Blog Section-->
<section id="blog" class="blog">
	<div class="container">
		<div class="row">
			<div class="main_blog text-center roomy-100">
				<div class="col-sm-8 col-sm-offset-2">
					<div class="head_title text-center">
						<h2>RECENT BLOGS</h2>
						<div class="separator_auto"></div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
							sed diam nonummy nibh euismod tincidunt tation ullamcorper 
							suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
					</div>
				</div>
				<div class="col-md-4">
					<div class="blog_item m-top-20">
						<div class="blog_item_img">
							<img src="assets/images/Blog/1.jpg" alt="" />
						</div>
						<div class="blog_text roomy-40">
							<h6>PLEASUARE WITHOUT CONSCIENCE</h6>
							<p><em><a href="">May 15, 2016</a> /<a href="">admin</a>/<a href=""> Co-working</a></em></p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="blog_item m-top-20">
						<div class="blog_item_img">
							<img src="assets/images/Blog/2.jpg" alt="" />
						</div>
						<div class="blog_text roomy-40">
							<h6>PLEASUARE WITHOUT CONSCIENCE</h6>
							<p><em><a href="">May 15, 2016</a> /<a href="">admin</a>/<a href=""> Co-working</a></em></p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="blog_item m-top-20">
						<div class="blog_item_img">
							<img src="assets/images/Blog/3.jpg" alt="" />
						</div>
						<div class="blog_text roomy-40">
							<h6>PLEASUARE WITHOUT CONSCIENCE</h6>
							<p><em><a href="">May 15, 2016</a> /<a href="">admin</a>/<a href=""> Co-working</a></em></p>
						</div>
					</div>
				</div>
			</div>
		</div><!--End off row -->
	</div><!--End off container -->
</section><!-- End off Blog section-->
<!--Maps Section-->
<div class="main_maps text-center fix">
	<div class="overlay"></div>
	<div class="maps_text">
		<h3 class="text-white" onclick="showmap()">FIND US ON THE MAP <i class="fa fa-angle-down"></i></h3>
		<div id="map_canvas" class="mapheight"></div>
	</div>
</div><!-- End off Maps Section-->
<!--Contact Us Section-->
<section id="contact" class="contact bg-mega fix">
	<div class="container">
		<div class="row">
			<div class="main_contact roomy-100 text-white">
				<div class="col-md-4">
					<div class="rage_widget">
						<div class="widget_head">
							<h3 class="text-white">RAGE</h3>
							<div class="separator_small"></div>
						</div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
							sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
							magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
							quis nostrud exerci tation ullamcorper suscipit lobortis nisl
							ut aliquip ex ea commodo consequat. </p>
						<div class="widget_socail m-top-30">
							<ul class="list-inline">
								<li><a href=""><i class="fa fa-facebook"></i></a></li>
								<li><a href=""><i class="fa fa-twitter"></i></a></li>
								<li><a href=""><i class="fa fa-linkedin"></i></a></li>
								<li><a href=""><i class="fa fa-vimeo"></i></a></li>
								<li><a href=""><i class="fa fa-instagram"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-8 sm-m-top-30">
					<form class="" action="subcribe.php">
						<div class="row">
							<div class="col-sm-6">
								<div class="form-group"> 
									<input id="first_name" name="first_name" type="text" placeholder="Name" class="form-control" required="">
								</div>
							</div>
							<div class="col-sm-6">
								<div class="form-group">  
									<input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
								</div>
							</div>
							<div class="col-sm-12">
								<div class="form-group">  
									<textarea class="form-control" rows="6" placeholder="Message"></textarea>
								</div>
								<div class="form-group text-center">
									<a href="" class="btn btn-primary">SEND MESSAGE</a>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div><!--End off row -->
	</div><!--End off container -->
</section><!--End off Contact Section-->
<!-- scroll up-->
<div class="scrollup">
	<a href="#"><i class="fa fa-chevron-up"></i></a>
</div><!-- End off scroll up -->
<footer id="footer" class="footer bg-black">
	<div class="container">
		<div class="row">
			<div class="main_footer text-center p-top-40 p-bottom-30">
				<p class="wow fadeInRight" data-wow-duration="1s">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
			</div>
		</div>
	</div>
</footer>
</div>
</body>
</html>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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