红色欧美风格的商务企业网站源码下载



20 76 26



模板描述:红色欧美风格 商务 企业网站,红色欧美风格的商务企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/popup-box.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/mislider.css" rel="stylesheet" type="text/css" />
<link href="css/mislider-custom.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/main-gallery.css" type="text/css" media="screen" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300i,400,400i,600,600i,700" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/popup-box.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/mislider.css" rel="stylesheet" type="text/css" />
<link href="css/mislider-custom.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/main-gallery.css" type="text/css" media="screen" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300i,400,400i,600,600i,700" rel="stylesheet">

2. 引入JS

<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countup.js"></script>
<script src="js/mislider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countup.js"></script>
<script src="js/mislider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代码

<!--
Author: xmoban.cn
Author URL: http://www.xmoban.cn
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Newcomer a Corporate Business Category Bootstrap Responsive website Template | Home :: xmoban.cn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Newcomer Responsive web template,    
	 " />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" type="text/css" rel="stylesheet" media="all"> 
<link rel="stylesheet" href="css/main-gallery.css" type="text/css" media="screen" />  <!-- flexslider-CSS --> 
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">		<!-- font-awesome icons -->
<!-- //Custom Theme files --> 
<!-- web-fonts -->  
<!-- //web-fonts -->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">  
	<!-- banner -->
	<div id="home" class="w3ls-banner"> 
		<!-- banner-text -->
		<div class="slider">
			<div class="callbacks_container">
				<ul class="rslides callbacks callbacks1" id="slider4">
					<li>
						<div class="w3layouts-banner-top">
							<div class="container">
								<div class="agileits-banner-info">
									<h3>Look Always Only <span>Successful</span></h3>
											<p>NEXT MEETUP  |  30.03.2017  |  10:00 AM</p>
									<div class="agileits_w3layouts_more menu__item">
				<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
			</div>
								</div>	
							</div>
						</div>
					</li>
					<li>
						<div class="w3layouts-banner-top w3layouts-banner-top1">
							<div class="container">
								<div class="agileits-banner-info">
									<h3>Work Life Balance <span>Reality</span></h3>
										<p>NEXT MEETUP  |  30.03.2017  |  9:00 AM</p>
									<div class="agileits_w3layouts_more menu__item">
				<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
			</div>
								</div>	
							</div>
						</div>
					</li>
					<li>
						<div class="w3layouts-banner-top w3layouts-banner-top2">
							<div class="container">
								<div class="agileits-banner-info">
									<h3>Look Always Only <span>Successful</span></h3>
									<p>NEXT MEETUP  |  30.03.2017  |  9:00 AM</p>
									<div class="agileits_w3layouts_more menu__item">
											<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
										</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
			<!--banner Slider starts Here-->
		</div>
		    <div class="thim-click-to-bottom">
				<a href="#about" class="scroll">
					<i class="fa fa-long-arrow-down" aria-hidden="true"></i>
				</a>
			</div>
	</div>	
	<!-- //banner --> 
			<!-- header -->
		<div class="header-w3layouts"> 
			<!-- Navigation -->
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container">
					<div class="navbar-header page-scroll">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
							<span class="sr-only">Newcomer</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h1><a class="navbar-brand" href="index.html"><span>N</span>ewcomer</a></h1>
					</div> 
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse navbar-ex1-collapse">
						<ul class="nav navbar-nav navbar-right">
							<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
							<li class="hidden"><a class="page-scroll scroll" href="#page-top"></a>	</li>
							<li><a class="page-scroll scroll" href="#home">Home</a></li>
							<li><a class="page-scroll scroll" href="#about">About</a></li>
							<li><a class="page-scroll scroll" href="#work">Works</a></li>
							<li><a class="page-scroll scroll" href="#team">Team</a></li>
							<li><a class="page-scroll scroll" href="#plans">Plans</a></li>
							<li><a class="page-scroll scroll" href="#gallery">Projects</a></li>
							<li><a class="page-scroll scroll" href="#contact">Contact</a></li>
						</ul>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container -->
			</nav>  
		</div>	
		<!-- //header -->
