橙色欧美风格的农业收割服务企业网站源码下载



6 22 8



模板描述:橙色欧美风格 农业收割服务 企业网站,橙色欧美风格的农业收割服务企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.picEyes.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/jquery.chocolat.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/main.js"></script>
<script src="js/easy-responsive-tabs.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

3. HTML代码

<!-- header -->
	<div class="header">
		<div class="container">
			<div class="w3l_header_left">
				<ul>
					<li><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>1143 New Hampshire Washington, USA</li>
					<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> +(010) 221 918 811</li>
					<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a></li>
				</ul>
			</div>
			<div class="w3l_header_right">
				<div class="w3ls-social-icons text-left">
					<a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
					<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
					<a class="pinterest" href="#"><i class="fa fa-pinterest-p"></i></a>
					<a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //header -->
		<!--Slider-->
		<div class="slider">
<div class="header-bottom">
		<div class="container">
			<nav class="navbar navbar-default">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
				  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				  </button>
					<div class="logo">
						<h1><a class="navbar-brand" href="index.html"><span>In</span>Harvest</a></h1>
					</div>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
					<nav class="cl-effect-1" id="cl-effect-1">
						<ul class="nav navbar-nav">
							<li><a href="#home" class="active" data-hover="Home">Home</a></li>
							<li><a href="#about" class="scroll" data-hover="About">About</a></li>
							<li><a href="#services" class="scroll" data-hover="Services">Services</a></li>
							<li><a href="#team" class="scroll" data-hover="Team">Team</a></li>
							<li><a href="#gallery" class="scroll" data-hover="Projects">Gallery</a></li>
							<li><a href="#contact" class="scroll" data-hover="Contact">Contact</a></li>
						</ul>
					</nav>
				</div>
				<!-- /.navbar-collapse -->
			</nav>
			<div class="w3ls_search">
				<div class="cd-main-header">
					<ul class="cd-header-buttons">
						<li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li>
					</ul> <!-- cd-header-buttons -->
				</div>
				<div id="cd-search" class="cd-search">
					<form action="#" method="post">
						<input name="Search" type="search" placeholder="Search...">
					</form>
				</div>
			</div>
		</div>
	</div>
			<div class="callbacks_container">
			<ul class="rslides" id="slider3">
						<li>
							<div class="slider-info">
								<h3>ENVIRONMENT & SUSTAINABILITY</h3>
								<p>Using innovative equipment to reduce time and energy in farming</p>
								<div class="readmore-w3"><a class="readmore" href="#" data-toggle="modal" data-target="#myModal1">Read More</a></div>
							</div>
						</li>
						<li>
							<div class="slider-info">
							<h3>Offering farming solutions worldwide.</h3>
							<p>Cultivating new crops to make farmers increase profits</p>
							<div class="readmore-w3"><a class="readmore" href="#" data-toggle="modal" data-target="#myModal1">Read More</a></div>
						</div>
						</li>
						<li>
						<div class="slider-info">
							<h3>ENVIRONMENT & SUSTAINABILITY</h3>
						    <p>Using innovative equipment to reduce time and energy in farming</p>
							<div class="readmore-w3"><a class="readmore" href="#" data-toggle="modal" data-target="#myModal1">Read More</a></div>
						</div>
						</li>
						<li>
							<div class="slider-info">
							<h3>Offering farming solutions worldwide.</h3>
							<p>Cultivating new crops to make farmers increase profits</p>
							<div class="readmore-w3"><a class="readmore" href="#" data-toggle="modal" data-target="#myModal1">Read More</a></div>
						</div>
						</li>
					</ul>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
						<!-- Modal1 -->
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>In Harvest</h4>
										<img src="images/banner1.jpg" alt=" " class="img-responsive">
										<h5>ENVIRONMENT & SUSTAINABILITY</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
						<!-- //Modal1 -->
		<!--//Slider-->
