模板描述：绿色 大气 响应式 风车发电设备 网页模板。绿色大气风格响应式风车发电设备网页模板HTML模板下载
代码结构
1. 引入CSS
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"> <link href="css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="css/lightbox.css"> <link href="css/style.css" rel='stylesheet' type='text/css' media="all"> <link href="http://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
2. 引入JS
<script src='js/jquery-2.2.3.min.js'></script> <script src="js/lightbox-plus-jquery.min.js"></script> <script src="js/responsiveslides.min.js"></script> <script src="js/move-top.js"></script> <script src="js/easing.js"></script> <script src="js/bootstrap.min.js"></script>
3. HTML代码
<div class="header-outs" id="header">
<div class="header-w3layouts">
<div class="container">
<!--navigation section -->
<nav class="navbar navbar-expand-lg navbar-light">
<div class="hedder-up " >
<h1><a class="navbar-brand" href="index.html">Wind Power</a></h1>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link scroll">About</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link scroll">Service</a>
</li>
<li class="nav-item">
<a href="#gallery" class="nav-link scroll">Gallery</a>
</li>
<li class="nav-item">
<a href="#team" class="nav-link scroll">team</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link scroll">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="clearfix"> </div>
</div>
</div>
<!--//navigation section -->
<!-- Slideshow 4 -->
<div class="slider text-center">
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="slider-img one-img">
<div class="container">
<div class="slider-info ">
<div class="banner-top-grid">
<h4>Nature And Energy</h4>
</div>
<h5>Eco Real <span>Wind!</span></h5>
<div class="bottom-info text-center">
<h6>Go Energy Go Wind Power</h6>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slider-img two-img">
<div class="container">
<div class="slider-info ">
<div class="banner-top-grid">
<h4>Safe And Clean</h4>
</div>
<h5>Eco Wind <span>Power!</span></h5>
<div class="bottom-info text-center">
<h6>Go Energy Go Wind Power</h6>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slider-img three-img">
<div class="container">
<div class="slider-info">
<div class="banner-top-grid">
<h4>Nature And Nurture</h4>
</div>
<h5>Eco Wind <span>Energy!</span></h5>
<div class="bottom-info text-center">
<h6>Go Energy Go Wind Power</h6>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- This is here just to demonstrate the callbacks -->
<!-- <ul class="events">
<li>Example 4 callback events</li>
</ul>-->
<div class="clearfix"></div>
</div>
</div>
<!-- //banner -->
<!--about -->
<section class="about" id="about">
<div class="about-color py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="title clr col-lg-6 col-md-6 text-center">
<h3 class="clr">About Us</h3>
</div>
<div class="line-w3ls-title col-lg-6 col-md-6 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row text-center">
<div class="col-lg-6 about-w3layouts-grids ">
<div class="row about-wthree-top">
<div class="col-lg-6 col-md-6 col-sm-6 about-icon-top">
<div class="color-icon color-4">
<span class="fa fa-leaf" aria-hidden="true"></span>
</div>
<h4>Nature Energy</h4>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 about-icon-top active">
<div class="color-icon color-1">
<span class="fa fa-thumbs-up" aria-hidden="true"></span>
</div>
<h4>What we do</h4>
</div>
</div >
<div class="row about-wthree-top">
<div class="col-lg-6 col-md-6 col-sm-6 about-icon-top">
<div class="color-icon color-2">
<span class="fa fa-sun-o" aria-hidden="true"></span>
</div>
<h4>Solar Energy</h4>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 about-icon-top">
<div class="color-icon color-3">
<span class="fa fa-user" aria-hidden="true"></span>
</div>
<h4>Who we are</h4>
</div>
</div >
</div >
<div class="col-lg-6 about-img-grids p-0">
<div class="img-position">
<img src="images/ab2.jpg" class="img-fluid" alt="">
<div class="overlay overlayTop text-hover-grid ">
<h4>What we do</h4>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
</div>
</div >
</div>
<div class="row">
<div class="col-lg-6 about-img-grids p-0">
<div class="img-position text-center">
<img src="images/ab1.jpg" class="img-fluid" alt="">
<div class="overlay overlayTop text-hover-grid ">
<h4>What we do</h4>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
</div>
</div >
<div class="col-lg-6 about-w3layouts-grids ">
<div class="about-w3pvt-grid mb-lg-5 mb-md-4 mb-3">
<h2>Our History</h2>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<h6 class="progress-title">Wind Energy</h6>
<div class="progress">
<div class="progress-bar" style="width:90%; background:#97c513;">
<div class="progress-value">90%</div>
</div>
</div>
<h6 class="progress-title">Solar Energy</h6>
<div class="progress">
<div class="progress-bar" style="width:80%; background:#97c513;">
<div class="progress-value">80%</div>
</div>
</div >
<h6 class="progress-title">Nature Energy</h6>
<div class="progress">
<div class="progress-bar" style="width:70%; background:#97c513;">
<div class="progress-value">70%</div>
</div>
</div >
</div>
</div>
</div>
</section>
<!--//about-->
<!-- service -->
<section class="service" id="service">
<div class="about-color py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="line-w3ls-title col-lg-6 col-md-6 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="title clr col-lg-6 col-md-6 text-center">
<h3 class="clr">Our Services</h3>
</div>
</div>
</div>
</div>
<div class="my-lg-4 my-md-3 my-sm-3 my-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="tabs">
<div class="tab-button-outer">
<ul id="tab-button">
<li>
<a href="#tab01" class="color-1">
<span class="fa fa-money" aria-hidden="true"></span>
<h6>Commercial</h6>
</a>
</li>
<li>
<a href="#tab02" class="color-2">
<span class="fa fa-thumbs-o-up" aria-hidden="true"></span>
<h6>Project</h6>
</a>
</li>
<li>
<a href="#tab03" class="color-3">
<span class="fa fa-lightbulb-o" aria-hidden="true"></span>
<h6>Energy</h6>
</a>
</li>
<li>
<a href="#tab04" class="color-4">
<span class="fa fa-sun-o" aria-hidden="true"></span>
<h6>Panels</h6>
</a>
</li>
</ul>
</div>
<div class="tab-select-outer">
<select id="tab-select">
<option value="#tab01" class="change-headding">
Commercial
</option>
<option value="#tab02" class="change-headding">
Project
</option>
<option value="#tab03" class="change-headding">
Energy
</option>
<option value="#tab04" class="change-headding">
Panels
</option>
</select>
</div>
<!--tab1 -->
<div id="tab01" class="tab-contents">
<div class="row">
<div class="col-lg-6 col-md-6 text-center">
<img src="images/s1.png" class="img-fluid" alt="">
</div>
<div class="col-lg-6 col-md-6">
<div class="service-w3layouts-grid">
<h5>Commercial Solar</h5>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="list-job-grid mt-lg-4 mt-md-3 mt-3 ">
<div class="row">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--//tab1 -->
<!--//tab2 -->
<div id="tab02" class="tab-contents">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="service-w3layouts-grid">
<h5>Project Assistance</h5>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="list-job-grid mt-lg-4 mt-md-3 mt-3 ">
<div class="row">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<img src="images/s2.png" class="img-fluid" alt="">
</div>
</div>
</div>
<!--//tab2 -->
<!--tab3 -->
<div id="tab03" class="tab-contents">
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="images/s3.png" class="img-fluid" alt="">
</div>
<div class="col-lg-6 col-md-6">
<div class="service-w3layouts-grid">
<h5>Wind Energy</h5>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="list-job-grid mt-lg-4 mt-md-3 mt-3">
<div class="row">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-3">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-3">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-3">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--//tab3 -->
<!--tab4 -->
<div id="tab04" class="tab-contents">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="service-w3layouts-grid">
<h5>Residential Panels</h5>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="list-job-grid mt-lg-4 mt-md-3 mt-3 ">
<div class="row">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row mt-2">
<div class="left-icon">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</div>
<div class="right-txt">
<p class="mt-2">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<img src="images/s4.png" class="img-fluid" alt="">
</div>
</div>
</div>
<!--//tab4 -->
</div>
</div>
</div>
</section>
<!--//service -->
<!--Gallery -->
<section class="gallery" id="gallery">
<div class="about-color py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="title clr col-lg-6 col-md-6 text-center">
<h3 class="clr">Our Projects</h3>
</div>
<div class="line-w3ls-title col-lg-6 col-md-6 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
</div>
</div>
</div>
<div class="my-lg-4 my-md-3 my-sm-3 my-3">
<div class="container-fluid py-lg-5 py-md-5 py-sm-4 py-3">
<div class="text-center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="hdpe">Project-1</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Project-2</button>
<button class="btn btn-default filter-button" data-filter="spray">Project-3</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Project-4</button>
</div>
<div class="row">
<br/>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter spray p-0">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter irrigation p-0">
<a href="https://www.51qianduan.com/">51前端</a>
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter spray p-0">
<a href="https://www.51qianduan.com/">51前端</a>
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter irrigation sprinkle p-0">
<a href="https://www.51qianduan.com/">51前端</a>
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter hdpe p-0">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter hdpe p-0">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter spray sprinkle p-0">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 filter sprinkle p-0">
<a href="https://www.51qianduan.com/">51前端</a>
</div>
</div>
</div>
</div>
</section>
<!--subcribe -->
<section class="subcribe pb-lg-4 pb-md-3 pb-sm-3 pb-3" >
<div class="container pb-lg-5 pb-md-5 pb-sm-4 pb-3">
<div class="title text-center mb-lg-3 mb-2">
<h3 class="clr">Subscribe Us</h3>
</div>
<div class="line-w3ls-title text-center mb-lg-4 mb-3">
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="subscribe-footer mt-lg-5 mt-md-4 mt-3 justify-content-center">
<form action="#" method="post">
<div class="subscribe-form">
<div class="contact-subscribe pr-sm-0">
<input type="email" class="form-control" placeholder="Your Email" required="">
</div>
<div class="click-subscribe pl-sm-0">
<button type="submit" class="btn click-me">Subscribe</button>
</div>
</div>
</form>
</div>
</div>
</section>
<!--//subcribe -->
<!--//gallery -->
<!-- team -->
<section class="team" id="team">
<div class="about-color py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="line-w3ls-title col-lg-6 col-md-6 ">
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore</p>
</div>
<div class="title clr col-lg-6 col-md-6 text-center">
<h3 class="clr">Our Team</h3>
</div>
</div>
</div>
</div>
<div class="my-lg-4 my-md-3 my-sm-3 my-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
<div class="team-member">
<div class="team-img">
<img src="images/t1.jpg" alt="" class="img-fluid">
</div>
<div class="team-hover">
<div class="desk text-center">
<h4 class="mb-2">Joya Mily</h4>
</div>
<div class="s-link">
<ul>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-rss"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="team-title">
<h5>Joya Mily</h5>
<span>Manager</span>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
<div class="team-member">
<div class="team-img">
<img src="images/t2.jpg" alt="" class="img-fluid">
</div>
<div class="team-hover">
<div class="desk text-center">
<h4 class="mb-2">Max Hammer</h4>
</div>
<div class="s-link">
<ul>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-rss"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="team-title">
<h5>Max Hammer</h5>
<span>Director</span>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
<div class="team-member">
<div class="team-img">
<img src="images/t3.jpg" alt="" class="img-fluid">
</div>
<div class="team-hover">
<div class="desk text-center">
<h4 class="mb-2">Jonn Jozz</h4>
</div>
<div class="s-link">
<ul>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-rss"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="team-title">
<h5>Jonn Jozz</h5>
<span>projector</span>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
<div class="team-member">
<div class="team-img">
<img src="images/t4.jpg" alt="" class="img-fluid">
</div>
<div class="team-hover">
<div class="desk text-center">
<h4 class="mb-2">Ray Rox</h4>
</div>
<div class="s-link">
<ul>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-rss"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="team-title">
<h5>Ray Rox</h5>
<span>Treasure</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //team -->
<section class="clients py-lg-4 py-md-3 py-sm-3 py-3" id="clients" >
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="title text-center mb-lg-3 mb-2">
<h3 class="clr">Our Clients</h3>
</div>
<div class="line-w3ls-title text-center mb-lg-4 mb-3">
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="clients-txt">
<div class="">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1" class="">
</li><li data-target="#blogCarousel" data-slide-to="2">
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="client-txt-color">
<img src="images/c1.jpg" class="img-thumbnail" alt="">
<div class="client-txt-info">
<h4 class="mt-lg-5 mt-md-4 mt-3 mb-1 text-light"> Ted Willson</h4>
<span class="pt-2"> Our Client</span>
<p class="mt-sm-3 mt-2">Lorem ipsum dolor sit amet, eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<!--.row-->
</div>
<div class="carousel-item">
<div class="client-txt-color">
<img src="images/c2.jpg" class="img-thumbnail" alt="">
<div class="client-txt-info">
<h4 class="mt-lg-5 mt-md-4 mt-3 mb-1 text-light">Orcand Keen</h4>
<span class="pt-2"> Our Client</span>
<p class="mt-sm-3 mt-2 ">Lorem ipsum dolor sit amet, eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
</div>
<!--.row-->
<!--.item-->
<div class="carousel-item ">
<div class="client-txt-color">
<img src="images/c3.jpg" class="img-thumbnail " alt="">
<div class="client-txt-info">
<h4 class="mt-lg-5 mt-md-4 mt-3 mb-1 text-light"> Jack Killy</h4>
<span class="pt-2"> Our Client</span>
<p class="mt-sm-3 mt-2">Lorem ipsum dolor sit amet, eiusmod tempor incididunt ut labore et consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
</div>
<!--.row-->
</div>
</div>
<!--.carousel-inner-->
</div>
<!--.Carousel-->
</div>
</div>
</section>
<!--//clients -->
<!--price -->
<section class="price" id="price">
<div class="about-color py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="title clr col-lg-6 col-md-6 text-center">
<h3 class="clr">Our Price</h3>
</div>
<div class="line-w3ls-title col-lg-6 col-md-6 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore</p>
</div>
</div>
</div>
</div>
<div class="my-lg-4 my-md-3 my-sm-3 my-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="pricing-grids-info row">
<div class="col-lg-4 col-md-4 pricing-grid">
<div class="w3ls-bottom grid-two">
<div class="table-txt-grid">
<h4>Commercial</h4>
<h6 class="mt-2">comfortable price</h6>
</div>
<div class="middle-price">
<div class="jst-price-tag">
<div class="price-gride-icon">
<h4> <span class="sup">$</span>60 </h4>
</div>
</div>
<div class="mb-3 price-w3layouts-table">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="price-list-txt">
<ul class="count">
<li>
<p>Power Electronics</p>
</li>
<li>
<p>Contract Economics</p>
</li>
<li>
<p>Grid Connection</p>
</li>
<li>
<p>Internal Audit</p>
</li>
</ul>
</div>
<div class="more mt-lg-5 mt-md-4 mt-sm-4 mt-3 p-2">
<a href="#contact" class="scroll">Buy Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 pricing-grid">
<div class="w3ls-bottom grid-two">
<div class="table-txt-grid">
<h4>Residential</h4>
<h6 class="mt-2">comfortable price</h6>
</div>
<div class="middle-price">
<div class="jst-price-tag">
<div class="price-gride-icon">
<h4> <span class="sup">$</span>70 </h4>
</div>
</div>
<div class="mb-3 price-w3layouts-table">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="price-list-txt">
<ul class="count">
<li>
<p>Power Electronics</p>
</li>
<li>
<p>Contract Economics</p>
</li>
<li>
<p>Grid Connection</p>
</li>
<li>
<p>Internal Audit</p>
</li>
</ul>
</div>
<div class="more mt-lg-5 mt-md-4 mt-sm-4 mt-3 p-2">
<a href="#contact" class="scroll">Buy Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 pricing-grid">
<div class="w3ls-bottom grid-two">
<div class="table-txt-grid">
<h4>Business</h4>
<h6 class="mt-2">comfortable price</h6>
</div>
<div class="middle-price">
<div class="jst-price-tag">
<div class="price-gride-icon">
<h4> <span class="sup">$</span>80</h4>
</div>
</div>
<div class="mb-3 price-w3layouts-table">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="price-list-txt">
<ul class="count">
<li>
<p>Power Electronics</p>
</li>
<li>
<p>Contract Economics</p>
</li>
<li>
<p>Grid Connection</p>
</li>
<li>
<p>Internal Audit</p>
</li>
</ul>
</div>
<div class="more mt-lg-5 mt-md-4 mt-sm-4 mt-3 p-2">
<a href="#contact" class="scroll">Buy Now</a>
</div>
</div>
</div>
</div>
<!--End-slider-script-->
</div>
</div>
</div>
</section>
<!--//price -->
<!-- blog -->
<section class="blog" id="blog">
<div class="about-color py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="line-w3ls-title col-lg-6 col-md-6 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
<div class="title clr col-lg-6 col-md-6 text-center">
<h3 class="clr">Our Blog</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row ">
<div class="col-lg-6 blog-w3layouts-grids ">
<div class="blog-matter">
<h6><a href="https://www.51qianduan.com/">51前端</a></h6>
</div>
<div class="blog-date mt-2"><a href="#about"> April 16 2020</a></div>
<div class="event-blog-w3pvt mt-md-4 mt-3">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere mollis iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
</div>
<div class="event-blog-w3pvt mt-3">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere mollis iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
</div>
<div class="news-date mt-3 text-right">
<ul>
<li><span class="fa fa-eye" aria-hidden="true"></span><a href="https://www.51qianduan.com/">51前端</a></li>
<li><span class="fa fa-tags"></span><a href="https://www.51qianduan.com/">51前端</a></li>
<li><span class="fa fa-comments"></span><a href="https://www.51qianduan.com/">51前端</a></li>
</ul>
</div>
</div >
<div class="col-lg-6 about-img-grids p-0">
<div class="img-position">
<img src="images/blog1.jpg" class="img-fluid" alt="">
</div>
</div >
</div>
<div class="row">
<div class="col-lg-6 about-img-grids p-0">
<div class="img-position text-center">
<img src="images/blog2.jpg" class="img-fluid" alt="">
</div>
</div >
<div class="col-lg-6 blog-w3layouts-grids ">
<div class="blog-matter">
<h6><a href="https://www.51qianduan.com/">51前端</a></h6>
</div>
<div class="blog-date mt-2"><a href="#about"> April 16 2020</a></div>
<div class="event-blog-w3pvt mt-md-4 mt-3">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere mollis iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
</div>
<div class="event-blog-w3pvt mt-3">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere mollis iaculis.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </p>
</div>
<div class="news-date mt-3 text-right">
<ul>
<li><span class="fa fa-eye" aria-hidden="true"></span><a href="https://www.51qianduan.com/">51前端</a></li>
<li><span class="fa fa-tags"></span><a href="https://www.51qianduan.com/">51前端</a></li>
<li><span class="fa fa-comments"></span><a href="https://www.51qianduan.com/">51前端</a></li>
</ul>
</div>
</div >
</div>
</div>
</section>
<!--//blog -->
<!--contact -->
<section class="contact" id="contact">
<div class="about-color py-lg-4 py-md-3 py-sm-3 py-3">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row">
<div class="title clr col-lg-6 col-md-6 text-center">
<h3 class="clr">Contact Us</h3>
</div>
<div class="line-w3ls-title col-lg-6 col-md-6 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
</div>
</div>
</div>
</div>
<div class="py-lg-4 py-md-3 py-sm-3 py-3 color-contact">
<div class="container py-lg-5 py-md-5 py-sm-4 py-3">
<div class="row mb-lg-5 mb-md-4 mb-3">
<div class="col-lg-4 col-md-4 footer_grid_left text-center">
<div class="contact_footer_grid_left color-1 text-center mb-3">
<span class="fa fa-map-marker"></span>
</div>
<p>348 Melbourne, Beverly Hills, <br>New York City 90210.</p>
</div>
<div class="col-lg-4 col-md-4 footer_grid_left text-center">
<div class="contact_footer_grid_left color-2 text-center mb-3">
<span class="fa fa-phone"></span>
</div>
<p>+(000) 123 4565 32<br>+(010) 123 455 354</p>
</div>
<div class="col-lg-4 col-md-4 footer_grid_left text-center">
<div class="contact_footer_grid_left color-3 text-center mb-3">
<span class="fa fa-envelope"></span>
</div>
<p><a href="https://www.51qianduan.com/">51前端</a>
<br><a href="https://www.51qianduan.com/">51前端</a>
</p>
</div>
</div>
<form action="#" method="post">
<div class="row">
<div class="col-lg-6 col-md-6 wthree-info-para">
<div class=" form-group contact-forms">
<input type="text" class="form-control" placeholder="Fist Name" required="">
</div>
<div class=" form-group contact-forms">
<input type="text" class="form-control" placeholder="Phone" required="">
</div>
<div class="form-group contact-forms">
<input type="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group contact-forms">
<textarea class="form-control" rows="3" placeholder="Message.." required=""></textarea>
</div>
<div class="text-left click-subscribe">
<button type="submit" class="btn btn-block click-me">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<div class=" address_mail_footer_grids">
<iframe src=""></iframe>
</div>
<!--//contact -->
<footer class="py-lg-5 py-md-4 py-4">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 footer-bottom">
<h4>Branch-1</h4>
<div class="footer-top mt-2">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere dolor sit amet</p>
</div>
<div class="line-footer"></div>
<div class=" footer-bottom">
<h4>Branch-2</h4>
<div class="footer-top mt-2">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere dolor sit amet</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 footer-bottom">
<h4>Branch-3</h4>
<div class="footer-top mt-2">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere dolor sit amet</p>
</div>
<div class="line-footer"></div>
<div class=" footer-bottom">
<h4>Branch-2</h4>
<div class="footer-top mt-2">
<p>Suspendisse tincidunt velit velit sagittis vehicula. Duis posuere dolor sit amet</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 footer-bottom">
<h4> Contact Us</h4>
<div class="footer-top mt-3">
<p ><span>Address</span> :348 Melbourne<br>New York City 90210.</p>
<p class="pt-2"> <span> Phone</span> :+(000) 123 4565 32</p>
<p class="pt-2"><span>Email</span> :<a href="https://www.51qianduan.com/">51前端</a>
</p>
</div>
<div class="social-icons mt-lg-3 mt-2">
<ul>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-rss"></span></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 footer-bottom">
<h4> Service</h4>
<div class="footer-top mt-md-3 mt-3">
<h6 class="pb-2">Commercial</h6>
<h6 class="pb-2">Project</h6>
<h6 class="pb-2">Wind Energy</h6>
<h6>Residential</h6>
</div>
</div>
</div>
</div>
</footer>
<div class="copy-bottom-txt text-center py-3">
<p>Copyright © 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
</div>
<!--//footer -->
<!--model-->
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLiveLabel">Wind Power</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="images/b5.jpg" alt="" class="img-fluid">
<p class="pt-3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellu
</p>
<p class="pt-3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellu
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--//model-->
<!--js working-->
<!--//js working-->
<!-- gallery -->
<!-- //gallery -->
<!--responsiveslides banner-->
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager:true ,
nav:false,
speed: 900,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--// responsiveslides banner-->
<!-- service Tabs -->
<script>
$(function() {
var $tabButtonItem = $('#tab-button li'),
$tabSelect = $('#tab-select'),
$tabContents = $('.tab-contents'),
activeClass = 'is-active';
$tabButtonItem.first().addClass(activeClass);
$tabContents.not(':first').hide();
$tabButtonItem.find('a').on('click', function(e) {
var target = $(this).attr('href');
$tabButtonItem.removeClass(activeClass);
$(this).parent().addClass(activeClass);
$tabSelect.val(target);
$tabContents.hide();
$(target).show();
e.preventDefault();
});
$tabSelect.on('change', function() {
var target = $(this).val(),
targetSelectNum = $(this).prop('selectedIndex');
$tabButtonItem.removeClass(activeClass);
$tabButtonItem.eq(targetSelectNum).addClass(activeClass);
$tabContents.hide();
$(target).show();
});
});
</script>
<!--//service Tabs -->
<!--gallery-->
<script>
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
}
else
{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
</script>
<!--// gallery-->
<script>
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 900);
});
});
</script>
<!-- start-smoth-scrolling -->
<!-- here stars scrolling icon -->
<script>
$(document).ready(function () {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({
easingType: 'easeOutQuart'
});
});
</script>
<!-- //here ends scrolling icon -->
<!--bootstrap working-->
<!-- //bootstrap working-->