<!-- about -->
<div class="about" id="about">
 <div class="col-md-6 ab-w3-agile-img">
	  </div>
      <div class="col-md-6 ab-w3-agile-info">
	   <div class="ab-w3-agile-info-text">
	   <p class="sub-text one">Who We Are</p>
	     <h2 class="title-w3">About Us</h2>
		 <p>Lorem ipsum dolor sit amet, consectetur adipisc elit. Proin ultricies vestibulum velit.Lorem ipsum dolor sit amet.when an unknown printer took a galley of type and scrambled it to make a type specimen book.Proin ultricies vestibulum velit.Lorem ipsum dolor sit amet.when an unknown printer took  Proin ultricies vestibulum velit.Lorem ipsum dolor sit amet</p>
			<div class="agileits_w3layouts_more menu__item one">
				<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
			</div>
		  </div>
		  <div class="ab-w3-agile-inner">
	       <div class="col-md-6 ab-w3-agile-part">
				<h4>Awesome Features</h4>
		     <p>Lorem ipsum dolor sit amet, consectetur adipisc elit.</p>
	       </div>
			 <div class="col-md-6 ab-w3-agile-part two">
				<h4>Awesome Features</h4>
		     <p>Lorem ipsum dolor sit amet, consectetur adipisc elit.</p>
	       </div>
			<div class="clearfix"></div>		   
	  </div>	
   </div>	 	  
		<div class="clearfix"></div>
</div>
	<!-- //about -->
											<!-- Modal1 -->
													<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
														<div class="modal-dialog">
														<!-- Modal content-->
															<div class="modal-content">
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	<img src="images/2.jpg" alt=" " class="img-responsive">
																	<h5>Donec lobortis pharetra dolor</h5>
																	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, rds which don't look even slightly believable..</p>
																</div>
															</div>
														</div>
													</div>
													<!-- //Modal1 -->
		<!-- /classes-->
   <!-- //classes-->
				<!-- Modal2-->
								<div class="pop-up"> 
			<div id="small-dialog" class="mfp-hide book-form">
				<h4>Sign Up Form </h4>
				<form action="#" method="post">
					<input type="text" name="Name" placeholder="Your Name" required=""/>
					<input type="text" name="Email" class="email" placeholder="Email" required=""/>
					<input type="password" name="Password" class="password" placeholder="Password" required=""/>	
					<div class="check-box">
						<input name="chekbox" type="checkbox" id="brand" value="">
						<label for="brand"><span></span>Remember Me.</label>
					</div>
					<input type="submit" value="Sign Up">
				</form>
			</div>
		</div>
						<!-- //Modal2 -->		
	<!-- instructors -->
		<!--/featured-projects-->
<div class="featured-section" id="work">
  <div class="container">
		 <p class="sub-text">Work Details</p>
		       <h3 class="title-w3">Our Works</h3>
			<div class="content-bottom-in">
					<ul id="flexiselDemo1">			
						   <li>
						     <div class="project-fur">
								<a href="#" data-toggle="modal" data-target="#myModal" ><img class="img-responsive" src="images/p1.jpg" alt="" />	</a>
									<div class="fur">
										<h4>MARTIN NIXON</h4>
									</div>	
							 </div>
							</li>
							<li>
						    <div class="project-fur">
								<a href="#" data-toggle="modal" data-target="#myModal" ><img class="img-responsive" src="images/p2.jpg" alt="" />	</a>
									<div class="fur">
										<h4>MARTIN NIXON</h4>
									</div>	
							 </div>
							</li>
						    <li>
						      <div class="project-fur">
								<a href="#" data-toggle="modal" data-target="#myModal" ><img class="img-responsive" src="images/p3.jpg" alt="" />	</a>
									<div class="fur">
										<h4>MARTIN NIXON</h4>
									</div>	
							 </div>
							</li>
							 <li>
						      <div class="project-fur">
								<a href="#" data-toggle="modal" data-target="#myModal" ><img class="img-responsive" src="images/p4.jpg" alt="" />	</a>
									<div class="fur">
										<h4>MARTIN NIXON</h4>
									</div>	
							 </div>
							</li>
					</ul>
		</div>
	</div>
