棕色宽屏风格的移动APP产品企业网站源码下载



15 58 20



模板描述:棕色宽屏风格 移动APP产品 企业网站,棕色宽屏风格的移动APP产品企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href='http://fonts.useso.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">

2. 引入JS

<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/menu_jquery.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script src="js/jquery.chocolat.js"></script>
<script defer src="js/jquery.flexslider.js"></script>

3. HTML代码

<!--header start here-->
<div class="banner">
  <div class="header">
	<div class="container">
		 <div class="header-main">
				<div class="logo">
					<h1><a href="index.html">Your App</a></h1>
				</div>
				<div class="header-right">
				<div class="top-nav">
					<span class="menu"> <img src="images/icon.png" alt=""/></span>
					<ul class="res">
					   <li><a href="#home" class="scroll active">Home</a></li> 
						<li><a class="scroll" href="#services">Services</a></li> 
						<li><a class="scroll" href="#gallery">Gallery</a></li> 
						<li><a class="scroll" href="#features">Features</a></li> 
						<li><a class="scroll" href="#contact">Contact</a></li> 
				   </ul>
					<!-- script-for-menu -->
						 <script>
						   $( "span.menu" ).click(function() {
							 $( "ul.res" ).slideToggle( 300, function() {
							 // Animation complete.
							  });
							 });
						</script>
		        <!-- /script-for-menu -->
				</div>
				<script type="text/javascript">
					jQuery(document).ready(function($) {
						$(".scroll").click(function(event){		
							event.preventDefault();
							$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
						});
					});
					</script>
			<!---- script-nav ---->
				<div class="top-nav-right">
					<div id="loginContainer"><a href="#" id="loginButton"><span>Login</span></a>
						    <div id="loginBox">                
						        <form id="loginForm">
						                <fieldset id="body">
						                	<fieldset>
						                          <label for="email">Email Address</label>
						                          <input type="text" name="email" id="email">
						                    </fieldset>
						                    <fieldset>
						                            <label for="password">Password</label>
						                            <input type="password" name="password" id="password">
						                     </fieldset>
						                    <input type="submit" id="login" value="Sign in">
						                	<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
						            	</fieldset>
						            <span><a href="#">Forgot your password?</a></span>
							 </form>
				        </div>
				</div>
		         <div class="clearfix"> </div>
			</div>
		 </div>
		 <div class="clearfix"> </div>
	  </div>
		 <div class="banner-bottom">
		 	<h4>voluptatem accusantium doloremque</h4>
		 	<h3>Sed ut perspiciatis omnis voluptatem accusantium</h3>
		 </div>
	 </div>
 </div>
</div>
<!--header end here-->
<!--app info-->
<div class="container">
    <div class="app-info">
		<div class="app-info-main">
			<div class="app-row1">
				<div class="col-md-4 app-info-grid app-gd1">
					<div class="app-in-grd">
						<span class="glyphicon glyphicon-phone" aria-hidden="true"> </span>
						<h3>Neque quisquam </h3>
						<p>Sed ut perspiciatis unde omnis iste natus doloremque laudantium</p>
				    </div>
				</div>
				<div class="col-md-4 app-info-grid app-gd2">
					<div class="app-in-grd">
						<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"> </span>
						<h3>Nemo enim ipsam</h3>
						<p>Sed ut perspiciatis unde omnis iste natus doloremque laudantium</p>
					</div>
				</div>
				<div class="col-md-4 app-info-grid app-gd3">
					<div class="app-in-grd">
						<span class="glyphicon glyphicon-apple" aria-hidden="true"> </span>
						<h3>Lorem is  simply</h3>
						<p>Sed ut perspiciatis unde omnis iste natus doloremque laudantium</p>
					</div>
				</div>
			  <div class="clearfix"> </div>
			</div>
		</div>
	</div>
</div>
<!--//app info-->
<!--services start here-->
<div class="services" id="services">
	<div class="container">
		<div class="services-main">
		  <div class="services-top">
		  	 <h3>Services</h3>
		  	 <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
		  </div>
		  <div class="service-bottom">
			<div class="col-md-4 serv-grids">
				<div class="ser-border">
					<span class="glyphicon glyphicon-envelope" aria-hidden="true"> </span>
					<h4>voluptas sit aspernatur</h4>
					<p>voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
			    </div>
			</div>
			<div class="col-md-4 serv-grids">
				<div class="ser-border">
					<span class="glyphicon glyphicon-user" aria-hidden="true"> </span>
					<h4>voluptas sit aspernatur</h4>
					<p>voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
			    </div>
			</div>
			<div class="col-md-4 serv-grids">
				<div class="ser-border">
					<span class="glyphicon glyphicon-hourglass" aria-hidden="true"> </span>
					<h4>voluptas sit aspernatur</h4>
					<p>voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione</p>
			   </div>
			</div>
		 <div class="clearfix"> </div>
		 </div>
		</div>
	</div>