<!--//Header-->
<!-- about -->
	<div class="about" id="about">
		<div class="container">
		<h3 class="tittle">About Us</h3>
		<p class="heading-btm-w3ls">We are a world-leading provider of agricultural products.</p>
			<div id="horizontalTab">
				<ul class="resp-tabs-list">
					<li>History</li>
					<li>About us</li>
					<li>Our clients </li>
				</ul>
				<div class="resp-tabs-container">
					<div class="tab1">
						<p class="para-w3-agileits">Duis hendrerit lacus vel eros gravida, ac bibendum urna sollicitudin. Ut tempus leo quis diam auctor, et malesuada risus eleifend. Vivamus quis facilisis arcu. Vestibulum quis velit sit amet odio ullamcorper congue id a est.Suspendisse fringilla pellentesque risus sit amet bibendum. id consequat turpis auctor venenatis.</p>
					</div>
					<div class="tab2">
						<p class="para-w3-agileits">Proin congue, est dapibus efficitur egestas, turpis ligula finibus sem, sed lacinia dui risus nec enim. Morbi condimentum, turpis at fringilla condimentum, leo arcu malesuada urna, ut vulputate lectus enim in odio.Donec fringilla hendrerit laoreet. Cras augue urna, convallis mollis dictum at. Phasellus sit amet massa lectus.  </p>
					</div>
					<div class="tab3">
						<div class="clients">
							<ul>
								<li><img src="images/c1.png" alt="clients" class="img-responsive" /><span>Sean Damon</span></li>
								<li><img src="images/c2.png" alt="clients" class="img-responsive" /><span>Natalie Barnes</span></li>
								<li><img src="images/c3.png" alt="clients" class="img-responsive" /><span>John Mccoist</span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>			
			   </div>
		</div>
<!-- //about-bottom -->
<!--sevices-->
<div class="sevices-w3layouts" id="services">
	<div class="container">
	<h3 class="tittle">Our Services</h3>
		<p class="heading-btm-w3ls">Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
		<div class="services-main">
				<div class="col-md-3 sevices-w3layouts-grids wow fadeInUp animated" data-wow-delay=".5s">
					<h5>Cropping</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipi est eligendi scing elit consectetur</p>
					<div class="sevices-w3layouts-img c1">
						<i class="fa fa-pagelines" aria-hidden="true"></i>
						<p>Lorem ipsum</p>
					</div>
				</div>
				<div class="col-md-3 sevices-w3layouts-grids sevices-w3layouts-mdl wow fadeInUp animated" data-wow-delay=".5s">
					<h5>Safety</h5>
					<p>Consectetur adipi lorem ipsum dolor sit amet, est eligendi scing elit consectetur.</p>
					<div class="sevices-w3layouts-img c2">
						<i class="fa fa-globe" aria-hidden="true"></i>
						<p>Lorem ipsum</p>
					</div>
				</div>
				<div class="col-md-3 sevices-w3layouts-grids sevices-w3layouts-mdl1 wow fadeInUp animated" data-wow-delay=".5s">
					<h5>Environment</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipi est eligendi scing elit consectetur.</p>
					<div class="sevices-w3layouts-img c3">
						<i class="fa fa-tree" aria-hidden="true"></i>
						<p>Lorem ipsum</p>
					</div>
				</div>
				<div class="col-md-3 sevices-w3layouts-grids wow fadeInUp animated" data-wow-delay=".5s">
					<h5>Climate Change</h5>
					<p>Consectetur adipi lorem ipsum dolor sit amet, est eligendi scing elit consectetur.</p>
					<div class="sevices-w3layouts-img c4">
						<i class="fa fa-envira" aria-hidden="true"></i>
						<p>Lorem ipsum</p>
					</div>
				</div>
		</div>
				<div class="clearfix"> </div>	
	</div>
