黄色宽屏风格的物业安保公司企业网站源码下载



16 60 21



模板描述:黄色宽屏风格 物业安保公司 企业网站,黄色宽屏风格的物业安保公司企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/meanmenu.min.css">
<link rel="stylesheet" href="css/responsive.css">

2. 引入JS

<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/owl.animate.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.meanmenu.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/custom.js"></script>

3. HTML代码

	<!-- Preloader Start -->
	<div id="preloader">
		<div id="preloader-status"></div>
	</div>
	<!-- Preloader End -->
	<!-- Header Start -->
	<header>
		<!-- Main Menu Start -->
		<div class="hd-style1">
			<!-- Header Top Start -->
			<div class="hd-sec">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-sm-8">
							<div class="hd-lft">
								<ul>
									<li><i class="fa fa-comment-o"></i> 24x7 live Support</li>
									<li><i class="fa fa-phone"></i>(888) 010203-4567</li>
									<li><i class="fa fa-comment"></i>Live Chat</li>
								</ul>
							</div>	
						</div>	
						<div class="col-md-4 col-sm-4">	
							<div class="hd-rgt">
								<span class="follow-title">Follow Us</span>
								<ul>
									<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-pinterest"></i></a></li>
									<li><a href=""><i class="fa fa-google-plus"></i></a></li>
									<li><a href=""><i class="fa fa-vimeo"></i></a></li>
								</ul>
							</div>				
						</div>					
					</div>
				</div>
			</div>
			<!-- Header Top End -->			
			<div class="mnmenu-sec">
				<div class="container">
					<div class="row">
						<div class="col-md-12 nav-menu">
							<div class="col-md-3">
								<div class="logo">
									<a href="index.html"><img src="img/logo2.png" alt=""/></a>
								</div>
							</div>
							<div class="col-md-9">		
								<div class="menu">
									<nav id="main-menu" class="main-menu">
										<ul>
											<li class="active"><a href="index.html">Home</a></li>										 
											<li><a href="project-3-column.html">project<i class="fa fa-angle-down"></i></a>
												<ul>
													<li><a href="project-3-column.html">project 3 column</a></li>
													<li><a href="project-4-column.html">project 4 column</a></li>
												</ul>
											</li> 											
											<li><a href="service-1.html">Service<i class="fa fa-angle-down"></i></a>
												<ul>
													<li><a href="service-1.html">Service 1</a></li>
													<li><a href="service-2.html">Service 2</a></li>
													<li><a href="service-details-1.html">Service details 1</a></li>
													<li><a href="service-details-2.html">Service details 2</a></li>
												</ul>
											</li> 						
											<li><a href="about.html">About</a></li>								
											<li><a href="employees.html">employees</a></li>								
											<li><a href="blog-classic.html">Blog<i class="fa fa-angle-down"></i></a>
												<ul>
													<li><a href="blog-classic.html">Blog classic</a></li>
													<li><a href="blog-3-column.html">Blog 3 column</a></li>
													<li><a href="blog-2-column-sidebar.html">Blog column & sidebar</a></li>
													<li><a href="blog-details.html">Blog Details</a></li>
												</ul>								
											</li>
											<li><a href="contact.html">Contact Us</a></li>
										</ul>
									</nav>
									<div class="menu-icon">	
										<div class="site-search">	
											<i class="fa fa-search"></i>
											<div class="search-forum">
												<form action="#">
													<input placeholder="Search For Site" type="text">
													<input type="submit" value="Go"/>
												</form>							
											</div>							
										</div>
									</div>									
								</div>						
							</div>
						</div>
					</div>
				</div>	
			</div>
		</div>
		<!-- Main Menu End -->
	</header>
	<!-- Header End -->	
	<!-- Slider Section Start -->
	<div class="slider index2">
		<div class="all-slide owl-item">					
			<div class="single-slide" style="background-image:url(img/slide2.jpg);">
				<div class="slider-overlay"></div>
				<div class="slider-text">					
					<div class="slider-wraper">					
						<h1>Grow Up your business more<span> secure</span></h1>
						<p>Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec. Nam vel eu amet, nisl imperdiet nec ad morbi, sodales ipsum, consequat purus vitae integer maecenas. Arcu sit, sit velit at ut eu phasellus</p>
						<ul>
							<li><a href="#">Read More</a></li>
							<li><a href="#">Contact Us</a></li>
						</ul>
					</div>
				</div>
			</div>			
			<div class="single-slide" style="background-image:url(img/slide1.jpg);">
				<div class="slider-overlay"></div>
				<div class="slider-text">						
					<div class="slider-wraper">					
						<h1>We Provide <span>Verified & Secured</span> Service for company</h1>
						<p>Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec. Nam vel eu amet, nisl imperdiet nec ad morbi, sodales ipsum, consequat purus vitae integer maecenas.</p>
						<ul>
							<li><a href="#">Contact Us</a></li>
							<li><a href="#">Read More</a></li>
						</ul>
					</div>
				</div>
			</div>																
		</div>	
	</div>
	<!-- Slider Section End -->	
	<!-- About Start -->
	<div class="about-sec pt-100 pb-100">
		<div class="container">
			<div class="row">
				<div class="col-md-7">
					<div class="about-desc">
						<div class="sec-title">
							<h1><span>About </span>Our Company</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p>						
						</div>	
						<div class="about-countup">
							<div class="counting-inner">
								<div class="countup-text">
									<h2 class="counter">250</h2>
									<h4>Project Done</h4>						
								</div>
							</div>						
							<div class="counting-inner">
								<div class="countup-text">
									<h2 class="counter">280</h2>
									<h4>happy client</h4>						
								</div>
							</div>							
							<div class="counting-inner">
								<div class="countup-text">
									<h2 class="counter">240</h2>
									<h4>Our employees</h4>						
								</div>
							</div>						
						</div>
					</div>	
				</div>	
				<div class="col-md-5">
					<div class="about-us-img">
						<img src="img/about.jpg" alt=""/>
					</div>
				</div>					
			</div>
		</div>		
	</div>
	<!-- About End -->		
	<!-- Why Choose Us Start -->
	<div class="why-choose why-choos-bg">
		<div class="container">			
			<div class="row">	
				<div class="col-md-6"></div>
				<div class="col-md-6 why-choose-us-before">	
					<div class="sec-title">
						<h1><span>Why</span> Choose Us</h1>
					</div>				
					<div class="col-md-6 col-sm-6">
						<div class="why-choose-item">
							<div class="media">
							  <div class="why-choose-icon">
								<a href="#">
								 <img src="img/icon/customer.png" alt=""/>
								</a>
							  </div>
							  <div class="media-body">
								<h2><a href="#">24/7 Support</a></h2>
								<p>Simply dummy text of the printing andrety esetting industry.Lorem ipsum dolor sit amet, ligula magna at etiam.</p>
							  </div>
							</div>
						</div>				
					</div>				
					<div class="col-md-6 col-sm-6">
						<div class="why-choose-item">
							<div class="media">
							  <div class="why-choose-icon">
								<a href="#">
								 <img src="img/icon/employee.png" alt=""/>
								</a>
							  </div>
							  <div class="media-body">
								<h2><a href="#">Expert Employees</a></h2>
								<p>Simply dummy text of the printing andrety esetting industry.Lorem ipsum dolor sit amet, ligula magna at etiam.</p>
							  </div>
							</div>
						</div>							
					</div>							
					<div class="col-md-6 col-sm-6">
						<div class="why-choose-item">
							<div class="media">
							  <div class="why-choose-icon">
								<a href="#">
								 <img src="img/icon/locked.png" alt=""/>
								</a>
							  </div>
							  <div class="media-body">
								<h2><a href="#">Verified Service</a></h2>
								<p>Simply dummy text of the printing andrety esetting industry.Lorem ipsum dolor sit amet, ligula magna at etiam.</p>
							  </div>
							</div>
						</div>
					</div>				
					<div class="col-md-6 col-sm-6">
						<div class="why-choose-item">
							<div class="media">
							  <div class="why-choose-icon">
								<a href="#">
								 <img src="img/icon/lock.png" alt=""/>
								</a>
							  </div>
							  <div class="media-body">
								<h2><a href="#">Secured Service</a></h2>
								<p>Simply dummy text of the printing andrety esetting industry.Lorem ipsum dolor sit amet, ligula magna at etiam.</p>
							  </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>
	<!-- Why Choose Us End -->		
	<!-- Service Start -->	
	<div class="service2-sec pt-100 pb-100">
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="sec-title">
						<h1>What We <span>Offer</span> Here</h1>
						<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim, tellus tincidunt tellus est sed enim varius enim, tellus tincidunt tellus est sedLorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim, tellus tincidunt tellus est sed enim varius enim, tellus tincidunt tellus est sed </p>
					</div>
				</div>
			</div>		
			<div class="row">			
				<div class="service2-item">
					<div class="col-md-4 col-sm-6">
						<div class="service2-inner">
							<div class="media">
								<div class="media-left">
									<div class="service2-icon">
										<img src="img/icon/building.png" alt=""/>
									</div>					
								</div>					
								<div class="media-body">				
									<div class="service2-details">						
										<h2><a href="service-details.html">Office Security</a></h2>
										<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim</p>
										<a href="#">Continue Reading...</a>
									</div>							
								</div>							
							</div>							
						</div>							
					</div>																																	<div class="col-md-4 col-sm-6">
						<div class="service2-inner">
							<div class="media">
								<div class="media-left">
									<div class="service2-icon">
										<img src="img/icon/surveillance.png" alt=""/>
									</div>					
								</div>					
								<div class="media-body">				
									<div class="service2-details">						
										<h2><a href="service-details.html">CCTV Security</a></h2>
										<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim.</p>
										<a href="#">Continue Reading...</a>
									</div>							
								</div>							
							</div>							
						</div>							
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="service2-inner">
							<div class="media">
								<div class="media-left">
									<div class="service2-icon">
										<img src="img/icon/resort.png" alt=""/>
									</div>					
								</div>					
								<div class="media-body">				
									<div class="service2-details">						
										<h2><a href="service-details.html">House Security</a></h2>
										<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim.</p>
										<a href="#">Continue Reading...</a>
									</div>							
								</div>							
							</div>							
						</div>							
					</div>					
					<div class="col-md-4 col-sm-6">
						<div class="service2-inner">
							<div class="media">
								<div class="media-left">
									<div class="service2-icon">
										<img src="img/icon/dollar-coins.png" alt=""/>
									</div>					
								</div>					
								<div class="media-body">				
									<div class="service2-details">						
										<h2><a href="service-details.html">Bank Security</a></h2>
										<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim</p>
										<a href="#">Continue Reading...</a>
									</div>							
								</div>							
							</div>							
						</div>							
					</div>																																	<div class="col-md-4 col-sm-6">
						<div class="service2-inner">
							<div class="media">
								<div class="media-left">
									<div class="service2-icon">
										<img src="img/icon/parking.png" alt=""/>
									</div>					
								</div>					
								<div class="media-body">				
									<div class="service2-details">						
										<h2><a href="service-details.html">Parking Security </a></h2>
										<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim.</p>
										<a href="#">Continue Reading...</a>
									</div>							
								</div>							
							</div>							
						</div>							
					</div>
					<div class="col-md-4 col-sm-6">
						<div class="service2-inner">
							<div class="media">
								<div class="media-left">
									<div class="service2-icon">
										<img src="img/icon/runer-silhouette-running-fast.png" alt=""/>
									</div>					
								</div>					
								<div class="media-body">				
									<div class="service2-details">						
										<h2><a href="service-details.html">Man Security</a></h2>
										<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim.</p>
										<a href="#">Continue Reading...</a>
									</div>							
								</div>							
							</div>							
						</div>							
					</div>																												
				</div>							
			</div>
		</div>		
	</div>		
	<!-- Service End -->	
	<!-- Project Section Start -->
	<div class="project-sec pt-100 pb-70">
		<div class="container">	
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="sec-title">
						<h1><span>Our Gallery </span>Photo</h1>
						<p>Lorem ipsum dolor sit amet, pellentesque enim lorem quis vivamus amet.</p>
					</div>
				</div>
			</div>		
			<div class="row">								
				<div class="col-xs-6 col-sm-4 col-md-4">
					<div class="item">
						<div class="project-thumb">
							<img src="img/g1.jpg" alt="" />
						</div>
						<div class="project-hoverlay">
							<div class="project-text">
								<a href="img/g1.jpg" class="gallery-photo"><i class="fa fa-expand"></i></a>
								<a href="project-details.html"><i class="fa fa-link"></i></a>
							</div>
						</div>
					</div>						
				</div>				
				<div class="col-xs-6 col-sm-4 col-md-4">
					<div class="item">
						<div class="project-thumb">
							<img src="img/g2.jpg" alt="" />
						</div>
						<div class="project-hoverlay">
							<div class="project-text">
								<a href="img/g2.jpg" class="gallery-photo"><i class="fa fa-expand"></i></a>
								<a href="project-details.html"><i class="fa fa-link"></i></a>									
							</div>
						</div>
					</div>						
				</div>				
				<div class="col-xs-6 col-sm-4 col-md-4">
					<div class="item">
						<div class="project-thumb">
							<img src="img/g3.jpg" alt="" />
						</div>
						<div class="project-hoverlay">
							<div class="project-text">
								<a href="img/g3.jpg" class="gallery-photo"><i class="fa fa-expand"></i></a>
								<a href="project-details.html"><i class="fa fa-link"></i></a>									
							</div>
						</div>
					</div>						
				</div>				
				<div class="col-xs-6 col-sm-4 col-md-4">
					<div class="item">
						<div class="project-thumb">
							<img src="img/g4.jpg" alt="" />
						</div>
						<div class="project-hoverlay">
							<div class="project-text">
								<a href="img/g4.jpg" class="gallery-photo"><i class="fa fa-expand"></i></a>
								<a href="project-details.html"><i class="fa fa-link"></i></a>									
							</div>
						</div>
					</div>						
				</div>									
				<div class="col-xs-6 col-sm-4 col-md-4">
					<div class="item">
						<div class="project-thumb">
							<img src="img/g5.jpg" alt="" />
						</div>
						<div class="project-hoverlay">
							<div class="project-text">
								<a href="img/g5.jpg" class="gallery-photo"><i class="fa fa-expand"></i></a>
								<a href="project-details.html"><i class="fa fa-link"></i></a>									
							</div>
						</div>
					</div>						
				</div>	
				<div class="col-xs-6 col-sm-4 col-md-4">
					<div class="item">
						<div class="project-thumb">
							<img src="img/g6.jpg" alt="" />
						</div>
						<div class="project-hoverlay">
							<div class="project-text">
								<a href="img/g6.jpg" class="gallery-photo"><i class="fa fa-expand"></i></a>
								<a href="project-details.html"><i class="fa fa-link"></i></a>									
							</div>
						</div>
					</div>						
				</div>			
			</div>
		</div>		
	</div>
	<!-- Project Section Start -->		
	<!-- Testimonial Section Start -->
	<div class="testimonial-sec pt-100 pb-100">
		<div class="container">				
			<div class="row">
				<div class="col-md-4">
					<div class="testimonial-text">
						<span class="tst-sbtitle">What's say about our client</span>	
						<div class="sec-title">
							<h1><span>Client</span> Review</h1>
						</div>	
						<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim, tellus tincidunt tellus est sed enim varius enim, tellus tincidunt tellus est sed </p>
						<a href="#">See All</a>
					</div>
				</div>
				<div class="col-md-8 no-padding">
					<div class="all-testimonial2">
						<div class="single-testimonial2">							
							<p>Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec.Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec.</p>
							<div class="testimonial2">
								<div class="inner">
									<div class="client-info">
										<h2>David Max</h2>
										<h3>Ceo & Founder</h3>								
									</div>	
								</div>							
								<div class="inner">
									<div class="testimonial2-client-img">
										<img src="img/testimonial1.jpg" alt=""/>
									</div>								
								</div>	
							</div>								
						</div>						
						<div class="single-testimonial2">							
							<p>Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec.Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec.</p>
							<div class="testimonial2">
								<div class="inner">
									<div class="client-info">
										<h2>David Max</h2>
										<h3>Ceo & Founder</h3>								
									</div>	
								</div>							
								<div class="inner">
									<div class="testimonial2-client-img">
										<img src="img/testimonial2.jpg" alt=""/>
									</div>								
								</div>	
							</div>								
						</div>						
						<div class="single-testimonial2">							
							<p>Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec.Lorem ipsum dolor sit amet, ligula magna at etiam aliquip venenatis. Vitae sit felis donec, suscipit tortor et sapien donec ac nec.</p>
							<div class="testimonial2">
								<div class="inner">
									<div class="client-info">
										<h2>David Max</h2>
										<h3>Ceo & Founder</h3>								
									</div>	
								</div>							
								<div class="inner">
									<div class="testimonial2-client-img">
										<img src="img/testimonial3.jpg" alt=""/>
									</div>								
								</div>	
							</div>								
						</div>																										
					</div>		
				</div>
			</div>
		</div>
	</div>
	<!-- Testimonial Section End -->		
	<!-- Team Section Start -->		
	<div class="team-sec pt-100 pb-70">	
		<div class="container">
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="sec-title">
						<h1><span>Our Expert </span>Employees</h1>
						<p>Lorem ipsum dolor sit amet, pellentesque enim lorem quis vivamus amet.</p>
					</div>
				</div>
			</div>		
			<div class="row">		
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="team-member">
						<div class="team-thumb">
							<img src="img/tm.jpg" alt=""/>
							<div class="team-overlay">
								<ul>
									<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-google"></i></a></li>
									<li><a href="#"><i class="fa fa-skype"></i></a></li>
								</ul>							
							</div>							
						</div>
						<h2>Adalberto</h2>
						<h3>Office Security</h3>						
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="team-member">
						<div class="team-thumb">
							<img src="img/tm2.jpg" alt=""/>
							<div class="team-overlay">
								<ul>
									<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-google"></i></a></li>
									<li><a href="#"><i class="fa fa-skype"></i></a></li>
								</ul>							
							</div>							
						</div>
						<h2>Alejandro</h2>
						<h3>House Security</h3>						
					</div>
				</div>					
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="team-member">
						<div class="team-thumb">
							<img src="img/tm3.jpg" alt=""/>
							<div class="team-overlay">
								<ul>
									<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-google"></i></a></li>
									<li><a href="#"><i class="fa fa-skype"></i></a></li>
								</ul>							
							</div>							
						</div>
						<h2>Ambrose</h2>
						<h3>Bank Security</h3>						
					</div>
				</div>	
				<div class="col-md-3 col-sm-6 col-xs-12">
					<div class="team-member">
						<div class="team-thumb">
							<img src="img/tm4.jpg" alt=""/>
							<div class="team-overlay">
								<ul>
									<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-google"></i></a></li>
									<li><a href="#"><i class="fa fa-skype"></i></a></li>
								</ul>							
							</div>							
						</div>
						<h2>Arnoldo</h2>
						<h3>Parking Security </h3>						
					</div>
				</div>																			
			</div>			     
		</div>	
	</div>	
	<!-- Team Section End -->		
	<!-- Appointment Area Start-->
	<div class="appoitment-area">
		<div class="images-overlay"></div>
		<div class="container">			
			<div class="row">	
				<div class="col-md-6 col-sm-6 col-xs-12">
					<div class="faq-sec">				
						<div class="faq-single">
							<div class="media">
								<div class="media-left">
									<div class="icon">
										<img src="img/icon/question.png" alt=""/>
									</div>						
								</div>						
								<div class="media-body">
									<h2>Can I help 24/7</h2>
									<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim, tellus tincidunt tellus est sed mattis, libero elit mi suscipit.</p>
								</div>				
							</div>						
						</div>				
						<div class="faq-single">
							<div class="media">
								<div class="media-left">
									<div class="icon">
										<img src="img/icon/question.png" alt=""/>
									</div>						
								</div>						
								<div class="media-body">
									<h2>Can I refund payment</h2>
									<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim, tellus tincidunt tellus est sed mattis, libero elit mi suscipit.</p>
								</div>				
							</div>						
						</div>					
						<div class="faq-single">
							<div class="media">
								<div class="media-left">
									<div class="icon">
										<img src="img/icon/question.png" alt=""/>
									</div>							
								</div>						
								<div class="media-body">
									<h2>How many year's exprience</h2>
									<p>Lorem ipsum dolor sit amet, luctus posuere semper felis consectetuer hendrerit, enim varius enim, tellus tincidunt tellus est sed mattis, libero elit mi suscipit.</p>
								</div>				
							</div>						
						</div>						
					</div>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-12">
					<div class="appointment-form">		
						<h2>Get A Quote</h2>
						<form>
							<fieldset>
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="sngl-field">
										<input placeholder="Name" name="name" type="text">
									</div>
								</div>						
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="sngl-field">
										<input placeholder="E-mail" name="email" type="email">
									</div>
								</div>																
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="sngl-field">
										<input placeholder="Phone" name="number" type="text">
									</div>
								</div>					
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="sngl-field">
										<input placeholder="Time" name="number" type="text">
									</div>
								</div>									
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="sngl-field">
										<input placeholder="Date" name="date" type="text">
									</div>
								</div>									
								<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
									<div class="sngl-field">
										<div class="select-arrow">
											<select>
											  <option value="subject">Subject</option>
											  <option value="Office Security">Office Security</option>
											  <option value="CCTV Security">CCTV Security</option>
											  <option value="House Security">House Security</option>
											  <option value="Bank Security">Bank Security</option>
											  <option value="Parking Security">Parking Security </option>
											</select>								
										</div>
									</div>
								</div>						
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<div class="sngl-field">
										<textarea placeholder="Message" name="message"></textarea>
									</div>
								</div>
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<div class="filed-submitbtn">
										<input value="Submite Now" name="submit" type="submit">
									</div>
								</div>	
							</fieldset>	
						</form>	
					</div>
				</div>				
			</div>					
		</div>
	</div>	
	<!-- Appointment Area End -->	
	<!-- Blog Section Start -->
	<div class="blog-sec pt-100 pb-80">
		<div class="container">	
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="sec-title">
						<h1><span>Recent</span> News</h1>
						<p>Lorem ipsum dolor sit amet, pellentesque enim lorem quis vivamus amet.</p>
					</div>
				</div>
			</div>			
			<div class="row">								
				<div class="col-md-4 col-sm-6">	
					<div class="media">	
						<div class="single-post">	
							<div class="blog-thumb">
								<img src="img/g1.jpg" alt=""/>
								<a href="blog-details.html">Read More</a>
							</div>											
							<div class="media-body">
								<div class="single-post-desc">									
									<h2><a href="blog-details.html">Post Title Will Be Here</a></h2>
									<p>Lorem ipsum dolor sit amet, vitae mattis vehicula scelerisque suscipit donec, tortor duis phasellus vivamus wisi</p>
									<div class="post-date">
										<ul>
											<li><a href="#"><i class="fa fa-calendar"></i>24 May 2017</a></li>
											<li><a href="#"><i class="fa fa-user"></i>Admin</a></li>
											<li><a href="#"><i class="fa fa-pencil"></i>News</a></li>
										</ul>
									</div>					
								</div>
							</div>
						</div>				
					</div>				
				</div>					
				<div class="col-md-4 col-sm-6">	
					<div class="media">	
						<div class="single-post">	
							<div class="blog-thumb">
								<img src="img/g2.jpg" alt=""/>
								<a href="blog-details.html">Read More</a>
							</div>											
							<div class="media-body">
								<div class="single-post-desc">									
									<h2><a href="blog-details.html">Post Title Will Be Here</a></h2>
									<p>Lorem ipsum dolor sit amet, vitae mattis vehicula scelerisque suscipit donec, tortor duis phasellus vivamus wisi</p>
									<div class="post-date">
										<ul>
											<li><a href="#"><i class="fa fa-calendar"></i>24 May 2017</a></li>
											<li><a href="#"><i class="fa fa-user"></i>Admin</a></li>
											<li><a href="#"><i class="fa fa-pencil"></i>News</a></li>
										</ul>
									</div>					
								</div>
							</div>
						</div>				
					</div>				
				</div>					
				<div class="col-md-4 col-sm-6">	
					<div class="media">	
						<div class="single-post">	
							<div class="blog-thumb">
								<img src="img/g3.jpg" alt=""/>
								<a href="blog-details.html">Read More</a>
							</div>											
							<div class="media-body">
								<div class="single-post-desc">									
									<h2><a href="blog-details.html">Post Title Will Be Here</a></h2>
									<p>Lorem ipsum dolor sit amet, vitae mattis vehicula scelerisque suscipit donec, tortor duis phasellus vivamus wisi</p>
									<div class="post-date">
										<ul>
											<li><a href="#"><i class="fa fa-calendar"></i>24 May 2017</a></li>
											<li><a href="#"><i class="fa fa-user"></i>Admin</a></li>
											<li><a href="#"><i class="fa fa-pencil"></i>News</a></li>
										</ul>
									</div>					
								</div>
							</div>
						</div>				
					</div>				
				</div>				
			</div>
		</div>
	</div>
	<!-- Blog Section End -->	
	<!-- Footer Section Start -->
	<footer>	
		<!-- Footer Top Section Start -->
		<div class="footer-sec">
			<div class="container">
				<div class="row">				
					<div class="col-md-3 col-sm-6">
						<div class="footer-wedget-one">
							<a href="index.html"><img src="img/logo.png" alt=""/></a>
							<p>Lorem ipsum dolor sit amet, nulla fermentum, mollis ac lectus nulla, vel neque, risus non nunc duis lectus, ac id porttitor vulputate donec sed.nulla fermentum, mollis ac lectus nulla, vel neque</p>					
							<div class="footer-social-profile">
								<ul>
									<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-pinterest"></i></a></li>
									<li><a href=""><i class="fa fa-google-plus"></i></a></li>
									<li><a href=""><i class="fa fa-vimeo"></i></a></li>
								</ul>
							</div>							
						</div>
					</div>											
					<div class="col-md-3 col-sm-6">
						<div class="footer-widget-menu">
							<h2>Service links</h2>
							<ul>
								<li><a href="#">Office Security</a></li>
								<li><a href="#">CCTV Security</a></li>
								<li><a href="#">House Security</a></li>
								<li><a href="#">Bank Security</a></li>
								<li><a href="#">Parking Security </a></li>
								<li><a href="#">Man Security</a></li>
							</ul>
						</div>
					</div>	
					<div class="col-md-3 col-sm-6">
						<div class="footer-widget-menu">
							<h2>Support links</h2>
							<ul>
								<li><a href="#">support link</a></li>
								<li><a href="#">faq & help center</a></li>
								<li><a href="#">about us</a></li>
								<li><a href="#">Create Account</a></li>
								<li><a href="#">service and help</a></li>
								<li><a href="#">Contact Us</a></li>
							</ul>
						</div>	
					</div>		
					<div class="col-md-3 col-sm-6">
						<div class="footer-wedget-four">
							<h2>contact us </h2>
								<div class="inner-box">
									<div class="media">
										<div class="inner-item">
											<div class="media-left">
												<span class="icon"><i class="fa fa-map-marker"></i></span>
											</div>				
											<div class="media-body">
												<span class="inner-text">71 Pilgrim Avenue Chevy Chase, MD 20815</span>
											</div>											
										</div>					
									</div>								
									<div class="media">
										<div class="inner-item">
											<div class="media-left">
												<span class="icon"><i class="fa fa-envelope-o"></i></span>
											</div>				
											<div class="media-body">
												<span class="inner-text">yourmail@gmail.com, info@securepress.com</span>
											</div>											
										</div>					
									</div>								
									<div class="media">
										<div class="inner-item">
											<div class="media-left">
												<span class="icon"><i class="fa fa-phone"></i></span>
											</div>				
											<div class="media-body">
												<span class="inner-text">+880 256794, 24-2564687</span>
											</div>											
										</div>					
									</div>											
								</div>							
						</div>
					</div>								
				</div>
			</div>
		</div>
		<!-- Footer Top Section End -->
		<!-- Footer Bottom Section Start -->
		<div class="footer-bottom-sec">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="copy-right">
							<p>&copy; Copyright 2018 <span><a href="#">themeearth,</a></span> Designed by:<span> David Max</span></p>
						</div>
					</div>					
				</div>
			</div>
		</div>
		<!-- Footer Bottom Section End -->
	</footer>
	<!-- Footer Section End -->
	<!-- Scripts Js Start -->
	<!-- Scripts Js End -->	



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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