</div>
<!--//featured-projects-->
<!-- counter -->
	<div class="services-bottom stats services">
		<div class="container">
		  <div class="wthree-agile-counter">
			<div class="col-md-3 w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">324</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>Creative Design</h4>
			</div>
			<div class="col-md-3 w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">543</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>Happy Clients</h4>
			</div>
			<div class="col-md-3 w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">434</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>People Loved</h4>
			</div>
			<div class="col-md-3 w3_agile_stats_grid">
				<div class="agile_count_grid_left">
					<span class="fa fa-trophy" aria-hidden="true"></span>
				</div>
				<div class="agile_count_grid_right">
					<p class="counter">234</p> 
				</div>
				<div class="clearfix"> </div>
				<h4>Win Awards</h4>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //counter -->
   <!--/price -->
     <div class="team" id="team">
		  <p class="sub-text">Who we are</p>
			<h3 class="title-w3">Meet our team</h3>
		<div class="mis-stage"> 
				<!-- The element to select and apply miSlider to - the class is optional -->
				<ol class="mis-slider">
					<!-- The slider element - the class is optional -->
					<li class="mis-slide"> 
					<!-- A slide element - the class is optional --> 
						<a href="#" class="mis-container"> 
						<!-- A slide container - this element is optional, if absent the plugin adds it automatically -->
						<figure> 
						<!-- Slide content - whatever you want --> 
						<img src="images/t1.jpg" alt=" " class="" />
						<figcaption>Carl Lii</figcaption>
						</figure>
						</a> </li>
					<li class="mis-slide"> <a href="#" class="mis-container">
						<figure> <img src="images/t2.jpg" alt=" " class="" />
						<figcaption>Michael Paul</figcaption>
						</figure>
						</a> </li>
					<li class="mis-slide"> <a href="link" class="mis-container">
						<figure> <img src="images/t3.jpg" alt=" " class="img" />
						<figcaption>Henry Doe</figcaption>
						</figure>
						</a> </li>
					<li class="mis-slide"> <a href="#" class="mis-container">
						<figure> <img src="images/t4.jpg" alt=" " class="img" />
						<figcaption>Laura James</figcaption>
						</figure>
						</a> </li>
					<li class="mis-slide"> <a href="#" class="mis-container">
						<figure> <img src="images/t2.jpg" alt=" " class="img" />
						<figcaption>Thomas Carl</figcaption>
						</figure>
						</a> </li>
				</ol>
		</div>	
	  </div>	
	<!--//prices -->
	  <!--/price -->
     <div class="main" id="plans">
		 <div class="container">
			 <p class="sub-text">Pricing Details</p>
			<h3 class="title-w3 three">Our Plans</h3>
			<div class="plans-section">
						<div class="priceing-table-main">
				 <div class="col-md-3 price-grid">
					<div class="price-block agile">
						<div class="price-gd-top pric-clr1">
							<h4>Basic Plan</h4>
							<h3>$10</h3>
						   <h5>Per Month</h5>
						</div>
						<div class="price-gd-bottom">
							<div class="price-list">
								<ul>
									<li>Free setup</li>
									<li>GB Storage 10</li>
									<li>Unlimited User</li>
									<li>GB Bandwidth 20</li>
								</ul>
							</div>
							<div class="price-selet pric-sclr1">		    			   
								<a href="#" data-toggle="modal" data-target="#myModal1" >Sign Up</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3 price-grid">
					<div class="price-block agile">
						<div class="price-gd-top pric-clr2">
							<h4>Enhanced</h4>
							<h3>$30</h3>
							<h5>Per Month</h5>
						</div>
						<div class="price-gd-bottom">
							<div class="price-list">
								<ul>
									<li>Free setup</li>
									<li>GB Storage 30</li>
									<li>Unlimited User</li>
									<li>GB Bandwidth 30</li>
								</ul>
							</div>
							<div class="price-selet pric-sclr2">
								<a href="#" data-toggle="modal" data-target="#myModal1" >Sign Up</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3 price-grid lost">
					<div class="price-block agile">
						<div class="price-gd-top pric-clr3">
							<h4>Premium</h4>
							<h3>$60</h3>
							<h5>Per Month</h5>
						</div>
						<div class="price-gd-bottom">
							<div class="price-list">
								<ul>
									<li>Free setup</li>
									<li>GB Storage 40</li>
									<li>Unlimited User</li>
									<li>GB Bandwidth 20</li>
								</ul>
							</div>
							<div class="price-selet pric-sclr3">
								<a href="#" data-toggle="modal" data-target="#myModal1" >Sign Up</a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-3 price-grid wthree lost">
					<div class="price-block agile">
						<div class="price-gd-top pric-clr4">
							<h4>Unlimited</h4>
							<h3>$90</h3>
							<h5>Per Month</h5>
						</div>
						<div class="price-gd-bottom">
							<div class="price-list">
								<ul>
									<li>Free setup</li>
									<li>GB Storage 50</li>
									<li>Unlimited User</li>
									<li>GB Bandwidth 40</li>
								</ul>
							</div>
							<div class="price-selet pric-sclr4">
								<a href="#" data-toggle="modal" data-target="#myModal1" >Sign Up</a>
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	<!-- Modal1 -->
						<div class="modal fade" id="myModal1" role="dialog">
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header book-form">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>Sign up Form</h4>
										<form action="#" method="post">
												<input type="text" name="Name" placeholder="Your Name" required=""/>
												<input type="text" name="Email" class="email" placeholder="Email" required=""/>
												<input type="password" name="Password" class="password" placeholder="Password" required=""/>	
												<div class="check-box">
													<input name="chekbox" type="checkbox" id="brand1" value="">
													<label for="brand1"><span></span>Remember Me.</label>
												</div>
												<input type="submit" value="Sign Up">
											</form>
									</div>
								</div>
							</div>
						</div>
						<!-- //Modal1 -->
		</div>	
	  </div>	
	<!--//prices -->
				<!-- gallery -->
	<div class="gallery" id="gallery">
	 <p class="sub-text">Project Details</p>
			<h3 class="title-w3">Our Projects</h3>
		<div class="container">
			<div class="gallery-grids carouselGallery-grid hidden-xs">
				<div class="col-md-4 gallery-grid">
					<div class="carouselGallery-col-1 carouselGallery-carousel" data-likes="3144" data-index="0" data-username=" " data-imagetext="At vero eos et accusamus et iusto odio 
						 dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores." 
						data-location="Project1" data-imagepath="images/p1.jpg" data-posturl="#" 
						style="background-image:url(images/p1.jpg);">
						<div class="carouselGallery-item">
							<div class="carouselGallery-item-meta">
								<span class="carouselGallery-item-meta-user">
								Newcomer
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 gallery-grid">
					<div class="carouselGallery-col-1 carouselGallery-carousel" data-likes="3144" data-index="1" data-username=" " data-imagetext="Occaecati at vero eos et accusamus et iusto odio 
						  dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores." 
						data-location="Project2" data-imagepath="images/p2.jpg" data-posturl="#" 
						style="background-image:url(images/p2.jpg);">
						<div class="carouselGallery-item">
							<div class="carouselGallery-item-meta">
								<span class="carouselGallery-item-meta-user">
								Newcomer
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 gallery-grid">
					<div class="carouselGallery-col-1 carouselGallery-carousel" data-likes="3144" data-index="2" data-username=" " data-imagetext="similique sunt in culpa qui
						  dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores Et harum quidem rerum facilis est et expedita distinctio." 
						data-location="Project3" data-imagepath="images/p3.jpg" data-posturl="#" 
						style="background-image:url(images/p3.jpg);">
						<div class="carouselGallery-item">
							<div class="carouselGallery-item-meta">
								<span class="carouselGallery-item-meta-user">
								Newcomer
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 gallery-grid">
					<div class="carouselGallery-col-1 carouselGallery-carousel" data-likes="3144" data-index="3" data-username=" " data-imagetext="At vero eos et accusamus et iusto odio 
						  dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores." 
						data-location="Project4" data-imagepath="images/p4.jpg" data-posturl="#" 
						style="background-image:url(images/p4.jpg);">
						<div class="carouselGallery-item">
							<div class="carouselGallery-item-meta">
								<span class="carouselGallery-item-meta-user">
								Newcomer
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 gallery-grid">
					<div class="carouselGallery-col-1 carouselGallery-carousel" data-likes="3144" data-index="4" data-username=" " data-imagetext="Similique sunt in culpa qui at vero eos et accusamus et iusto odio 
							 dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores." 
						data-location="Project5" data-imagepath="images/p5.jpg" data-posturl="#" 
						style="background-image:url(images/p5.jpg);">
						<div class="carouselGallery-item">
							<div class="carouselGallery-item-meta">
								<span class="carouselGallery-item-meta-user">
								Newcomer
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 gallery-grid">
					<div class="carouselGallery-col-1 carouselGallery-carousel" data-likes="3144" data-index="5" data-username=" " data-imagetext="At vero eos et accusamus et iusto odio 
						 dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores." 
						data-location="Project6" data-imagepath="images/p6.jpg" data-posturl="#" 
						style="background-image:url(images/p6.jpg);">
						<div class="carouselGallery-item">
							<div class="carouselGallery-item-meta">
								<span class="carouselGallery-item-meta-user">
								Newcomer
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
				</div>
			</div>
	</div>
	<!-- //gallery -->
	 <!-- //classes-->
   <div class="testmonials" id="monials">
		<div id="particles-js1"></div>
		   <div class="client-top">
		    <p class="sub-text">Our Clients</p>
		  <h3 class="title-w3 three">People Says</h3>
		    <div class="slider">
					<div class="callbacks_container">
						<ul class="rslides" id="slider3">
							<li>
								 <div class="agileits-clients">
									<div class=" client_agile_info">
											<div class="c-img"><i class="fa fa-quote-right"></i> </div>
											<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
											<h4><img src="images/m1.jpg" alt="">Alice Lengthorn</h4>
									</div>
								</div>
							</li>
							<li>
							<div class="agileits-clients">
								<div class="client_agile_info">
                                        <div class="c-img"><i class="fa fa-quote-right"></i> </div>
										<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
										<h4><img src="images/m2.jpg" alt=""> Martin Pal</h4>
								</div>
								<div class="clearfix"></div>
								</div>
							</li>
							<li>
							<div class="agileits-clients">
							     <div class=" client_agile_info">
                                        <div class="c-img"><i class="fa fa-quote-right"></i> </div>
										<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
										<h4><img src="images/m3.jpg" alt="">MARTIN NIXON</h4>
								</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				</div>
	</div>	
	<!--//prices -->
	<!-- Contact -->
	<div class="agile-contact">
		<div class="col-md-6 contact-map-right">
			<div id="map"></div>
		</div>
		<div class="col-md-6 left-contact">
		<div class="con-bot">
			<div class="left-bw3">
				<h5><i class="fa fa-map-marker" aria-hidden="true"></i>Address</h5>
				<p>New York 3000</p>
				<p>40019 Honey Street,</p>
				<p>Morocco Casablanca</p>
			</div>
			<div class="right-bw3">
				<h5><i class="fa fa-phone" aria-hidden="true"></i>Phone</h5>
				<p>Telephone : +1 (734) 123-4567</p>
				<p>+2158 85467</p>
				<p>+2158 85467</p>
			</div>
			<div class="clearfix"></div>
		</div>
			<div class="cont-top">
			<h5><i class="fa fa-envelope-o" aria-hidden="true"></i>Email</h5>
			<a href="mailto:info@example.com">info@example.com</a>
		</div>
	</div>
	<div class="clearfix"></div>