</div>
<!--//sevices-->
<!-- team -->
	<div class="team" id="team">
		<div class="container">
			<h3 class="tittle">Meet Our Team</h3>
			<p class="heading-btm-w3ls">Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
			<div class="wthree_team_grids">
				<div class="col-md-3 wthree_team_grid">
					<div class="hovereffect">
						<img src="images/t1.jpg" alt=" " class="img-responsive" />
						<div class="overlay">
							<h6>Lorem ipsum</h6>
							<div class="rotate">
								<p class="group1">
									<a href="#">
										<i class="fa fa-twitter"></i>
									</a>
									<a href="#">
										<i class="fa fa-facebook"></i>
									</a>
								</p>
									<hr>
									<hr>
								<p class="group2">
									<a href="#">
										<i class="fa fa-instagram"></i>
									</a>
									<a href="#">
										<i class="fa fa-dribbble"></i>
									</a>
								</p>
							</div>
						</div>
					</div>
					<h4>Max Payne</h4>
					<p>Field Worker</p>
				</div>
				<div class="col-md-3 wthree_team_grid">
					<div class="hovereffect">
						<img src="images/t2.jpg" alt=" " class="img-responsive" />
						<div class="overlay">
							<h6>Lorem ipsum</h6>
							<div class="rotate">
								<p class="group1">
									<a href="#">
										<i class="fa fa-twitter"></i>
									</a>
									<a href="#">
										<i class="fa fa-facebook"></i>
									</a>
								</p>
									<hr>
									<hr>
								<p class="group2">
									<a href="#">
										<i class="fa fa-instagram"></i>
									</a>
									<a href="#">
										<i class="fa fa-dribbble"></i>
									</a>
								</p>
							</div>
						</div>
					</div>
					<h4>Michael Lii</h4>
					<p>Field Worker</p>
				</div>
				<div class="col-md-3 wthree_team_grid">
					<div class="hovereffect">
						<img src="images/t3.jpg" alt=" " class="img-responsive" />
						<div class="overlay">
							<h6>Lorem ipsum</h6>
							<div class="rotate">
								<p class="group1">
									<a href="#">
										<i class="fa fa-twitter"></i>
									</a>
									<a href="#">
										<i class="fa fa-facebook"></i>
									</a>
								</p>
									<hr>
									<hr>
								<p class="group2">
									<a href="#">
										<i class="fa fa-instagram"></i>
									</a>
									<a href="#">
										<i class="fa fa-dribbble"></i>
									</a>
								</p>
							</div>
						</div>
					</div>
					<h4>Mark</h4>
					<p>Field Worker</p>
				</div>
				<div class="col-md-3 wthree_team_grid">
					<div class="hovereffect">
						<img src="images/t4.jpg" alt=" " class="img-responsive" />
						<div class="overlay">
							<h6>Lorem ipsum</h6>
							<div class="rotate">
								<p class="group1">
									<a href="#">
										<i class="fa fa-twitter"></i>
									</a>
									<a href="#">
										<i class="fa fa-facebook"></i>
									</a>
								</p>
									<hr>
									<hr>
								<p class="group2">
									<a href="#">
										<i class="fa fa-instagram"></i>
									</a>
									<a href="#">
										<i class="fa fa-dribbble"></i>
									</a>
								</p>
							</div>
						</div>
					</div>
					<h4>John Cena</h4>
					<p>Field Worker</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //team -->
<!--blog -->
<div class="blog" id="blog">
	<div class="container">
	<h3 class="tittle">Latest News</h3>
	<p class="heading-btm-w3ls">Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
		<div class="blog-grid-w3-agileits">
			<div class=" col-md-7 blog-img1-agileits-w3layouts">
			<a  href="#" data-toggle="modal" data-target="#myModal2"></a>
			</div>
			<div class=" col-md-5 blog-info-w3layouts">
				<h6> <a  href="#" data-toggle="modal" data-target="#myModal2">FURTHER DEVELOPMENT IN AGRICULTURE GROWTH</a></h6>
				<div class="inner-info">
					<a href="#" class="blog-text-w3ls bar">Lorem ipsum.</a><span>16/11/2016</span>
					<p class="para-w3-agileits">Aenean pulvinar diam vel felis volutpat dictum. Aenean ac tellus suscipit sapien scelerisque tempus non mollis massa.</p>
				</div>
				<a  href="#" class="blog-more-agile" data-toggle="modal" data-target="#myModal2">Read More</a>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="blog-grid-w3-agileits">
			<div class=" col-md-5 blog-info-w3layouts blog-mid">
				<h6><a  href="#" data-toggle="modal" data-target="#myModal3">KEEPING ON ADVANCING THE AGRICULTURE INDUSTRY</a></h6>
				<div class="inner-info-mid">
					<a href="#" class="blog-text-w3ls mid-bar">Lorem ipsum.</a><span>12/10/2016</span>
					<p class="para-w3-agileits">Aenean pulvinar diam vel felis volutpat dictum. Aenean ac tellus suscipit sapien scelerisque tempus non mollis massa.</p>
				</div>
				<a  href="#" class="blog-more-agile" data-toggle="modal" data-target="#myModal3">Read More</a>
			</div>
			<div class=" col-md-7 blog-img2-agileits-w3layouts">
			<a  href="#" data-toggle="modal" data-target="#myModal3"></a>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="blog-grid-w3-agileits">
			<div class=" col-md-7 blog-img3-agileits-w3layouts">
				<a  href="#" data-toggle="modal" data-target="#myModal4"></a>
			</div>
			<div class=" col-md-5 blog-info-w3layouts">
				<h6><a  href="#" data-toggle="modal" data-target="#myModal4"> OUR FIRST STEPS ON THE MARKET AMONG AGRICULTURAL COMPANIES</a></h6>
				<div class="inner-info">
					<a href="#" class="blog-text-w3ls bar">Lorem ipsum.</a><span>06/8/2016</span>
					<p class="para-w3-agileits">Aenean pulvinar diam vel felis volutpat dictum. Aenean ac tellus suscipit sapien scelerisque tempus non mollis massa.</p>
				</div>
				<a  href="#" class="blog-more-agile" data-toggle="modal" data-target="#myModal4">Read More</a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //blog -->
						<!-- Modal2 -->
						<div class="modal fade" id="myModal2" 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>
										<h4>In Harvest</h4>
										<img src="images/b1.jpg" alt=" " class="img-responsive">
										<h5>FURTHER DEVELOPMENT IN AGRICULTURE GROWTH</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
						<!-- //Modal2 -->
						<!-- Modal3 -->
						<div class="modal fade" id="myModal3" 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>
										<h4>In Harvest</h4>
										<img src="images/b2.jpg" alt=" " class="img-responsive">
										<h5>KEEPING ON ADVANCING THE AGRICULTURE INDUSTRY</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
						<!-- //Modal3 -->
						<!-- Modal4 -->
						<div class="modal fade" id="myModal4" 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>
										<h4>In Harvest</h4>
										<img src="images/b3.jpg" alt=" " class="img-responsive">
										<h5>OUR FIRST STEPS ON THE MARKET AMONG AGRICULTURAL COMPANIES</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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
						<!-- //Modal4 -->
 <!--/gallery-->
 <div class="gallery" id="gallery">
	<div class="container">
	<h3 class="tittle">Our Gallery</h3>
	<p class="heading-btm-w3ls">Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
		<div class="agile_gallery_grids w3-agile">
				<ul class="clearfix demo">
					<li>
						<div class="gallery-grid1">
							<img src="images/g1.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g2.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g3.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
							<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g4.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g5.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g6.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g7.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g8.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g9.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g10.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g11.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g12.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4>In <span>Harvest</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
	</div>
