绿色宽屏样式html5园林绿化种植网页模板代码



5 16 6



模板描述:html5园林绿化种植,绿色宽屏样式html5园林绿化种植网页模板代码html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">

2. 引入JS

<script src="assets/js/jquery.min.js" type="bccfe116ea58f0a912078531-text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="bccfe116ea58f0a912078531-text/javascript"></script>
<script src="assets/js/owl.carousel.min.js" type="bccfe116ea58f0a912078531-text/javascript"></script>
<script src="assets/js/parallax.min.js" type="bccfe116ea58f0a912078531-text/javascript"></script>
<script src="assets/js/leaflet.min.js" type="bccfe116ea58f0a912078531-text/javascript"></script>
<script src="assets/js/wow.js" type="bccfe116ea58f0a912078531-text/javascript"></script>
<script src="assets/js/script.js" type="bccfe116ea58f0a912078531-text/javascript"></script>
<script src="assets/js/rocket-loader.min.js" data-cf-settings="bccfe116ea58f0a912078531-|49" defer=""></script>

3. HTML代码

<div class="page-wrapper">
<div class="preloader"></div>
<header class="main-header">
<div class="header-upper">
<div class="container clearfix">
<div class="header-inner d-lg-flex align-items-center">
<div class="logo-outer d-flex align-items-center">
<div class="logo"><a href="index.html"><img src="assets/images/logo.png" alt="" title=""></a></div>
</div>
<div class="nav-outer clearfix ml-lg-auto mr-auto">
<nav class="main-menu navbar-expand-lg">
<div class="navbar-header clearfix">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix">
<ul class="navigation clearfix">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="dropdown"><a href="#">Services</a>
<ul>
<li><a href="service.html">All Services</a></li>
<li><a href="service-details.html">Services Details</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Pages</a>
<ul>
<li><a href="team.html">Team</a></li>
<li><a href="project.html">Project</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Blog</a>
<ul>
<li><a href="blog-grid.html">Blog Grid</a></li>
<li><a href="blog-classic.html">Blog Classic</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="menu-btn">
<a href="#" class="theme-btn btn-style-one">Support</a>
</div>
</div>
</div>
</div>
</header>
<section class="main-slider">
<div class="container-fluid">
<ul class="main-slider-carousel owl-carousel">
<li class="slider-wrapper">
<div class="image"><img src="assets/images/slider/slider-1.png" alt=""></div>
<div class="slider-caption">
<div class="container">
<div class="slider-content pt-100">
<h1>Find Your Perfect Garden</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit</p>
<div class="link-btn">
<a href="about.html" class="theme-btn btn-style-two">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="slider-wrapper">
<div class="image"><img src="assets/images/slider/slider-2.png" alt=""></div>
<div class="slider-caption">
<div class="container">
<div class="slider-content pt-100">
<h1>Find Your Perfect Garden</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit</p>
<div class="link-btn">
<a href="about.html" class="theme-btn btn-style-two">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="slider-wrapper">
<div class="image"><img src="assets/images/slider/slider-3.png" alt=""></div>
<div class="slider-caption">
<div class="container">
<div class="slider-content pt-100">
<h1>Find Your Perfect Garden</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit</p>
<div class="link-btn">
<a href="about.html" class="theme-btn btn-style-two">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
 </div>