</div>
	<div class="contact" id="contact">
	<div id="particles-js2"></div>
		<div class="contact-top">
		<p class="sub-text">Choose Your Style</p>
			<h3 class="title-w3 con">Contact Us</h3>
			<form action="#" method="post" class="contact_form slideanim">
				<div class="message">
					<div class="col-md-6 col-sm-6 grid_6 c1">
						<input type="text" class="margin-right" Name="Name" placeholder="Name" required="">
						<input type="email" Name="Email" placeholder="Email" required="">
						<input type="text" class="margin-right" Name="Phone Number" placeholder="Phone Number" required="">
					</div>
					<div class="col-md-6 col-sm-6 grid_6 c1">
						<textarea name="Message" placeholder="Message" required=""></textarea>
					</div>
					<div class="clearfix"></div>
				</div>
				<input type="submit" value="SEND MESSAGE">
			</form>
				<section class="social">
                        <ul>
							<li><a class="icon fb" href="#"><i class="fa fa-facebook"></i></a></li>
							<li><a class="icon tw" href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a class="icon pin" href="#"><i class="fa fa-pinterest"></i></a></li>
							<li><a class="icon db" href="#"><i class="fa fa-dribbble"></i></a></li>
							<li><a class="icon gp" href="#"><i class="fa fa-google-plus"></i></a></li>
						</ul>
					</section>
		</div>
	</div>
	<!-- //Contact -->