</div>
<!--//gallery-->
<!--footer-->
<div class="contact-agile" id="contact">
			<div class="container">
				<h3 class="tittle">Contact Us</h3>
		<p class="heading-btm-w3ls">Suspendisse fringilla pellentesque risus sit amet bibendum.</p>
				<div class="col-md-3 contact-left">
					<h4>Our Address</h4>
					<p>1143 New Hampshire Ave NW,</p>
					<p>Washington,</p>
					<p>DC 20037, USA</p>
					<h4>Phone</h4>
					<p>+(010) 221 918 811</p>
				</div>
				<div class="col-md-9 contact-middle">
					<h2>Say Hello</h2>
					<form action="#" method="post">
					<div class="form-agileinfo">
						<p>Name</p>
						<input type="text" name="your name" placeholder="Your name" required="" />
						<p>Email</p>
						<input type="email" name="your email" placeholder="Your email" required="" />
					</div>
					<div class="form-agileits-w3layouts">
					<p>Comments</p>
						<textarea  name="your message" placeholder="Your message" required="" ></textarea>
							<input type="submit"   value="SEND MESSAGE">
					</div>
					<div class="clearfix"></div>
					</form>
				</div>
			</div>
		</div>
		<div class="map-w3ls">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6209.852593501853!2d-77.0416869731965!3d38.902800718279195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xae69b9ad9dbd5ebf!2sRenaissance+Washington%2C+DC+Dupont+Circle+Hotel!5e0!3m2!1sen!2sin!4v1479208161830"></iframe>
		</div>
			    <div class="bottom-social-w3ls w3ls-social-icons">
					<a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
					<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
					<a class="pinterest" href="#"><i class="fa fa-pinterest-p"></i></a>
					<a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a>
				</div>
			<div class="copy">
		        <p>&copy; 2017 In Harvest . All Rights Reserved | Design by <a href="http://www.51qianduan.com//">xmoban.cn</a> </p>
		    </div>
<!--/footer -->
<!-- js -->
<!--gallery-js -->
				<script>
					$(function(){
						//picturesEyes($('.demo li'));
						$('.demo li').picEyes();
					});
				</script>
<!--//gallery-js -->
<!-- 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 -->
<!--light-box-files -->
<!--//light-box-files -->
		<script type="text/javascript">
		$(function() {
			$('.gallery a').Chocolat();
		});
		</script>
<!-- //js -->
							<script>
								// You can also use "$(window).load(function() {"
								$(function () {
								  // Slideshow 3
								  $("#slider3").responsiveSlides({
									auto: true,
									pager:true,
									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>
		<!--search-bar-->
		<script src="js/main.js"></script>	
<!--//search-bar-->
<!--tabs-->
<script>
$(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
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
$('#verticalTab').easyResponsiveTabs({
type: 'vertical',
width: 'auto',
fit: true
});
});
</script>
<!--//tabs-->
<!-- smooth scrolling -->
	<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="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 橙色 农业 农业产品
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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