</div>
<!--app end here-->
<!-- changer start here-->
<div class="changer">
	<div class="container">
		  <div class="changer-top">
					<h3>Future Services</h3>
		  </div>
			  <div class="changer-main">
					<span class="devide-line"> </span>
					<div class="changer-left">
										<img src="images/12.jpg" alt="" class="img-responsive">
					</div>
					<div class="changer-right">
						<h4>App is new Trend</h4>
						<p>Lorem ipsum dolor sit amet, rebum dolore labores Ferri iudico scripta.</p>
					</div>
					<div class="changer-left-snd">
						 <h4>App is new Trend</h4>
					</div>
					<div class="changer-right-snd">
						<img src="images/13.jpg" alt="" class="img-responsive">
					</div>
					<div class="changer-left-trd">
						<img src="images/14.jpg" alt="" class="img-responsive">
					</div>
					<div class="changer-right-trd">
						<h4>We are moving</h4>
						<p>Lorem ipsum dolor sit amet rebum dolore labores.</p>
					</div>
					<div class="changer-left-fvr">
						<h4>We are moving</h4>			
					</div>
					<div class="changer-right-fvr">
						<img src="images/15.jpg" alt="" class="img-responsive">
					</div>
					<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--changer end here-->
<!--content-->
<!--gallery-->
<div class="gallery" id="gallery">
   <div class="container">
	  <div class="gallery-top ">
			<h3>Gallery</h3>
			<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, when an unknown printer took a galley.</p>
		</div>	
		<div class="sap_tabs">
						 <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						  <ul class="resp-tabs-list">
						  	  <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>All</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>Category</span></li>
							  <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Category1</span></li>
							 <li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span>Category2</span></li>
							  <div class="clearfix"> </div>
						  </ul>				  	 
							<div class="resp-tabs-container">
							    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
									<div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g1.jpg" class="img-responsive" alt="">
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g2.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g3.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			     <a href="images/g4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			     	<img src="images/g4.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
							     <div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g5.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g6.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g7.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			     <a href="images/g8.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			     	<img src="images/g8.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
							     <div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g9.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g10.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g10.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g11.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g11.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			     <a href="images/g12.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			     	<img src="images/g12.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
						  </div>
							    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
							     <div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g13.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g13.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g1.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g2.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			     <a href="images/g3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			     	<img src="images/g3.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
							     	<div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g4.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g5.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g6.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
						  </div>
						    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
									  <div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g7.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g8.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g8.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g9.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g9.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
									<div class="col-md-3 img-top ">
					   		  			    <a href="images/g10.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g10.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
							     	<div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g11.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g11.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g12.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g12.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>		        					 
						  </div>
						   <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
						   	<div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g13.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g13.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g1.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g2.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			     <a href="images/g3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			     	<img src="images/g3.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
							     <div class="tab_img">
									  <div class="col-md-3 img-top ">
					   		  			   <a href="images/g4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g4.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			    <a href="images/g5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			    	<img src="images/g5.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			   <a href="images/g6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			   	<img src="images/g6.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
										<div class="col-md-3 img-top ">
					   		  			     <a href="images/g7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
					   		  			     	<img src="images/g7.jpg" class="img-responsive" alt=""/>
												 <div class="link-top">
												 <i class="link"> </i>
												 </div>
					   		  			   </a>
										</div>
											<div class="clearfix"> </div>
							     </div>	
						   	</div>		
                  </div>
             </div>
         </div>
    </div>	
</div>
<!--gallery-->
		    <script type="text/javascript">
			    $(document).ready(function () {
			        $('#horizontalTab').easyResponsiveTabs({
			            type: 'default', //Types: default, vertical, accordion           
			            width: 'auto', //auto or any width like 600px
			            fit: true   // 100% fit in a container
			        });
			    });