<!-- footer-top -->	
	<div class="footer-top">
		<div class="container">
			<div class="col-md-3 foot-left">
				<h3>About Us</h3>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
			</div>
			<div class="col-md-3 foot-left">
					<h3>Get In Touch</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting.</p>
						<div class="contact-btm">
							<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
							<p>90 Street, City, State 34789.</p>
						</div>
						<div class="contact-btm">
							<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
							<p>+456 123 7890</p>
						<div class="contact-btm">
						</div>
							<span class="fa fa-envelope-o" aria-hidden="true"></span>
							<p><a href="mailto:example@email.com">info@example.com</a></p>
						</div>
						<div class="clearfix"></div>
			</div>
			<div class="col-md-3 foot-left">
				<h3>Latest Works</h3>
				<ul>
				<li><a href="#"><img src="images/a1.jpg" alt="" class="img-responsive"></a></li>
				<li><a href="#"><img src="images/a2.jpg" alt="" class="img-responsive"></a></li>
				<li><a href="#"><img src="images/a2.jpg" alt="" class="img-responsive"></a></li>
				<li><a href="#"><img src="images/a1.jpg" alt="" class="img-responsive"></a></li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="col-md-3 foot-left">
			<h3>Subscribe</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and Lorem Ipsum has </p>
			<form action="#" method="post">	
					<input type="email" Name="Enter Your Email" placeholder="Enter Your Email" required="">
				<input type="submit" value="Subscribe">
			</form>
			</div>
				<div class="clearfix"></div>
		</div>
	</div>
