绿色大气风格响应式风车发电设备网页模板



3 8 3



模板描述:绿色 大气 响应式 风车发电设备 网页模板,绿色大气风格响应式风车发电设备网页模板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 &copy; 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">&times;</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-->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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