</script>
<!--script-->
		<!--light-box-files -->
		<script type="text/javascript" charset="utf-8">
		$(function() {
			$('.img-top a').Chocolat();
		});
		</script>
<!--features start here-->
<div class="features" id="features">
	<div class="container">
		<div class="features-main">
			<div class="fea-top">
			  <h3>Amazing Features</h3>
			  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p>
			</div>
			<div class="feature-botttom">
					<div class="feature-bott1">
						<div class="col-md-6 fea-grid">
							<div class="col-md-5 fea-img">
								<a href="#"><img src="images/f1.jpg" alt="" class="img-responsive"></a>
							</div>
							<div class="col-md-7 fea-text">
								<h4><a href="#">Et iusto odio dignissimos</a></h4>
								<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>
							 </div>
						  <div class="clearfix"> </div>
						</div>
						<div class="col-md-6 fea-grid">
							<div class="col-md-5 fea-img">
								<a href="#"><img src="images/f2.jpg" alt="" class="img-responsive"></a>
							</div>
							<div class="col-md-7 fea-text">
								<h4><a href="#">Ducimus odio dignissimos</a></h4>
								<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>
							</div>
						</div>
					   <div class="clearfix"> </div>
				   </div>
				   <div class="feature-bott1">
						<div class="col-md-6 feature-grid">
							<div class="col-md-5 fea-img">
								<a href="#"><img src="images/f3.jpg" alt="" class="img-responsive"></a>
							</div>
							<div class="col-md-7 fea-text">
								<h4><a href="#">Et iusto odio dignissimos</a></h4>
								<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>
							</div>
						  <div class="clearfix"> </div>
						</div>
						<div class="col-md-6 feature-grid">
							<div class="col-md-5 fea-img">
								<a href="#"><img src="images/f4.jpg" alt="" class="img-responsive"></a>
							</div>
							<div class="col-md-7 fea-text">
								<h4><a href="#">Ducimus odio dignissimos</a></h4>
								<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>
							</div>
						</div>
					   <div class="clearfix"> </div>
				   </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--features end here->
<!--clients start here-->
<div class="client">
	<div class="container">
		<div class="clients-main">
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
			  <section class="slider">
						<div class="flexslider">
							<ul class="slides">
								<li>
									<img src="images/w.jpg" alt="" class="img-responsive">
									<h4>Neque porro quisquam</h4>
									<h5>CEO & Director</h5>
								</li>
								<li>	
									<img src="images/w1.jpg" alt="" class="img-responsive">
									<h4>Neque porro quisquam</h4>
									<h5>CEO & Director</h5>
								</li>
								<li>
									<img src="images/w2.jpg" alt="" class="img-responsive">
									<h4>Neque porro quisquam</h4>
									<h5>CEO & Director</h5>
								</li>	
								<div class="clearfix"> </div>
							</ul>
						</div>
			</section>
		</div>
	</div>
</div>
<!-- FlexSlider -->
				  <script type="text/javascript">
					$(function(){
					  SyntaxHighlighter.all();
					});
					$(window).load(function(){
					  $('.flexslider').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				  </script>
			<!-- FlexSlider -->
<!--clients end here-->
<!--contact start here-->
<div class="contact" id="contact">
	<div class="container">
		<div class="contact-main">
			  <h3>Contact Us</h3>
			  <form>
			  	<div class="input-main">
			  	  <span class="glyphicon glyphicon-user" aria-hidden="true"> </span>
			  	   <input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
			  	</div>
			  	<div class="input-main">
			  	  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
			  	  <input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
			  	</div>
			  	<div class="input-main">
			  	   <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
			  	   <input type="text" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
			  	</div>
				  	<textarea onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Messages';}">Messages</textarea>
			  	<input type="submit" value="Send">
			  </form>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--//contact-->
<!--map statrt here-->
<div class="map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d127640.75918330808!2d103.8466694772479!3d1.3111268075660079!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da11238a8b9375%3A0x887869cf52abf5c4!2sSingapore!5e0!3m2!1sen!2sin!4v1436965675589"> </iframe>
</div>
<!--map start here-->
<!--copy right start here-->
<div class="copy-right-main">
	<div class="container">
        <div class="copy-right">
			<p>© 2015 Your App All rights reserved | Design by  <a href="http://www.51qianduan.com//" target="_blank">  xmoban.cn </a></p>
		</div>
		<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>
						<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!--copy right end here-->
   </div>
</div>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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