<!-- /footer-top -->							
<!-- footer -->
			<div class="copy-right">
				<p>&copy; 2017 Newcomer. All rights reserved | Design by <a href="http://www.51qianduan.com//">xmoban.cn</a></p>
			</div>
<!-- //footer -->
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<script src="js/jquery-2.2.3.min.js"></script> 
<!-- skills -->
			<script>
						// You can also use "$(window).load(function() {"
						$(function () {
						  // Slideshow 4
						  $("#slider4").responsiveSlides({
							auto: true,
							pager:true,
							nav:false,
							speed: 500,
							namespace: "callbacks",
							before: function () {
							  $('.events').append("<li>before event fired.</li>");
							},
							after: function () {
							  $('.events').append("<li>after event fired.</li>");
							}
						  });
						});
			</script>
			<script>
								// You can also use "$(window).load(function() {"
								$(function () {
								  // Slideshow 4
								  $("#slider3").responsiveSlides({
									auto: true,
									pager:false,
									nav:true,
									speed: 500,
									namespace: "callbacks",
									before: function () {
									  $('.events').append("<li>before event fired.</li>");
									},
									after: function () {
									  $('.events').append("<li>after event fired.</li>");
									}
								  });
								});
							 </script>
 <!-- js -->
<!-- search-jQuery -->
<!-- pop-up-box -->
			<!--//pop-up-box -->
			<script>
				$(document).ready(function() {
					$('.popup-with-zoom-anim').magnificPopup({
						type: 'inline',
						fixedContentPos: false,
						fixedBgPos: true,
						overflowY: 'auto',
						closeBtnInside: true,
						preloader: false,
						midClick: true,
						removalDelay: 300,
						mainClass: 'my-mfp-zoom-in'
					});														
				});
			</script>
		<!-- Map-JavaScript -->
			<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>        
			<script type="text/javascript">
				google.maps.event.addDomListener(window, 'load', init);
				function init() {
					var mapOptions = {
						zoom: 11,
						center: new google.maps.LatLng(40.6700, -73.9400),
						styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
					};
					var mapElement = document.getElementById('map');
					var map = new google.maps.Map(mapElement, mapOptions);
					var marker = new google.maps.Marker({
						position: new google.maps.LatLng(40.6700, -73.9400),
						map: map,
					});
				}
			</script>
			<!-- stats -->
		<script>
			$('.counter').countUp();
		</script>
