模板描述:绿色 大气 响应式 风车发电设备 网页模板。绿色大气风格响应式风车发电设备网页模板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-->