绿色宽屏风格响应式农产品公司网页模板



3 9 4



模板描述:绿色 宽屏 响应式 农产品公司 网页模板,绿色宽屏风格响应式农产品公司网页模板HTML模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">

2. HTML代码

<!-- header -->
<header>
	<div class="container" id="home">
		<nav class="">
			<div id="logo">
				<h1> <a href="https://www.51qianduan.com/">51前端</a></h1>
			</div>
			<div class="mx-auto">
				<label for="drop" class="toggle mt-lg-0 mt-3">Menu</label>
				<input type="checkbox" id="drop" />
				<ul class="menu mt-lg-4">
					<li class=" mr-lg-2 mr-1 active"><a href="#">Home</a></li>
					<li class=" mr-lg-2 mr-1"><a href="#about">About</a></li>
					<li class=" mr-lg-2 mr-1"><a href="#services">Services</a></li>
					<li class="dropdown-menu-padding">
					<!-- First Tier Drop Down -->
					<label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label>
					<a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
					<input type="checkbox" id="drop-2"/>
					<ul>
						<li><a href="#facts">Agriculture Facts</a></li>
						<li><a href="#gallery">Our Gallery</a></li>
						<li><a href="#team">Our Farmers</a></li>
					</ul>
					</li>
					<li><a href="#contact">Contact</a></li>
					<li class="buttons ml-lg-3">
						<p><span class="fa mr-1 fa-phone"></span> +12 445 8976 2334</p>
					</li>
				</ul>
			</div>
		</nav>
	</div>
</header>
<!-- //header -->
<div class="csslider infinity" id="slider1">
  <input type="radio" name="slides" checked="checked" id="slides_1"/>
  <input type="radio" name="slides" id="slides_2"/>
  <input type="radio" name="slides" id="slides_3"/>
  <input type="radio" name="slides" id="slides_4"/>
  <ul>
    <li>
		<div id="bg">
			<div class="container">
				<div class="banner-text">
				  <h6> Fresh Agriculture Products</h6>
				  <h3> We Serve Fresh and Juicy Fruits From Our Farm</h3>
				</div>
			</div>
		</div>
    </li>
    <li>
        <div id="bg1">
			<div class="container">
				<div class="banner-text">
				  <h6> Fresh Agriculture Products</h6>
				  <h3> We Serve Fresh and Juicy Fruits From Our Farm</h3>
				</div>
			</div>
        </div>
    </li>
    <li>
		<div id="bg2">
			<div class="container">
				<div class="banner-text">
				  <h6> Fresh Agriculture Products</h6>
				  <h3> We Serve Fresh and Juicy Fruits From Our Farm</h3>
				</div>
			</div>
        </div>
    </li>
    <li>
		<div id="bg3">
			<div class="container">
				<div class="banner-text">
				  <h6> Fresh Agriculture Products</h6>
				  <h3> We Serve Fresh and Juicy Fruits From Our Farm</h3>
				</div>
			</div>
		</div>
    </li>
  </ul>
  <div class="arrows">
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
  </div>
  <div class="navigation"> 
    <div>
      <label for="slides_1"></label>
      <label for="slides_2"></label>
      <label for="slides_3"></label>
      <label for="slides_4"></label>
    </div>
  </div>
</div>
<!-- //banner -->
<!-- about -->
<section class="about py-5" id="about">
	<div class="container py-md-3">
		<h3 class="heading text-center mb-md-5 mb-4">Few Words About our farm</h3>
		<div class="row about-grids agile-info">
			<div class="col-lg-6 mb-lg-0 w3-agile-grid mb-5">
				<h4 class="mb-4">Welcome to our Organic Fruit - we serve all types of seasonal fruits</h3>
				<p class="mb-4">Cras blandit nibh ut pretium elementum. Duis bibendum convallis nun cael dictum. Quisquen ac ipsum porta, ultrices metus sit amet, curs in nisl. Dui aliquet varius sem sit amet convallis nun ca dictum. Cras blandit nibh ut pretium elementum. Duis bibendum convallis nun ca dictum aliquet.</p>
				<p class="text-capitalize"> <span class="fa fa-check"></span> Duis bibendum convallis blandit dictum.</p>
				<p class=" text-capitalize"> <span class="fa fa-check"></span> Cras blandit nibh blandit pretium dolor ipsum.</p>
				<p class="text-capitalize mb-3"> <span class="fa fa-check"></span> Bibendum convallis nun ca dictum elementum ipsum elit.</p>
				<a href="#popup1">Read More </a>
			</div>
			<div class="col-lg-6 col-md-8 w3-agile-grid pr-md-0">
				<img src="images/about.jpg" class="img-fluid" />
			</div>
		</div>
	</div>
