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



4 15 6



模板描述:黄色欧美风格 农业服务 企业网站,黄色欧美风格的农业服务企业网站源码下载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 rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link type="text/css" rel="stylesheet" href="css/cm-overlay.css" />
<link href="css/popup-box.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.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.magnific-popup.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/jquery.cm-overlay.js"></script>
<script src="js/jquery.wmuSlider.js"></script>

3. HTML代码

<div class="header-top-w3layouts" id="header">
	<div class="container">
		<div class="col-md-8 navigation">
			<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="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
					<nav class="link-effect-2" id="link-effect-2"> 
						<ul class="nav navbar-nav">
							<li class="active"><a href="index.html">Home</a></li>
							<li><a href="#services" class="scroll"><span data-hover="Services">Services</span></a></li>
							<li><a href="#works" class="scroll"><span data-hover="Works">Works</span></a></li>
							<li><a href="#clients" class="scroll"><span data-hover="Clients">Clients</span></a></li>
							<li><a href="#contact" class="scroll"><span data-hover="Contact">Contact</span></a></li>
						</ul>
					</nav>
				</div>
				</div>
			</nav>
		</div>
		<div class="col-md-4 sign-up">
			<a class="book popup-with-zoom-anim button-isi zoomIn animated" data-wow-delay=".5s" href="#small-dialog2"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>Sign Up</a>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<div class="header-bottom-w3">
	<div class="container">
		<div class="col-md-4 logo-agileits">
			<a href="#"><h1>Plantation</h1></a>
		</div>
		<div class="col-md-8 call-mail-agileinfo">
			<div class="call">
				<h4>Call us</h4>
				<h3>+18045673456</h3>
			</div>
			<div class="mail">
				<h4>Mail us</h4>
				<h3><a href="mailto:info@example.com">info@example.com</a></h3>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<div class="banner-w3l">
	<div class="banner-text-w3ls">
		<h3>What we are</h3>
		<h2>Nulla vitae </h2>
		<p>Vestibulum eu iaculis mauris, vel mattis sem. Duis id tortor ac nunc egestas placerat. Maecenas non consectetur lacus. Phasellus in lectus ligula</p>
		<a href="single.html">Read More</a>
	</div>
