文章目录
作品文件
该作品使用js+html+css，使页面效果更加丰富
home页面效果
home页面相关代码
<div class="banner-bottom">
<div class="container">
<h3><span>agriculture</span> is best, enterprise is acceptable, but avoid being on a <span class="fixed_w3">fixed wage</span></h3>
<div class="agileits_banner_bottom_grids">
<div class="col-md-3 agileits_banner_bottom_grid">
<div class="hovereffect w3ls_banner_bottom_grid">
<img src="images/1.jpg" alt=" " class="img-responsive" />
<div class="overlay">
<h4>Cattle Farm</h4>
<p>Maecenas ullamcor non nunc eget.</p>
</div>
</div>
</div>
<div class="col-md-3 agileits_banner_bottom_grid">
<div class="hovereffect w3ls_banner_bottom_grid">
<img src="images/2.jpg" alt=" " class="img-responsive" />
<div class="overlay">
<h4>Farming</h4>
<p>Maecenas ullamcor non nunc eget.</p>
</div>
</div>
</div>
<div class="col-md-3 agileits_banner_bottom_grid">
<div class="hovereffect w3ls_banner_bottom_grid">
<img src="images/3.jpg" alt=" " class="img-responsive" />
<div class="overlay">
<h4>Poultry</h4>
<p>Maecenas ullamcor non nunc eget.</p>
</div>
</div>
</div>
<div class="col-md-3 agileits_banner_bottom_grid">
<div class="hovereffect w3ls_banner_bottom_grid">
<img src="images/4.jpg" alt=" " class="img-responsive" />
<div class="overlay">
<h4>Gardening</h4>
<p>Maecenas ullamcor non nunc eget.</p>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
services页面效果
services页面相关代码
<div class="service-bottom">
<div class="container">
<div class="col-md-3 w3layouts_service_bottom_grid">
<div class="agileits_w3layouts_stats_grid">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<p class="counter">654</p>
<h3>Customers</h3>
</div>
<div class="col-md-3 w3layouts_service_bottom_grid">
<div class="agileits_w3layouts_stats_grid">
<i class="fa fa-bullhorn" aria-hidden="true"></i>
</div>
<p class="counter">231</p>
<h3>Popularity</h3>
</div>
<div class="col-md-3 w3layouts_service_bottom_grid">
<div class="agileits_w3layouts_stats_grid">
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
</div>
<p class="counter">553</p>
<h3>Success</h3>
</div>
<div class="col-md-3 w3layouts_service_bottom_grid">
<div class="agileits_w3layouts_stats_grid">
<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>
</div>
<p class="counter">422</p>
<h3>Lines of Code</h3>
</div>
<div class="clearfix"> </div>
</div>
</div>
portfolio页面效果
portfolio页面相关代码
<div class="services">
<div class="container">
<h3 class="w3l_header w3_agileits_header1">Our <span>Portfolio</span></h3>
<div class="wthree_services_grids">
<ul class="simplefilter">
<li class="active" data-filter="all">All</li>
<li data-filter="1">Category 1</li>
<li data-filter="2">Category 2</li>
<li data-filter="3">Category 3</li>
</ul>
<div class="filtr-container">
<div class="col-md-4 col-sm-4 filtr-item" data-category="1" data-sort="">
<div class="agileits_portfolio_grid">
<a class="group1" href="images/1.jpg" title="Viticulture">
<img class="img-responsive" src="images/1.jpg" alt="" />
<div class="w3_textbox">
<h4>Viticulture</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 filtr-item" data-category="2, 3" data-sort="">
<div class="agileits_portfolio_grid">
<a class="group1" href="images/2.jpg" title="Viticulture">
<img src="images/2.jpg" alt="" class="img-responsive" />
<div class="w3_textbox">
<h4>Viticulture</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 filtr-item" data-category="1" data-sort="">
<div class="agileits_portfolio_grid">
<a class="group1" href="images/3.jpg" title="Viticulture">
<img src="images/3.jpg" alt="" class="img-responsive" />
<div class="w3_textbox">
<h4>Viticulture</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 filtr-item" data-category="3" data-sort="">
<div class="agileits_portfolio_grid">
<a class="group1" href="images/4.jpg" title="Viticulture">
<img src="images/4.jpg" alt="" class="img-responsive" />
<div class="w3_textbox">
<h4>Viticulture</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 filtr-item" data-category="3" data-sort="">
<div class="agileits_portfolio_grid">
<a class="group1" href="images/6.jpg" title="Viticulture">
<img src="images/6.jpg" alt="" class="img-responsive" />
<div class="w3_textbox">
<h4>Viticulture</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 filtr-item" data-category="2" data-sort="">
<div class="agileits_portfolio_grid">
<a class="group1" href="images/7.jpg" title="Viticulture">
<img src="images/7.jpg" alt="" class="img-responsive" />
<div class="w3_textbox">
<h4>Viticulture</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p>
</div>
</a>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
mail页面效果
mail页面相关代码
<div class="services">
<div class="container">
<h3 class="w3l_header w3_agileits_header1">Get in <span>Touch</span></h3>
<div class="w3layouts_mail_grid">
<div class="col-md-4 w3layouts_mail_grid_left">
<div class="w3layouts_mail_grid_left1 hvr-radial-out">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
</div>
<div class="w3layouts_mail_grid_left2">
<h3>Mail Us</h3>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<div class="col-md-4 w3layouts_mail_grid_left">
<div class="w3layouts_mail_grid_left1 hvr-radial-out">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
</div>
<div class="w3layouts_mail_grid_left2">
<h3>Address</h3>
<p>PO Box 97845 Baker , Australia</p>
</div>
</div>
<div class="col-md-4 w3layouts_mail_grid_left">
<div class="w3layouts_mail_grid_left1 hvr-radial-out">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
</div>
<div class="w3layouts_mail_grid_left2">
<h3>Phone</h3>
<p>+(0121) 121 121</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="services">
<div class="container">
<h3 class="w3l_header w3_agileits_header1">Contact <span>Info</span></h3>
<div class="w3layouts_mail_grid">
<div class="col-md-5 agileits_mail_grid_left agileinfo_mail_grid_left">
<div class="agileits_mail_grid_lft_grid wthree_mail_grid_lft_grid">
<h4>Integer venenatis massa lobortis porta</h4>
<ul>
<li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Nulla nec facilisis turpis ac</li>
<li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Eget ornare ex nisl nec lacus</li>
<li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Ut tortor augue, placerat massa</li>
<li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Quisque consectetur sagittis</li>
<li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Curabitur mollis dignissim erat</li>
</ul>
</div>
<div class="agileits_mail_grid_lft_grid1 w3_agileits_mail_grid_lft_grid1">
<h4><span>Twitter</span> Posts</h4>
<ul>
<li><a href="#">@Mark Lii</a> consequat dui id turpis
<a href="#">http://example.com</a> auctor tellus eu nisi vehicula consequat.</li>
<li><a href="#">@Henry Paul</a> sit amet dolor
<a href="#">http://example1.com</a> porttitor suscipit orci semper, bibendum.</li>
<li><a href="#">@John Carl</a> augue diam consequat mi
<a href="#">http://example2.com</a> facilisis vitae, euismod vitae orci consequat.</li>
</ul>
</div>
</div>
<div class="col-md-7 agileits_mail_grid_right agileits_w3layouts_mail_grid_right">
<div class="agileits_mail_grid_right1 agile_mail_grid_right1">
<form action="#" method="post">
<span>
<i>Name</i>
<input type="text" name="Name" placeholder=" " required="">
</span>
<span>
<i>Email</i>
<input type="email" name="Email" placeholder=" " required="">
</span>
<span>
<i>Subject</i>
<input type="text" name="Subject" placeholder=" " required="">
</span>
<span>
<i>Message</i>
<textarea name="Message" placeholder=" " required=""></textarea>
</span>
<input type="submit" value="Submit Now">
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
ps：由于篇幅较大无法全部展示，可关注微信公众号《月光作笺Y》并回复作品主题《农业》获取源代码。该作品仅供学习参考