</section>
<!-- //about -->
<!-- how we work -->
<section class="work">
	<div class="work-layer py-5">
	<div class="container py-md-3">
		<h3 class="heading text-center mb-lg-5 text-white mb-4">How We Work</h3>
		<div class="row text-center join agile-info">
			<div class="col-lg-4 col-md-6 steps-reach w3-agile-grid">
				<span class="fa fa-cogs"></span>
				<h4>Step 1</h4>
				<p>Pretium elementum. Duis bibendum convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh ut aliquet varius sem sit amet convallis.</p>
			</div>
			<div class="col-lg-4 col-md-6 mt-md-0 mt-5 steps-reach w3-agile-grid">
				<span class="fa fa-cubes"></span>
				<h4>Step 2</h4>
				<p>Pretium elementum. Duis bibendum convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh ut aliquet varius sem sit amet convallis.</p>
			</div>
			<div class="col-lg-4 col-md-6 mt-lg-0 mt-5 steps-reach w3-agile-grid">
				<span class="fa fa-cart-arrow-down" aria-hidden="true"></span>
				<h4>Step 3</h4>
				<p>Pretium elementum. Duis bibendum convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh ut aliquet varius sem sit amet convallis.</p>
			</div>
		</div>
	</div>
	</div>
</section>
<!-- //how we work -->
<!-- services -->
<section class="services py-5" id="services">
	<div class="container py-md-5">
		<h3 class="heading text-center mb-lg-5 mb-4">Our Services</h3>
		<div class="row">
			<div class="col-lg-3 col-sm-6 w3-agile-grid">
				<h4><span class="fa mr-2 fa-apple"></span> Service 1</h4>
				<p>Pretium elementum. Bibendum et convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh aliquet varius sem sit amet.</p>
			</div>
			<div class="col-lg-3 col-sm-6 mt-sm-0 mt-5 w3-agile-grid">
				<h4><span class="fa mr-2 fa-glass"></span> Service 2</h4>
				<p>Pretium elementum. Bibendum et convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh aliquet varius sem sit amet.</p>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-5 w3-agile-grid">
				<h4><span class="fa mr-2 fa-spoon" aria-hidden="true"></span> Service 3</h4>
				<p>Pretium elementum. Bibendum et convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh aliquet varius sem sit amet.</p>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-5 w3-agile-grid">
				<h4><span class="fa mr-2 fa-gift" aria-hidden="true"></span> Service 4</h4>
				<p>Pretium elementum. Bibendum et convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh aliquet varius sem sit amet.</p>
			</div>
			<div class="col-lg-4 col-sm-6  mt-5 w3-agile-grid">
				<h4><span class="fa mr-2 fa-info-circle"></span> Service 5</h4>
				<p>Pretium elementum. Bibendum et convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh aliquet varius sem sit amet ras blandit nibh aliquet varius convallis nun ca ipsum.</p>
			</div>
			<div class="col-lg-4 col-sm-6 mt-5 w3-agile-grid">
				<h4><span class="fa mr-2 fa-shopping-basket" aria-hidden="true"></span> Service 6</h4>
				<p>Pretium elementum. Bibendum et convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh aliquet varius sem sit amet ras blandit nibh aliquet varius convallis nun ca ipsum.</p>
			</div>
			<div class="col-lg-4 col-sm-6 mt-5 w3-agile-grid">
				<h4><span class="fa mr-2 fa-shopping-cart" aria-hidden="true"></span> Service 7</h4>
				<p>Pretium elementum. Bibendum et convallis nun ca dictum convallis nun ca dictum. Cras blandit nibh aliquet varius sem sit amet ras blandit nibh aliquet varius convallis nun ca ipsum.</p>
			</div>
		</div>
	</div>
	</div>
</section>
<!-- //how we work -->
<!-- facts -->
<section class="service-bottom bg py-5" id="facts">
	<div class="container">
		<!-- Counter -->
		<div class="py-lg-5 py-3">
			<h3 class="heading text-center text-white mb-lg-5 mb-4">Agricultural Facts</h3>
			<div class="row ">
				<div class="col-md-3 text-center col-6 agileits_w3layouts_about_counter_left w3-agile-grid">
					<div class="counterinfo agile-info">
						<p class="counter">146</p> 
						<h3>Business Growth</h3>
					</div>
				</div>
				<div class="col-md-3 text-center col-6 agileits_w3layouts_about_counter_left w3-agile-grid">
					<div class="counterinfo agile-info">
						<p class="counter">1500</p> 
						<h3>Fruits Supplied</h3>
					</div>
				</div>
				<div class="col-md-3 text-center col-6 agileits_w3layouts_about_counter_left w3-agile-grid mt-md-0 mt-4">
					<div class="counterinfo agile-info">
						<p class="counter">15+</p>
						<h3>Years Experience</h3>
					</div>
				</div>
				<div class="col-md-3 text-center col-6 agileits_w3layouts_about_counter_left w3-agile-grid mt-md-0 mt-4">
					<div class="counterinfo agile-info">
						<p class="counter">150+</p>
						<h3>Agriculture Farmers</h3>
					</div>
				</div>
			</div>
		</div>
		<!-- //Counter -->
	</div>