</div>
<div class="banner-btm-w3-agile" id="services">
	<div class="container">
		<div class="col-md-6 banner-btm-right-w3ls">
			<div class="col-md-6 banner-btm-right-w3ls-one">
				<div class="gap">
					<div class="grid">
						<figure class="effect-apollo">
							<img src="images/bb1.jpg" alt=" " />
						</figure>
					</div>
				</div>
				<div class="grid">
					<figure class="effect-apollo">
						<img src="images/bb2.jpg" alt=" " />
					</figure>
				</div>
			</div>
			<div class="col-md-6 banner-btm-right-w3ls-two">
				<div class="gap">
					<div class="grid">
						<figure class="effect-apollo">
							<img  src="images/bb3.jpg" alt=" " />
						</figure>
					</div>
				</div>
				<div class="grid">
					<figure class="effect-apollo">
						<img src="images/bb4.jpg" alt=" " />
					</figure>
				</div>
			</div>
		</div>
		<div class="col-md-6 banner-btm-left-w3ls">
			<h3>Services</h3>
			<h4>What we are doing</h4>
			 <p>Resurgent economies, set of complex and intriguing challenges to businesses operating in this environment. Along with the impending outlook towards business expansion and growth.</p>	
			 <p class="w3layouts">Resurgent economies, set of complex and intriguing challenges to businesses operating in this environment. Along with the impending outlook towards business expansion and growth.</p>
			 <a href="single.html">View More</a>
		</div>
		<div class="clearfix"></div>
		</div>	
	</div>
	<!-- //banner-bottom -->
	<!--works-->
	<div class="works" id="works">
		<div class="container">
			<div class="col-md-8 work-left">
				<div class="work-left-top">
					<div class="col-md-8  work-left-top-left">
						<div class="first-img">
							<div class="view second-effect">
								<a class="cm-overlay" href="images/g1.jpg">
									<img src="images/g1.jpg" alt=" " />
									<div class="mask">
									</div>
								</a>
							</div>
						</div>
					</div>
					<div class="col-md-4 work-left-top-right">
						<div class="second-img">
							<div class="view second-effect">
								<a class="cm-overlay" href="images/g2.jpg">
									<img src="images/g2.jpg" alt=" " />
									<div class="mask">
									</div>
								</a>
							</div>
						</div>
						<div class="third-img">
							<div class="view second-effect">
								<a class="cm-overlay" href="images/g3.jpg">
									<img src="images/g3.jpg" alt=" " />
									<div class="mask">
									</div>
								</a>
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="col-md-4 work-right">
				<h3>Works</h3>
				<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis.</p>
				<div class="col-md-6 work-right-left">
					<div class="seventh-img">
							<div class="view second-effect">
								<a class="cm-overlay" href="images/g7.jpg">
									<img src="images/g7.jpg" alt=" " />
									<div class="mask">
									</div>
								</a>
							</div>
					</div>
					<div class="eighth-img">
							<div class="view second-effect">
								<a class="cm-overlay" href="images/g8.jpg">
									<img src="images/g8.jpg" alt=" " />
									<div class="mask">
									</div>
								</a>
							</div>
					</div>
				</div>
				<div class="col-md-6 work-right-right">
					<div class="ninth-img">
							<div class="view second-effect">
								<a class="cm-overlay" href="images/g9.jpg">
									<img src="images/g9.jpg" alt=" " />
									<div class="mask">
									</div>
								</a>
							</div>
					</div>
					<div class="tenth-img">
							<div class="view second-effect">
								<a class="cm-overlay" href="images/g10.jpg">
									<img src="images/g10.jpg" alt=" " />
									<div class="mask">
									</div>
								</a>
							</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- //works-->
			<script>
				$(document).ready(function(){
					$('.cm-overlay').cmOverlay();
				});
			</script>
	<!-- clients-->
	<div class="clients" id="clients">
		<div class="container">
			<h3>Clients</h3>
			<div class="wmuSlider example1 animated wow slideInUp" data-wow-delay=".5s">
					<div class="wmuSliderWrapper">
						<article style="position: absolute; width: 100%; opacity: 0;"> 
							<div class="banner-wrap">
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-4 c-img">
										<img src="images/c1.jpg"  alt="" />								
									</div>
									<div class="col-md-8 c-info">
										<h4>Jackman</h4>
										<h5>Client1</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-4 c-img">
										<img src="images/c2.jpg"  alt="" />								
									</div>
									<div class="col-md-8 c-info">
										<h4>Charlize</h4>
										<h5>Client2</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-4 c-img">
										<img src="images/c3.jpg"  alt="" />								
									</div>
									<div class="col-md-8 c-info">
										<h4>Jessica</h4>
										<h5>Client3</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
						</article>
						<article style="position: absolute; width: 100%; opacity: 0;"> 
							<div class="banner-wrap">
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-4 c-img">
										<img src="images/c4.jpg"  alt="" />								
									</div>
									<div class="col-md-8 c-info">
										<h4>Daniel</h4>
										<h5>Client4</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-4 c-img">
										<img src="images/c5.jpg"  alt="" />								
									</div>
									<div class="col-md-8 c-info">
										<h4>Johnson</h4>
										<h5>Client5</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-4 c-img">
										<img src="images/c6.jpg"  alt="" />								
									</div>
									<div class="col-md-8 c-info">
										<h4>Scarllet</h4>
										<h5>Client6</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
						</article>
					</div>
				</div>
		</div>
	</div>
	<!--//clients-->
			<script src="js/jquery.wmuSlider.js"></script> 
								<script>
									$('.example1').wmuSlider();         
								</script> 
	<!-- news -->
	<div class="news">
		<div class="container">
			<h3>News</h3>
			<div class="agileits_news_grids">
				<div class="tab-1 resp-tab-content">
					<div class="load_more">	
						<ul id="myList">
							<li>
								<div class="l_g">
									<div class="col-md-6 agileits_news_grid_left">
										<div class="agileits_news_grid_left_gridl">
											<p class="para1">28 <span>June- 2016</span></p>
										</div>
										<div class="agileits_news_grid_left_gridr">
											<a href="single.html"><img src="images/n1.jpg" alt=" " class="img-responsive" /></a>
											<h4><a href="single.html">tempora incidunt sit</a></h4>
											<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse 
												quam nihil molestiae consequatur, vel illum qui dolorem.</p>
										</div>
										<div class="clearfix"> </div>
									</div>
									<div class="col-md-6 agileits_news_grid_left">
										<div class="agileits_news_grid_left_gridl">
											<p class="para1">30 <span>June- 2016</span></p>
										</div>
										<div class="agileits_news_grid_left_gridr">
											<a href="single.html"><img src="images/n2.jpg" alt=" " class="img-responsive" /></a>
											<h4><a href="single.html">illumqui dolorem eum</a></h4>
											<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse 
												quam nihil molestiae consequatur, vel illum qui dolorem.</p>
										</div>
										<div class="clearfix"> </div>
									</div>
									<div class="clearfix"> </div>
								</div>
							</li>
							<li>
								<div class="l_g">
									<div class="col-md-6 agileits_news_grid_left">
										<div class="agileits_news_grid_left_gridl">
											<p class="para1">28 <span>June- 2016</span></p>
										</div>
										<div class="agileits_news_grid_left_gridr">
											<a href="single.html"><img src="images/n3.jpg" alt=" " class="img-responsive" /></a>
											<h4><a href="single.html">tempora incidunt eius</a></h4>
											<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse 
												quam nihil molestiae consequatur, vel illum qui dolorem.</p>
										</div>
										<div class="clearfix"> </div>
									</div>
									<div class="col-md-6 agileits_news_grid_left">
										<div class="agileits_news_grid_left_gridl">
											<p class="para1">30 <span>June- 2016</span></p>
										</div>
										<div class="agileits_news_grid_left_gridr">
											<a href="single.html"><img src="images/n4.jpg" alt=" " class="img-responsive" /></a>
											<h4><a href="single.html">illumqui dolorem eum</a></h4>
											<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse 
												quam nihil molestiae consequatur, vel illum qui dolorem.</p>
										</div>
										<div class="clearfix"> </div>
									</div>
									<div class="clearfix"> </div>
								</div>
							</li>
						</ul>
						<div id="loadMore">Load more</div>
						<div id="showLess">Show less</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- //news -->