<!-- //stats -->
	<!-- //Map-JavaScript -->
		<script type="text/javascript">
			jQuery(function ($) {
				var slider = $('.mis-stage').miSlider({
					//  The height of the stage in px. Options: false or positive integer. false = height is calculated using maximum slide heights. Default: false
					stageHeight: 320,
					//  Number of slides visible at one time. Options: false or positive integer. false = Fit as many as possible.  Default: 1
					slidesOnStage: false,
					//  The location of the current slide on the stage. Options: 'left', 'right', 'center'. Defualt: 'left'
					slidePosition: 'center',
					//  The slide to start on. Options: 'beg', 'mid', 'end' or slide number starting at 1 - '1','2','3', etc. Defualt: 'beg'
					slideStart: 'mid',
					//  The relative percentage scaling factor of the current slide - other slides are scaled down. Options: positive number 100 or higher. 100 = No scaling. Defualt: 100
					slideScaling: 150,
					//  The vertical offset of the slide center as a percentage of slide height. Options:  positive or negative number. Neg value = up. Pos value = down. 0 = No offset. Default: 0
					offsetV: -5,
					//  Center slide contents vertically - Boolean. Default: false
					centerV: true,
					//  Opacity of the prev and next button navigation when not transitioning. Options: Number between 0 and 1. 0 (transparent) - 1 (opaque). Default: .5
					navButtonsOpacity: 1,
				});
			});
		</script>
	<script type="text/javascript">
						$(window).load(function() {
							$("#flexiselDemo1").flexisel({
								visibleItems:3,
								animationSpeed: 1000,
								autoPlay: true,
								autoPlaySpeed: 3000,    		
								pauseOnHover: true,
								enableResponsiveBreakpoints: true,
						    	responsiveBreakpoints: { 
						    		portrait: { 
						    			changePoint:480,
						    			visibleItems: 1
						    		}, 
						    		landscape: { 
						    			changePoint:640,
						    			visibleItems: 2
						    		},
						    		tablet: { 
						    			changePoint:768,
						    			visibleItems: 2
						    		}
						    	}
						    });
						});
			</script>
<!-- start-smoth-scrolling -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
			$().UItoTop({ easingType: 'easeOutQuart' });
			});
	</script>
<!-- //here ends scrolling icon -->
</body>
</html>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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