</section>
<!-- //facts -->
<!-- gallery -->
<section class="gallery py-5" id="gallery">
	<div class="container py-3">
		<h3 class="heading text-center mb-lg-5 mb-4">Our Gallery</h3>
		<div class="row gallery_grid-more project-grids w3ls">
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1">
				<div class="gallery-border">
					<a href="#popup2">
						<img src="images/g1.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1">
				<div class="gallery-border">
					<a href="#popup3">
						<img src="images/g2.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1 mt-md-0 mt-2">
				<div class="gallery-border">
					<a href="#popup4">
						<img src="images/g3.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1 mt-lg-0 mt-2">
				<div class="gallery-border">
					<a href="#popup5">
						<img src="images/g4.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1 mt-2 ">
				<div class="gallery-border">
					<a href="#popup6">
						<img src="images/g5.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1 mt-2">
				<div class="gallery-border">
					<a href="#popup7">
						<img src="images/g6.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1 mt-2">
				<div class="gallery-border">
					<a href="#popup8">
						<img src="images/g7.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6 px-1 w3layoutsits_w3layouts_gallery_grid1 mt-2">
				<div class="gallery-border">
					<a href="#popup9">
						<img src="images/g8.jpg" alt=" " class="img-fluid" />
					</a>
				</div>
			</div>
		</div>
	</section>
<!-- popup for gallery -->
<div id="popup2" class="overlay">
	<div class="popup1">
		<img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<div id="popup3" class="overlay">
	<div class="popup1">
		<img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<div id="popup4" class="overlay">
	<div class="popup1">
		<img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<div id="popup5" class="overlay">
	<div class="popup1">
		<img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<div id="popup6" class="overlay">
	<div class="popup1">
		<img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<div id="popup7" class="overlay">
	<div class="popup1">
		<img src="images/g6.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<div id="popup8" class="overlay">
	<div class="popup1">
		<img src="images/g7.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<div id="popup9" class="overlay">
	<div class="popup1">
		<img src="images/g8.jpg" alt="Popup Image" class="img-fluid" />
	<a class="close" href="#gallery">&times;</a>
	</div>
</div>
<!-- //popup for gallery -->
</div>
<!-- //gallery --> 
<!-- team --> 
<section class="team bg-light py-5" id="team">
	<div class="container py-md-3">
		<h3 class="heading text-center mb-lg-5 mb-4">Our Farmers</h3>
		<div class="row team-grids">
			<div class="col-lg-3 col-sm-6 mb-lg-0 mb-4 team-grid w3-agile-grid">
				<div class="team-members">
					<img src="images/t1.jpg" class="img-fluid" alt="image">
					<div class="team-desc py-3 text-center agile-info">
						<h4 class="">John Doe</h4>
						<span>Our Farmer</span>
						<ul class="social">
							<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
							<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
							<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_g_plus"></span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mb-lg-0 mb-4 team-grid w3-agile-grid">
				<div class="team-members">
					<img src="images/t2.jpg" class="img-fluid" alt="image">
					<div class="team-desc py-3 text-center agile-info">
						<h4 class="">Melisa Doe</h4>
						<span>Our Farmer</span>
						<ul class="social">
							<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
							<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
							<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_g_plus"></span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mb-sm-0 mb-4 team-grid w3-agile-grid">
				<div class="team-members">
					<img src="images/t3.jpg" class="img-fluid" alt="image">
					<div class="team-desc py-3 text-center agile-info">
						<h4 class="">Alex Atkinson</h4>
						<span>Our Farmer</span>
						<ul class="social">
							<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
							<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
							<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_g_plus"></span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 team-grid w3-agile-grid">
				<div class="team-members">
					<img src="images/t4.jpg" class="img-fluid" alt="image">
					<div class="team-desc py-3 text-center agile-info">
						<h4 class="">Thompson</h4>
						<span>Our Farmer</span>
						<ul class="social">
							<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
							<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
							<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
							<li><a href="#"><span class="fa fa-google-plus icon_g_plus"></span></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //team --> 