<script>
	$(document).ready(function () {
		size_li = $("#myList li").size();
		x=1;
		$('#myList li:lt('+x+')').show();
		$('#loadMore').click(function () {
			x= (x+1 <= size_li) ? x+1 : size_li;
			$('#myList li:lt('+x+')').show();
		});
		$('#showLess').click(function () {
			x=(x-1<0) ? 1 : x-1;
			$('#myList li').not(':lt('+x+')').hide();
		});
	});
</script>
<!-- //load-more -->
<div class="team">
	<div class="container">
		<h3>Team</h3>
		<div class="col-md-3 team-grids">
			<img src="images/t1.jpg" alt=" " class="img-responsive">
			<div class="team-social-icons">
				<ul class="team-social-icons">
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="p-mask">
				<h4>Guy Ritchie</h4>
				<h5>Farmer</h5>		
			</div>
		</div>
		<div class="col-md-3 team-grids">
			<img src="images/t2.jpg" alt=" " class="img-responsive">
			<div class="team-social-icons">
				<ul class="team-social-icons">
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="p-mask">
				<h4>Lisa kristen</h4>
				<h5>Farmer</h5>		
			</div>
		</div>
		<div class="col-md-3 team-grids">
			<img src="images/t3.jpg" alt=" " class="img-responsive">
			<div class="team-social-icons">
				<ul class="team-social-icons">
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="p-mask">
				<h4>Rose Alba</h4>
				<h5>Agriculture analyst</h5>		
			</div>
		</div>
		<div class="col-md-3 team-grids">
			<img src="images/t4.jpg" alt=" " class="img-responsive">
			<div class="team-social-icons">
				<ul class="team-social-icons">
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="p-mask">
				<h4>John Doe</h4>
				<h5>Farmer</h5>		
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
	<!-- Contact -->
	<div class="aitscontactw3l" id="contact">
		<div class="container">
			<h3>Contact</h3>
			<form action="#" method="post" class="aitscontactw3l-grids">
				<div class="col-md-3 aitscontactw3l-grid aitscontactw3l-grid-1">
					<input class="fill fill-top" type="text" name="Name" placeholder="Name" required="">
					<input class="fill" type="email" name="Email" placeholder="Email" required="">
				</div>
				<div class="col-md-3 aitscontactw3l-grid aitscontactw3l-grid-2">
					<input class="fill fill-top" type="tel" name="Phone" placeholder="Phone" required="">
					<input class="fill" type="text" name="Place" placeholder="Place" required="">
				</div>
				<div class="col-md-6 aitscontactw3l-grid aitscontactw3l-grid-3">
					<textarea class="fill message" name="Message" placeholder="Message" required=""></textarea>
					<input class="submit" type="submit" name="Send" value="SEND">
				</div>
				<div class="clearfix"></div>
			</form>
		</div>
	</div>
	<!-- //Contact -->
	<!-- Footer -->
	<div class="footer">
		<div class="container">
			<div class="agilefooter-top">
				<!-- Quick-Links -->
				<div class="col-md-6 agilefootergrid footer-nav">
					<ul>
							<li class="active"><a href="#header" class="scroll"><span data-hover="Home">Home</span></a></li>
							<li><a href="#services" class="scroll"><span data-hover="Services">Services</span></a></li>
							<li><a href="#works" class="scroll"><span data-hover="Works">Works</span></a></li>
							<li><a href="#clients" class="scroll"><span data-hover="Clients">Clients</span></a></li>
							<li><a href="#contact" class="scroll"><span data-hover="Contact">Contact</span></a></li>
					</ul>
				</div>
				<!-- //Quick-Links -->
				<!-- Newsletter -->
				<div class="col-md-6 social-icons">
					<ul>
						<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
					</ul>
				</div>
				<!-- //Newsletter -->
			<div class="clearfix"></div>
			</div>
			<div class="agilefooter-bottom">
				<p>&copy; 2017 Plantation. All Rights Reserved | Design by <a href="http://www.51qianduan.com//">xmoban.cn</a></p>
			</div>
		</div>
	</div>
	<!-- //Footer -->
<div class="pop-up"> 
	<div id="small-dialog2" class="mfp-hide book-form">
		<h3>Sign Up</h3>
			<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=""/>	
				<input type="password" name="Password" class="password" placeholder="Confirm Password" required=""/>
				<input type="submit" value="Sign Up">
			</form>
	</div>
</div>	



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


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

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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