</div>
</li>
</ul>
</div>
</section>
<section class="featured-section text-center mb-120 mt-150 rmb-70 rmt-100">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="featured-item">
<i class="flaticon-christmas-present"></i>
<h4><a href="#">Gift Membership</a></h4>
<p>Sed egestas, ante et vulputavolutpat, eros pedsempest, vitae luctus metus libero eu augue.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="featured-item">
<i class="flaticon-flower"></i>
<h4><a href="#">Garden Design</a></h4>
<p>Sed egestas, ante et vulputavolutpat, eros pedsempest, vitae luctus metus libero eu augue.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="featured-item">
<i class="flaticon-agronomy"></i>
<h4><a href="#">Planning a Visit</a></h4>
<p>Sed egestas, ante et vulputavolutpat, eros pedsempest, vitae luctus metus libero eu augue.</p>
</div>
</div>
</div>
</div>
</section>
<section class="about-section mb-150 rmb-100">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="about-image rmb-45">
<img src="assets/images/about/about.png" alt="About Image">
</div>
</div>
<div class="col-lg-6">
<div class="about-content pl-70">
<div class="section-title style-one">
<h2>About Us</h2>
<span class="line"></span>
</div>
<p>Sed egestas, ante et vulputate volutpat, eros pedsempest, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, comgravida id, est. Sed lectus.</p>
<p>Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl.</p>
<a href="about.html" class="theme-btn btn-style-two">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="why-choose-us-section mb-240 rmb-90">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="why-choose-us-content pt-200 pl-100 rp-50">
<div class="section-title style-one">
<h2>Why Choose Us</h2>
<span class="line"></span>
</div>
<p class="mb-25">Sed egestas, ante et vulputate volutpat, eros pedsemper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, comgravida id.</p>
<div class="why-choose-us-list">
<ul class="list-style-one">
<li>
<div class="item-content">
<h4>Garden Design</h4>
<p>Sed egestas, ante et vulputate volutpedsemper est, vitae luctus metus libero eu augue.</p>
</div>
</li>
<li>
<div class="item-content">
<h4>Gift Membership</h4>
<p>Sed egestas, ante et vulputate volutpedsemper est, vitae luctus metus libero eu augue.</p>
</div>
</li>
<li>
<div class="item-content">
<h4>Planning a Visit</h4>
<p>Sed egestas, ante et vulputate volutpedsemper est, vitae luctus metus libero eu augue.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="why-choose-us-image pl-70 rpl-0 rmt-50">
<img src="assets/images/why-choose-us.png" alt="Why Choose Us Image">
</div>
</div>
</div>
</div>
</section>
<section class="service-section mb-120 rmb-70">
<div class="container">
<div class="section-title style-two text-center mb-50">
<h2>Featured Service</h2>
<span><i class="flaticon-two-leaves"></i></span>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-service">
<div class="service-img">
<img src="assets/images/service/service-1.png" alt="Service Image">
</div>
<div class="service-content">
<h4><a href="service-details.html">Plants For Damp Areas</a></h4>
<p>Sed egestas, ante et vulputate volutpedsemper est, vitae</p>
<a href="service-details.html" class="theme-btn btn-style-three">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service">
<div class="service-img">
<img src="assets/images/service/service-2.png" alt="Service Image">
</div>
<div class="service-content">
<h4><a href="service-details.html">Alpine Plants</a></h4>
<p>Lorem ipsum do consectetuer adipiscing elit.</p>
<a href="service-details.html" class="theme-btn btn-style-three">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service">
<div class="service-img">
<img src="assets/images/service/service-3.png" alt="Service Image">
</div>
<div class="service-content">
<h4><a href="service-details.html">Border Collections</a></h4>
<p>Pellentesque ferment dolor. Aliquam quam lectus.</p>
<a href="service-details.html" class="theme-btn btn-style-three">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service">
<div class="service-img">
<img src="assets/images/service/service-4.png" alt="Service Image">
</div>
<div class="service-content">
<h4><a href="service-details.html">Beth Chatto</a></h4>
<p>Nulla sed leo. Class aptent taciti sociosqu ad litora</p>
<a href="service-details.html" class="theme-btn btn-style-three">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service">
<div class="service-img">
<img src="assets/images/service/service-5.png" alt="Service Image">
</div>
<div class="service-content">
<h4><a href="service-details.html">Garden Ferns</a></h4>
<p>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis</p>
<a href="service-details.html" class="theme-btn btn-style-three">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-service">
<div class="service-img">
<img src="assets/images/service/service-6.png" alt="Service Image">
</div>
<div class="service-content">
<h4><a href="service-details.html">Plants For Dry Areas</a></h4>
<p>Sed egestas, ante et vulputate volutpedsemper est, vitae</p>
<a href="service-details.html" class="theme-btn btn-style-three">Learn More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="subscribe-section text-center">
<div class="parallax" data-parallax="scroll" data-image-src="assets/images/subscribe-bg.png"></div>
<div class="subscribe-wrapper">
<div class="container">
<div class="row">
<div class="col-12">
<div class="subscribe-content">
<h2>Subscribe Newsletter</h2>
<p>Sed egestas, ante et vulputate volutpat, eros pedsempest, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, comgravida id.</p>
<form action="#" class="subscribe">
<input type="email" placeholder="Enter Your Email">
<button type="submit" class="theme-btn">SUBSCRIBE</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="project-section mt-150 mb-110 rmt-95 rmb-60">
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<div class="project-left-content pr-30">
<div class="section-title style-one">
<h2>Our Project</h2>
<span class="line"></span>
</div>
<p>Ut convallis, sem sit amet interdum consec odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere.</p>
<p class="mb-40">Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis xdis parturient montes.</p>
<a href="project.html" class="theme-btn btn-style-two">View All Project <i class="flaticon-right-arrow"></i></a>
</div>
</div>
<div class="col-lg-3 col-sm-6 mt-80">
<div class="project-item">
<img src="assets/images/project/project-1.png" alt="Project Image">
<div class="overlay-content">
<h6><a href="#">House On Lake Side</a></h6>
<span>Photo</span>
</div>
</div>
<div class="project-item">
<img src="assets/images/project/project-2.png" alt="Project Image">
<div class="overlay-content">
<h6><a href="#">Tree Planting</a></h6>
<span>Photo</span>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="project-item">
<img src="assets/images/project/project-3.png" alt="Project Image">
<div class="overlay-content">
<h6><a href="#">Home Out Side Garden</a></h6>
<span>Photo</span>
</div>
</div>
<div class="project-item">
<img src="assets/images/project/project-4.png" alt="Project Image">
<div class="overlay-content">
<h6><a href="#">Eldorado Green House</a></h6>
<span>Photo</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blog-section mb-120 rmb-70">
<div class="container">
<div class="section-title style-two text-center mb-50">
<h2>Recent Articles</h2>
<span><i class="flaticon-two-leaves"></i></span>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="blog-item text-white">
<div class="blog-image">
<img src="assets/images/blog/blog-1.png" alt="Blog Image">
</div>
<div class="blog-content">
<div class="inner-content">
<span>02 Jan, 2020</span>
<h4><a href="blog-details.html">Fine Garden Products Patio Stool Table</a></h4>
</div>
</div>
<div class="blog-hover-content">
<div class="hover-inner-content">
<span>02 Jan, 2020</span>
<h4><a href="blog-details.html">Fine Garden Products Patio Stool Table</a></h4>
<p>Ut convallis, sem sit amet interdum consec odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<a href="blog-details.html" class="theme-btn btn-style-two">Read More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="blog-item text-white">
<div class="blog-image">
<img src="assets/images/blog/blog-2.png" alt="Blog Image">
</div>
<div class="blog-content">
<div class="inner-content">
<span>22 Dec, 2019</span>
<h4><a href="blog-details.html">Plants For Damp Areas</a></h4>
</div>
</div>
<div class="blog-hover-content">
<div class="hover-inner-content">
<span>22 Dec, 2019</span>
<h4><a href="blog-details.html">Plants For Damp Areas</a></h4>
<p>Ut convallis, sem sit amet interdum consec odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<a href="blog-details.html" class="theme-btn btn-style-two">Read More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="blog-item text-white">
<div class="blog-image">
<img src="assets/images/blog/blog-3.png" alt="Blog Image">
</div>
<div class="blog-content">
<div class="inner-content">
<span>15 Aug, 2019</span>
<h4><a href="blog-details.html">Gardening Gone Wild</a></h4>
</div>
</div>
<div class="blog-hover-content">
<div class="hover-inner-content">
<span>15 Aug, 2019</span>
<h4><a href="blog-details.html">Gardening Gone Wild</a></h4>
<p>Ut convallis, sem sit amet interdum consec odio augue aliquam leo, nec dapibus tortor nibh sed augue.</p>
<a href="blog-details.html" class="theme-btn btn-style-two">Read More <i class="flaticon-right-arrow"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-section pt-100 rpt-85 pb-70" style="background-image:url(assets/images/footer-bg.png);">
<div class="container">
<div class="footer-top text-center">
<a href="index.html" class="footer-logo"><img src="assets/images/footer-logo.png" alt="Footer Logo"></a>
<p>Sed egestas, ante et vulputate volutpat, eros pedsempest, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, comgravida id.</p>
<form action="#" class="subscribe">
<input type="email" placeholder="Enter Your Email">
<button type="submit" class="theme-btn">SUBSCRIBE</button>
</form>
</div>
<div class="footer-menu-social">
<div class="footer-menu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="features.html">features</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div class="social-style-one ml-auto">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="copyright">
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="296a4659505b404e415d691b191b19">[email&#160;protected]</a> Coui. All rights reserved</p>
</div>
</div>
</footer>
</div>
<button class="scroll-top scroll-to-target" data-target="html"><span class="fa fa-angle-up"></span></button>
<script src="assets/js/rocket-loader.min.js" data-cf-settings="bccfe116ea58f0a912078531-|49" defer=""></script>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 植物花草 植物 花草 植物园 花草市场 园艺 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 绿色 简洁 简约 简单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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