<!-- subscribe -->
<section class="quotes py-5 text-center">
	<div class="container py-md-3">
		<div class="quotes-info agile-info-quotes">
			<h3 class="heading text-center mb-3">Subscribe with us</h3>
			<p class="mb-5">Cras blandit nibh ut pretium elementum. Duis bibendum convallis nun ca dictum. Quisquen ac ipsum porta, ultrices metus sit amet,
			curs in nisl. Duis aliquet varius sem sit amet.</p>
			<form action="#" method="post" class="">
				<input type="email" name="Email" placeholder="Enter your email..." required="">
				<input type="submit" value="Subscribe">
				<div class="clearfix"> </div>
				<span>By signing up to our website, you agree to the <a href="#">terms and conditions.</a></span>
			</form>
		</div>
	</div>
</section>
<!-- //subscribe -->
<!-- footer -->	
<footer class="py-5" id="contact">
	<div class="container pt-md-3">
		<div class="row ">
		<div class="col-lg-4 col-md-6">
            <h3 class="mb-4">Address Info</h3>
			<div class="footer-text">
				<p>Address : 1234 block, Charlotte, North Carolina, United States, USA.</p>
				<p class="mt-1">Phone : +12 534894364</p>
				<p class="mt-1">Phone : +12 534894364</p>
				<p class="my-1">Email : <a href="https://www.51qianduan.com/">51前端</a></p>
				<p>Fax : +12 534894364</p>
			</div>
		</div>
		<div class="col-lg-3 col-md-6 mt-md-0 mt-5">
            <h3 class="mb-4">Opening Hours</h3>
			<div class="timings">
				<p class="mb-2">Mon To Fri<span> 9am to 8pm </span></p>
				<p class="">Sat and Sun<span> 10am to 6pm </span></p>
			</div>
            <h3 class="mt-4">Connect Us</h3>
			<p class="mt-3">Follow us on social media.</p>
			<ul class="social mt-2">
				<li><a href="#"><span class="fa fa-facebook icon_facebook"></span></a></li>
				<li><a href="#"><span class="fa fa-twitter icon_twitter"></span></a></li>
				<li><a href="#"><span class="fa fa-dribbble icon_dribbble"></span></a></li>
				<li><a href="#"><span class="fa fa-google-plus icon_g_plus"></span></a></li>
			</ul>
		</div>
		<div class="col-lg-5 mt-lg-0 mt-5">
			<h3 class="mb-4 ml-md-5"> Contact Us</h3>
			<form action="#" method="get" class="register-wthree">
				<div class="form-group">
					<div class="row">
						<div class="col-sm-2 d-sm-flex align-items-end justify-content-end px-sm-0">
							<label class="mb-0">
								<span class="fa fa-user"></span>
							</label>
						</div>
						<div class="col-sm-5 pr-sm-1">
							<input class="form-control" type="text" placeholder="First Name" name="email" required="">
						</div>
						<div class="col-sm-5 pl-sm-1 pl-auto mt-sm-0 mt-2">
							<input class="form-control" type="text" placeholder="Last Name" name="email" required="">
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-sm-2 d-sm-flex align-items-end justify-content-end px-sm-0">
							<label class="mb-0">
								<span class="fa fa-envelope-open"></span>
							</label>
						</div>
						<div class="col-sm-10">
							<input class="form-control" type="email" placeholder="example@mail.com" name="email" required="">
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
						<div class="col-sm-2 d-sm-flex align-items-end justify-content-end px-sm-0">
							<label class="mb-0">
								<span class="fa fa-edit"></span>
							</label>
						</div>
						<div class="col-sm-10">
							<textarea placeholder="Your message here" class="form-control"></textarea>
						</div>
					</div>
				</div>
				<div class="row mt-3">
					<div class="offset-2"></div>
					<div class="col-sm-10">
						<button type="submit" class="btn btn-block w-100">Send</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="copyright pt-sm-5 pt-4 text-center">
		<a href="https://www.51qianduan.com/">51前端</a>
		<p>Copyright &copy; 2018.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
	</div>
</footer>
<!-- footer -->
<!-- popup for btn -->
<div id="popup1" class="overlay">
	<div class="popup">
		<img src="images/about.jpg" alt="Popup Image" class="img-fluid" />
		<p class="mt-4 editContent">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor. Vestibulum at dui nunc. Nulla viverra pharetra sem, eget pulvinar neque pharetra ac int. lorem ipsum Vestibulum. placerat placerat dolor. Vestibulum at dui nunc. Nullam eu elit neque lectus.</p>
	<a class="close" href="#about">&times;</a>
	</div>
</div>
<!-- //popup for btn -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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