綠色簡潔風格的奶牛養殖企業網站源碼下載



5 16 6



模板描述:綠色簡潔風格 奶牛養殖 企業網站,綠色簡潔風格的奶牛養殖企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Montserrat:200,200i,300,400,400i,500,500i,600,600i,700,700i,800" rel="stylesheet">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.vide.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/counterup.min.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. HTML代碼

	<!-- banner -->
	<div class="banner_top" id="home">
		<div data-vide-bg="video/farm">
			<div class="center-container">
				<!-- top_header_agile_info_w3ls -->
				<div class="top_header_agile_info_w3ls">
					<nav class="navbar navbar-default">
						<div class="navbar-header navbar-left">
							<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>
							<h1><a class="navbar-brand" href="index.html"><span>F</span>arm</a></h1>
						</div>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
							<div class="w3l_header_left">
								<ul>
									<li><a class="sign" href="#" data-toggle="modal" data-target="#myModal2"><i class="fa fa-user" aria-hidden="true"></i></a>										</li>
									<li><i class="fa fa-phone" aria-hidden="true"></i> +(010) 221 918 811</li>
									<li><i class="fa fa-envelope-o" aria-hidden="true"></i> <a href="mailto:[email protected]">[email protected]</a></li>
								</ul>
							</div>
							<div class="clearfix"> </div>
							<div id="m_nav_container" class="m_nav wthree_bg">
								<nav class="menu menu--sebastian">
									<ul id="m_nav_list" class="m_nav menu__list">
										<li class="m_nav_item active" id="m_nav_item_1"> <a href="index.html" class="link link--kumya"><i class="fa fa-home" aria-hidden="true"></i><span data-letters="Home">Home</span></a></li>
										<li class="m_nav_item" id="moble_nav_item_3"> <a href="about.html" class="link link--kumya"><i class="fa fa-info-circle" aria-hidden="true"></i><span data-letters="About Us">About Us</span></a></li>
										<li class="m_nav_item" id="moble_nav_item_4"> <a href="gallery.html" class="link link--kumya"><i class="fa fa-picture-o" aria-hidden="true"></i><span data-letters="Gallery">Gallery</span></a></li>
										<li class="m_nav_item dropdown" id="moble_nav_item_2">
											<a href="#" class="dropdown-toggle link link--kumya" data-toggle="dropdown"><i class="fa fa-file-text-o" aria-hidden="true"></i><span data-letters="Pages">Pages <b class="caret"></b></a>
											<ul class="dropdown-menu agile_short_dropdown">
												<li><a href="icons.html">Web Icons</a></li>
												<li><a href="typography.html">Typography</a></li>
											</ul>
										</li>
										<li class="m_nav_item" id="moble_nav_item_6"> <a href="contact.html" class="link link--kumya"><i class="fa fa-envelope-o" aria-hidden="true"></i><span data-letters="Contact">Contact</span></a></li>
									</ul>
								</nav>
							</div>
						</div>
					</nav>
				</div>
				<!--// top_header_agile_info_w3ls -->
				<!--/slider-->
				<div class="banner_wthree_agile_info">
					<div class="slider">
						<div class="callbacks_container">
							<ul class="rslides callbacks callbacks1" id="slider4">
								<li>
									<div class="agileits-banner-info">
										<h4>Star To day</h4>
										<h3>Real Milk</h3>
										<p>Fresh Cream</p>
										<div class="more">
											<a href="single.html" class="hvr-shutter-in-vertical"> Read More<span class="glyphicon glyphicon-arrow-right"></span></a>
										</div>
									</div>
								</li>
								<li>
									<div class="agileits-banner-info">
										<h4>Star To day</h4>
										<h3>Sweet Cream</h3>
										<p>Fresh Milk</p>
										<div class="more">
											<a href="single.html" class="hvr-shutter-in-vertical">Read More <span class="glyphicon glyphicon-arrow-right"></span></a>
										</div>
									</div>
								</li>
								<li>
									<div class="agileits-banner-info">
										<h4>Star To day</h4>
										<h3>Real Taste</h3>
										<p>Fresh Cream</p>
										<div class="more">
											<a href="single.html" class="hvr-shutter-in-vertical">Read More <span class="glyphicon glyphicon-arrow-right"></span></a>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--//slider-->
			</div>
		</div>
	</div>
	<!-- //banner -->
	<!-- Modal1 -->
	<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>
					<div class="signin-form profile">
						<h3 class="agileinfo_sign">Sign In</h3>
						<div class="login-form">
							<form action="#" method="post">
								<input type="email" name="email" placeholder="E-mail" required="">
								<input type="password" name="password" placeholder="Password" required="">
								<div class="tp">
									<input type="submit" value="Sign In">
								</div>
							</form>
						</div>
						<div class="login-social-grids">
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-rss"></i></a></li>
							</ul>
						</div>
						<p><a href="#" data-toggle="modal" data-target="#myModal3"> Don't have an account?</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //Modal1 -->
	<!-- Modal2 -->
	<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>
					<div class="signin-form profile">
						<h3 class="agileinfo_sign">Sign Up</h3>
						<div class="login-form">
							<form action="#" method="post">
								<input type="text" name="name" placeholder="Username" required="">
								<input type="email" name="email" placeholder="Email" required="">
								<input type="password" name="password" placeholder="Password" required="">
								<input type="password" name="password" placeholder="Confirm Password" required="">
								<input type="submit" value="Sign Up">
							</form>
						</div>
						<p><a href="#"> By clicking register, I agree to your terms</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //Modal2 -->
	<!-- banner-bottom -->
	<div class="banner-bottom">
		<div class="container">
			<div class="col-md-7 banner_bottom_left">
				<h2 class="title-w3-agileits one">Welcome To Our Farm!</h2>
				<p><i>Fresh and Local Delivered </i> Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
					ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
					vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
				<div class="more wthree_more1 ">
					<a href="index.html" class="hvr-shutter-in-vertical" data-toggle="modal" data-target="#myModal">Read More<span class="glyphicon glyphicon-arrow-right"></span></a>
				</div>
			</div>
			<div class="col-md-5 banner_bottom_right">
				<div class="img_agile">
					<img src="images/ab.jpg" class="img-responsive" alt="" />
				</div>
			</div>
			<div class="clearfix"> </div>
			<div class="banner_bottom_agile_grids">
				<div class="wthree_banner_bottom_right_grids">
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-eye" aria-hidden="true"></i>
								<h3>Our Dairy Farm</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a1.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-building-o" aria-hidden="true"></i>
								<h3>Meet Our Cows</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a2.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-eraser" aria-hidden="true"></i>
								<h3>High quality </h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a3.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
								<h3>Meet Our Cows</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a4.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- banner-bottom -->
	<div class="services">
		<div class="container">
			<h3 class="title-w3-agileits two">Services We Do</h3>
			<p class="quia">What We Do</p>
			<div class="wthree_services_bottom_left banner_bottom_agile_grids">
				<div class="wthree_services_bottom_left_grid">
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
						<div class="agile_services_bottom_l_grid1">
							<img src="images/1.jpg" alt=" " class="img-responsive" />
							<div class="w3_service_bottom_grid_pos">
								<h3>Farm</h3>
							</div>
						</div>
						<div class="serve_info_agile two">
							<h4>Consectetur adip</h4>
							<p>Lorem Ipsum</p>
						</div>
					</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
						<div class="agile_services_bottom_l_grid1">
							<img src="images/2.jpg" alt=" " class="img-responsive" />
							<div class="w3_service_bottom_grid_pos">
								<h3>Farm</h3>
							</div>
						</div>
						<div class="serve_info_agile two">
							<h4>Consectetur adip</h4>
							<p>Lorem Ipsum</p>
						</div>
					</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
						<div class="agile_services_bottom_l_grid1">
							<img src="images/3.jpg" alt=" " class="img-responsive" />
							<div class="w3_service_bottom_grid_pos">
								<h3>Farm</h3>
							</div>
						</div>
						<div class="serve_info_agile two">
							<h4>Consectetur adip</h4>
							<p>Lorem Ipsum</p>
						</div>
					</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
						<div class="agile_services_bottom_l_grid1">
							<img src="images/4.jpg" alt=" " class="img-responsive" />
							<div class="w3_service_bottom_grid_pos">
								<h3>Farm</h3>
							</div>
						</div>
						<div class="serve_info_agile">
							<h4>Consectetur adip</h4>
							<p>Lorem Ipsum</p>
						</div>
					</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
						<div class="agile_services_bottom_l_grid1">
							<img src="images/5.jpg" alt=" " class="img-responsive" />
							<div class="w3_service_bottom_grid_pos">
								<h3>Farm</h3>
							</div>
						</div>
						<div class="serve_info_agile">
							<h4>Consectetur adip</h4>
							<p>Lorem Ipsum</p>
						</div>
					</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
						<div class="agile_services_bottom_l_grid1">
							<img src="images/6.jpg" alt=" " class="img-responsive" />
							<div class="w3_service_bottom_grid_pos">
								<h3>Farm</h3>
							</div>
						</div>
						<div class="serve_info_agile">
							<h4>Consectetur adip</h4>
							<p>Lorem Ipsum</p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<!-- grids -->
	<div class="grids-w3l">
		<div class="grids-agile">
			<div class="col-md-6 agile-w3l-grids">
				<h3 class="title-w3-agileits one">Our Products</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua,consectetur
					adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
				<div class="w3lsstatsaits-info">
					<div class="col-md-4 col-sm-4 col-xs-4 w3lsstatsaits-grid w3lsstatsaits-grid-1">
						<div class="w3lsstatsaitsstats counter" data-slno='1' data-min='0' data-max='9000' data-delay='.5' data-increment=4>7000</div>
						<p>Happy Clients</p>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4 w3lsstatsaits-grid w3lsstatsaits-grid-2">
						<div class="w3lsstatsaitsstats counter" data-slno='1' data-min='0' data-max='17000' data-delay='8' data-increment="1">16000</div>
						<p>Cows</p>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4 w3lsstatsaits-grid w3lsstatsaits-grid-3">
						<div class="w3lsstatsaitsstats counter" data-slno='1' data-min='0' data-max='12000' data-delay='.5' data-increment="11">12000</div>
						<p>Awards</p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="col-md-6 agile-w3l-img-grids-w3ls">
				<div class="col-md-6 agile-w3l3-grids w3_agileits_services_bottom_l_grid w3l-agileits">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/7.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos mid_gd">
							<h3>Milk</h3>
						</div>
					</div>
				</div>
				<div class="col-md-6 agile-w3l3-grids w3_agileits_services_bottom_l_grid w3l-agileits">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/8.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos mid_gd">
							<h3>Butter</h3>
						</div>
					</div>
				</div>
				<div class="col-md-6 agile-w3l3-grids w3_agileits_services_bottom_l_grid w3l-agileits">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/9.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos mid_gd">
							<h3>Curd</h3>
						</div>
					</div>
				</div>
				<div class="col-md-6 agile-w3l3-grids w3_agileits_services_bottom_l_grid w3l-agileits">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/10.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos mid_gd">
							<h3>Cheese</h3>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- //grids -->
	<!-- testimonials -->
	<div class="testimonials">
		<div class="container">
			<h3 class="title-w3-agileits two">Testimonials</h3>
			<p class="quia">What our customers say</p>
			<div class="w3_testimonials_grids">
				<section class="slider">
					<div class="flexslider">
						<ul class="slides">
							<li>
								<div class="w3_testimonials_grid">
									<img src="images/c1.png" alt=" " class="img-responsive" />
									<h4><i class="fa fa-quote-left" aria-hidden="true"></i> <i>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
										impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.</i></h4>
									<h5>John Frank</h5>
								</div>
							</li>
							<li>
								<div class="w3_testimonials_grid">
									<img src="images/c2.png" alt=" " class="img-responsive" />
									<h4><i class="fa fa-quote-left" aria-hidden="true"></i> <i>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
										impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.</i></h4>
									<h5>Michael Doe</h5>
								</div>
							</li>
							<li>
								<div class="w3_testimonials_grid">
									<img src="images/c3.png" alt=" " class="img-responsive" />
									<h4><i class="fa fa-quote-left" aria-hidden="true"></i> <i>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
										impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.</i></h4>
									<h5>Thomas Carl</h5>
								</div>
							</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
	<!-- //testimonials -->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="col-md-3 w3agile_footer_grid">
				<h3>About Us</h3>
				<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus.
				</p>
			</div>
			<div class="col-md-2 w3agile_footer_grid">
				<h3>Links</h3>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="gallery.html">Gallery</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>
			<div class="col-md-4 w3agile_footer_grid">
				<h3>Twitter Posts</h3>
				<ul class="w3agile_footer_grid_list">
					<li>Ut aut reiciendis voluptatibus maiores alias, ut aut reiciendis.
						<span><i class="fa fa-twitter" aria-hidden="true"></i> 02 days ago</span></li>
					<li>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus.
						<span><i class="fa fa-twitter" aria-hidden="true"></i> 03 days ago</span></li>
				</ul>
			</div>
			<div class="col-md-3 w3agile_footer_grid">
				<h3>Instagram</h3>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a1.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a2.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a3.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a4.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a1.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a2.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a3.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a4.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a3.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="agileinfo_copy_right">
		<div class="container">
			<div class="agileinfo_copy_right_left">
				<p>? 2017 Farm. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
			</div>
			<div class="agileinfo_copy_right_right">
				<ul class="social">
					<li><a class="social-linkedin" href="#">
						<i class="fa fa-facebook" aria-hidden="true"></i>
						<div class="tooltip"><span>Facebook</span></div>
						</a></li>
					<li><a class="social-twitter" href="#">
						<i class="fa fa-twitter" aria-hidden="true"></i>
						<div class="tooltip"><span>Twitter</span></div>
						</a></li>
					<li><a class="social-google" href="#">
						<i class="fa fa-google" aria-hidden="true"></i>
						<div class="tooltip"><span>Google+</span></div>
						</a></li>
					<li><a class="social-facebook" href="#">
						<i class="fa fa-pinterest-p" aria-hidden="true"></i>
						<div class="tooltip"><span>Pinterest</span></div>
						</a></li>
					<li><a class="social-instagram" href="#">
						<i class="fa fa-instagram" aria-hidden="true"></i>
						<div class="tooltip"><span>Instagram</span></div>
						</a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- //footer -->
	<!-- js -->
	<!-- //js -->
	<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>
	<!-- Stats-Number-Scroller-Animation-JavaScript -->
	<script>
		jQuery(document).ready(function ($) {
			$('.counter').counterUp({
				delay: 10,
				time: 1000,
			});
		});
	</script>
	<!-- //Stats-Number-Scroller-Animation-JavaScript -->
	<!-- flexSlider -->
	<script type="text/javascript">
		$(window).load(function () {
			$('.flexslider').flexslider({
				animation: "slide",
				start: function (slider) {
					$('body').removeClass('loading');
				}
			});
		});
	</script>
	<!-- //flexSlider -->
	<!-- //load-more -->
	<!-- for bootstrap working -->
	<!-- //for bootstrap working -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 綠色 簡潔 簡約 簡單 寬屏 全屏 滿屏 農業 農業產品
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子