黄色大气样式html5工厂工业业务网页模板代码



7 27 10



模板描述:html5工厂工业业务,黄色大气样式html5工厂工业业务网页模板代码html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/color-switcher-design.css">
<link rel="stylesheet" href="css/color-themes/default-theme.css" id="theme-color-file">

2. 引入JS

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/jquery.js"></script>
<script src="js/wow.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/jquery.countTo.js"></script>
<script src="js/appear.js"></script>
<script src="js/owl.js"></script>
<script src="js/validation.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyB2uu6KHbLc_y7fyAVA4dpqSVM4w9ZnnUw"></script>
<script src="js/gmaps.js"></script>
<script src="js/map-helper.js"></script>
<script src="assets/jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="assets/language-switcher/jquery.polyglot.language.switcher.js"></script>
<script src="assets/timepicker/timePicker.js"></script>
<script src="assets/bootstrap-sl-1.12.1/bootstrap-select.js"></script>
<script src="assets/html5lightbox/html5lightbox.js"></script>
<script src="js/color-settings.js"></script>
<script src="plugins/revolution/js/jquery.themepunch.revolution.min.js"></script>
<script src="plugins/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="plugins/revolution/js/extensions/revolution.extension.video.min.js"></script>
<script src="js/main-slider-script.js"></script>
<script src="js/custom.js"></script>

3. HTML代码

<div class="boxed_wrapper">
<div class="preloader"></div> 
<!-- Start Top Bar area -->  
<section class="top-bar-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="top-bar clearfix">
                    <div class="top-left float-left clearfix">
                        <div class="language-switcher">
                            <div id="polyglotLanguageSwitcher">
                                <form action="#">
                                    <select id="polyglot-language-options">
                                        <option id="en" value="en" selected>English</option>
                                        <option id="fr" value="fr">French</option>
                                        <option id="de" value="de">German</option>
                                        <option id="it" value="it">Italian</option>
                                        <option id="es" value="es">Spanish</option>
                                    </select>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="top-right float-right">
                        <ul class="top-contact-info">
                            <li>Do you need help? Here Us:</li>
                            <li><a href="#"><span class="icon-phone"></span>(555) 5678 12340</a></li>
                            <li><a href="#"><span class="icon-mail"></span>info@example.com</a></li>
                            <li><a href="#"><span class="icon-clock"></span>Mon - Fri: 10am - 5pm</a></li>
                        </ul>   
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>
<!-- End Top Bar area -->  
<!--Start header style1 area-->
<header class="header-style1-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="inner-content clearfix">
                    <div class="header-style1-logo float-left">
                        <a href="index.html">
                            <img src="images/resources/logo.png" alt="Awesome Logo">
                        </a>
                    </div>   
                    <div class="headers1-header-right float-right">
                        <ul>
                            <li>
                                <div class="single-item">
                                    <div class="icon">
                                        <span class="icon-stamp"></span>    
                                    </div>
                                    <div class="text">
                                        <p>Certified Company</p> 
                                        <span>ISO 9001:2005</span>   
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="single-item">
                                    <div class="icon">
                                        <span class="icon-shield"></span>    
                                    </div>
                                    <div class="text">
                                        <p>Leading Industry</p> 
                                        <span>In Europe</span>   
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="header-button">
                            <a class="btn-one" href="#">Get a Quote</a>    
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </div>        
</header>  
<!--End header style1 area-->
<!--Start mainmenu area-->
<section class="mainmenu-area stricky">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content clearfix">
                    <nav class="main-menu clearfix">
                        <div class="navbar-header clearfix">   	
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="navbar-collapse collapse clearfix">
                            <ul class="navigation clearfix">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </div>
                    </nav>
                    <div class="mainmenu-right">
                        <div class="outer-search-box">
                            <div class="seach-toggle"><i class="fa fa-search"></i></div>
                            <ul class="search-box">
                                <li>
                                    <form method="post" action="index.html">
                                        <div class="form-group">
                                            <input type="search" name="search" placeholder="Search Here" required>
                                            <button type="submit"><i class="fa fa-search"></i></button>
                                        </div>
                                    </form>
                                </li>
                            </ul>
                        </div>
                        <div class="cart-box">
                            <a href="#"><span class="icon icon-bag"><span class="number">0</span></span></a>
                        </div>
                        <div class="social-links-box">
                            <ul>
                                <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>    
                    </div> 
                </div>
            </div>
        </div>
    </div>
</section>                 
<!--End mainmenu area-->                 
<!--Main Slider-->
<section class="main-slider">
    <div class="rev_slider_wrapper fullwidthbanner-container"  id="rev_slider_one_wrapper" data-source="gallery">
        <div class="rev_slider fullwidthabanner" id="rev_slider_one" data-version="5.4.1">
            <ul>
                <li data-description="Slide Description" data-easein="default" data-easeout="default" data-fsmasterspeed="1500" data-fsslotamount="7" data-fstransition="fade" data-hideafterloop="0" data-hideslideonmobile="off" data-index="rs-1690" data-masterspeed="default" data-param1="" data-param10="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-rotate="0" data-saveperformance="off" data-slotamount="default" data-thumb="images/slides/v1-1.jpg" data-title="Slide Title" data-transition="parallaxvertical">
                <img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="images/slides/v1-1.jpg"> 
                <div class="tp-caption" 
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingtop="[0,0,0,0]"
                data-responsive_offset="on"
                data-type="text"
                data-height="none"
                data-width="['700','700','600','400']"
                data-whitespace="normal"
                data-hoffset="['15','15','15','15']"
                data-voffset="['-80','-90','-70','-80']"
                data-x="['left','left','left','left']"
                data-y="['middle','middle','middle','middle']"
                data-textalign="['top','top','top','top']"
                data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="big-title">
                            <b>enduz,</b> Building<br> a history of<br>engineering success 
                        </div>    
                    </div>
                </div>
                <div class="tp-caption" 
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingtop="[0,0,0,0]"
                data-responsive_offset="on"
                data-type="text"
                data-height="none"
                data-width="['700','700','600','400']"
                data-whitespace="normal"
                data-hoffset="['15','15','15','15']"
                data-voffset="['70','50','50','40']"
                data-x="['left','left','left','left']"
                data-y="['middle','middle','middle','middle']"
                data-textalign="['top','top','top','top']"
                data-frames='[{"from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="text">Maintains a highly trained, qualified and experienced workforce.</div>    
                    </div>
                </div>
                <div class="tp-caption" 
                    data-paddingbottom="[0,0,0,0]"
                    data-paddingleft="[0,0,0,0]"
                    data-paddingright="[0,0,0,0]"
                    data-paddingtop="[0,0,0,0]"
                    data-responsive_offset="on"
                    data-type="text"
                    data-height="none"
                    data-width="['700','700','600','400']"
                    data-whitespace="normal"
                    data-hoffset="['15','15','15','15']"
                    data-voffset="['155','135','135','135']"
                    data-x="['left','left','left','left']"
                    data-y="['middle','middle','middle','middle']"
                    data-textalign="['top','top','top','top']"
                    data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="btn-box">
                            <a class="btn-one" href="#">About Company</a>
                        </div>    
                    </div>
                </div>
                </li>
                <li data-description="Slide Description" data-easein="default" data-easeout="default" data-fsmasterspeed="1500" data-fsslotamount="7" data-fstransition="fade" data-hideafterloop="0" data-hideslideonmobile="off" data-index="rs-1691" data-masterspeed="default" data-param1="" data-param10="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-rotate="0" data-saveperformance="off" data-slotamount="default" data-thumb="images/slides/v1-2.jpg" data-title="Slide Title" data-transition="parallaxvertical">
                <img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="images/slides/v1-2.jpg"> 
                <div class="tp-caption" 
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingtop="[0,0,0,0]"
                data-responsive_offset="on"
                data-type="text"
                data-height="none"
                data-width="['700','700','700','400']"
                data-whitespace="normal"
                data-hoffset="['15','15','15','15']"
                data-voffset="['-80','-90','-70','-80']"
                data-x="['left','left','left','left']"
                data-y="['middle','middle','middle','middle']"
                data-textalign="['top','top','top','top']"
                data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="big-title">
                            <b>Trusted,</b> World wide<br> experience indutrial<br> contracts. 
                        </div>    
                    </div>
                </div>
                <div class="tp-caption" 
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingtop="[0,0,0,0]"
                data-responsive_offset="on"
                data-type="text"
                data-height="none"
                data-whitespace="normal"
                data-width="['700','700','700','400']"
                data-hoffset="['15','15','15','15']"
                data-voffset="['70','50','50','40']"
                data-x="['left','left','left','left']"
                data-y="['middle','middle','middle','middle']"
                data-textalign="['top','top','top','top']"
                data-frames='[{"from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="text">Maintains a highly trained, qualified and experienced workforce.</div>    
                    </div>
                </div>
                <div class="tp-caption" 
                    data-paddingbottom="[0,0,0,0]"
                    data-paddingleft="[0,0,0,0]"
                    data-paddingright="[0,0,0,0]"
                    data-paddingtop="[0,0,0,0]"
                    data-responsive_offset="on"
                    data-type="text"
                    data-height="none"
                    data-width="['700','700','700','400']"
                    data-whitespace="normal"
                    data-hoffset="['15','15','15','15']"
                    data-voffset="['155','135','135','135']"
                    data-x="['left','left','left','left']"
                    data-y="['middle','middle','middle','middle']"
                    data-textalign="['top','top','top','top']"
                    data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="btn-box">
                            <a class="btn-one" href="#">About Company</a>
                        </div>    
                    </div>
                </div>
                </li>
                <li data-description="Slide Description" data-easein="default" data-easeout="default" data-fsmasterspeed="1500" data-fsslotamount="7" data-fstransition="fade" data-hideafterloop="0" data-hideslideonmobile="off" data-index="rs-1692" data-masterspeed="default" data-param1="" data-param10="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-rotate="0" data-saveperformance="off" data-slotamount="default" data-thumb="images/slides/v1-3.jpg" data-title="Slide Title" data-transition="parallaxvertical">
                <img alt="" class="rev-slidebg" data-bgfit="cover" data-bgparallax="10" data-bgposition="center center" data-bgrepeat="no-repeat" data-no-retina="" src="images/slides/v1-3.jpg"> 
                <div class="tp-caption" 
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingtop="[0,0,0,0]"
                data-responsive_offset="on"
                data-type="text"
                data-height="none"
                data-width="['700','700','600','400']"
                data-whitespace="normal"
                data-hoffset="['15','15','15','15']"
                data-voffset="['-80','-90','-70','-80']"
                data-x="['left','left','left','left']"
                data-y="['middle','middle','middle','middle']"
                data-textalign="['top','top','top','top']"
                data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="big-title">
                            <b>MIssion,</b> Provide<br>best industrial<br> solution for everyone. 
                        </div>    
                    </div>
                </div>
                <div class="tp-caption" 
                data-paddingbottom="[0,0,0,0]"
                data-paddingleft="[0,0,0,0]"
                data-paddingright="[0,0,0,0]"
                data-paddingtop="[0,0,0,0]"
                data-responsive_offset="on"
                data-type="text"
                data-height="none"
                data-whitespace="normal"
                data-width="['700','700','600','400']"
                data-hoffset="['15','15','15','15']"
                data-voffset="['70','50','50','40']"
                data-x="['left','left','left','left']"
                data-y="['middle','middle','middle','middle']"
                data-textalign="['top','top','top','top']"
                data-frames='[{"from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="text">Maintains a highly trained, qualified and experienced workforce.</div>    
                    </div>
                </div>
                <div class="tp-caption" 
                    data-paddingbottom="[0,0,0,0]"
                    data-paddingleft="[0,0,0,0]"
                    data-paddingright="[0,0,0,0]"
                    data-paddingtop="[0,0,0,0]"
                    data-responsive_offset="on"
                    data-type="text"
                    data-height="none"
                    data-width="['700','700','600','400']"
                    data-whitespace="normal"
                    data-hoffset="['15','15','15','15']"
                    data-voffset="['155','135','135','135']"
                    data-x="['left','left','left','left']"
                    data-y="['middle','middle','middle','middle']"
                    data-textalign="['top','top','top','top']"
                    data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"auto:auto;","mask":"x:0;y:0;s:inherit;e:inherit;","ease":"Power3.easeInOut"}]'
                    style="z-index: 7; white-space: nowrap;">
                    <div class="slide-content left-slide">
                        <div class="btn-box">
                            <a class="btn-one" href="#">About Company</a>
                        </div>    
                    </div>
                </div>
                </li>
            </ul>
        </div>
    </div>
</section>
<!--End Main Slider-->
<!--Start Call To Action area-->
<section class="call-to-action-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="callto-action">
                    <ul>
                        <li class="single-box wow fadeInUp" data-wow-delay="300ms">
                            <div class="top">
                                <div class="icon-holder">
                                    <span class="icon-work"></span>    
                                </div>
                                <div class="title-holder">
                                    <h3>Industial<br> Construction</h3>
                                </div>
                            </div>
                            <div class="text-holder">
                                <p>Expound the actual teachings the great explorer of the truth, the master-builder of human happiness.</p>
                                <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                            </div>
                        </li>
                        <li class="single-box wow fadeInUp" data-wow-delay="600ms">
                            <div class="top">
                                <div class="icon-holder">
                                    <span class="icon-london"></span>    
                                </div>
                                <div class="title-holder">
                                    <h3>Bridge<br> Construction</h3>
                                </div>
                            </div>
                            <div class="text-holder">
                                <p>To take a trivials example, which of our undertakes laborious physical exercise, obtain some advantage.</p>
                                <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                            </div>
                        </li>
                        <li class="single-box wow fadeInUp" data-wow-delay="900ms">
                            <div class="top">
                                <div class="icon-holder">
                                    <span class="icon-oil"></span>    
                                </div>
                                <div class="title-holder">
                                    <h3>Petroleum<br> and Gas Energy</h3>
                                </div>
                            </div>
                            <div class="text-holder">
                                <p>Any right to find fault with man chooses to enjoy a pleasure that has annoying one avoids.</p>
                                <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                            </div>
                        </li>
                    </ul>
                </div>   
            </div>
        </div> 
    </div>    
</section>
<!--End Call To Action Area-->
<!--Start services style1 area-->
<section class="services-style1-area">
    <div class="container">
        <div class="sec-title text-center">
            <div class="title">Markert We Serve</div>
            <div class="inner">
                <div class="border1"></div>
                <span>Solutions</span>
                <div class="border2"></div>
            </div>
            <p>Over the past 25 years, Industrial has been a global leader. From manufacturing some of the first engines, to managing 60% of the world's cars manufacturing.</p>
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="services-carousel owl-carousel owl-theme">
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/1.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-petroleum"></span>
                                </div>
                                <div class="text">
                                    <h3>Gas & Petroleum</h3>
                                    <p>Safety and innovation are the core of everything we with attitude personal.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-petroleum"></span>
                                </div>
                                <div class="text">
                                    <h3>Gas & Petroleum</h3>
                                    <p>Safety and innovation are the core of everything we together with attitude personal.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/2.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-power"></span>
                                </div>
                                <div class="text">
                                    <h3>Standby Power</h3>
                                    <p>How all this mistaken idea of denouncing pleasure praisings  was complete system.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-power"></span>
                                </div>
                                <div class="text">
                                    <h3>Standby Power</h3>
                                    <p>How all this mistaken idea of denouncing pleasure praisings  was complete system.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/3.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-tractor"></span>
                                </div>
                                <div class="text">
                                    <h3>Agriculture</h3>
                                    <p>Know how to pursue pleasure encounter consequences seds are extremely powerful.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-tractor"></span>
                                </div>
                                <div class="text">
                                    <h3>Agriculture</h3>
                                    <p>Know how to pursue pleasure encounter consequences seds are extremely powerful.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/1.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-petroleum"></span>
                                </div>
                                <div class="text">
                                    <h3>Gas & Petroleum</h3>
                                    <p>Safety and innovation are the core of everything we with attitude personal.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-petroleum"></span>
                                </div>
                                <div class="text">
                                    <h3>Gas & Petroleum</h3>
                                    <p>Safety and innovation are the core of everything we together with attitude personal.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/2.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-power"></span>
                                </div>
                                <div class="text">
                                    <h3>Standby Power</h3>
                                    <p>How all this mistaken idea of denouncing pleasure praisings  was complete system.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-power"></span>
                                </div>
                                <div class="text">
                                    <h3>Standby Power</h3>
                                    <p>How all this mistaken idea of denouncing pleasure praisings  was complete system.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/3.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-tractor"></span>
                                </div>
                                <div class="text">
                                    <h3>Agriculture</h3>
                                    <p>Know how to pursue pleasure encounter consequences seds are extremely powerful.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-tractor"></span>
                                </div>
                                <div class="text">
                                    <h3>Agriculture</h3>
                                    <p>Know how to pursue pleasure encounter consequences seds are extremely powerful.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1--> 
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/1.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-petroleum"></span>
                                </div>
                                <div class="text">
                                    <h3>Gas & Petroleum</h3>
                                    <p>Safety and innovation are the core of everything we with attitude personal.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-petroleum"></span>
                                </div>
                                <div class="text">
                                    <h3>Gas & Petroleum</h3>
                                    <p>Safety and innovation are the core of everything we together with attitude personal.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/2.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-power"></span>
                                </div>
                                <div class="text">
                                    <h3>Standby Power</h3>
                                    <p>How all this mistaken idea of denouncing pleasure praisings  was complete system.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-power"></span>
                                </div>
                                <div class="text">
                                    <h3>Standby Power</h3>
                                    <p>How all this mistaken idea of denouncing pleasure praisings  was complete system.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->
                    <!--Start single solution style1--> 
                    <div class="single-solution-style1">
                        <div class="img-holder">
                            <img src="images/services/3.jpg" alt="Awesome Image">   
                        </div>
                        <div class="statics-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-tractor"></span>
                                </div>
                                <div class="text">
                                    <h3>Agriculture</h3>
                                    <p>Know how to pursue pleasure encounter consequences seds are extremely powerful.</p>
                                </div>
                            </div>
                        </div>
                        <div class="overlay-content">
                            <div class="text-holder">
                                <div class="icon">
                                    <span class="icon-tractor"></span>
                                </div>
                                <div class="text">
                                    <h3>Agriculture</h3>
                                    <p>Know how to pursue pleasure encounter consequences seds are extremely powerful.</p>
                                    <div class="readmore">
                                        <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    <!--End single solution style1-->      
                </div>
            </div>
        </div> 
    </div>
</section>
<!--End services style1 area-->
<!--Start growth area-->
<section class="growth-area">
    <div class="growth-chart-image">
        <img src="images/resources/growth-chart-bg.jpg" alt="Awesome Image">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="growth-content">
                    <h3>Why Choosing Us?</h3>
                    <div class="progress-levels">
                        <!--Skill Box-->
                        <div class="progress-box wow">
                            <div class="inner count-box">
                                <div class="text">Production</div>
                                <div class="bar">
                                    <div class="bar-innner">
                                        <div class="skill-percent">
                                            <span class="count-text" data-speed="3000" data-stop="75">0</span>
                                            <span class="percent">%</span>
                                        </div>
                                        <div class="bar-fill" data-percent="75"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Skill Box-->
                        <div class="progress-box wow">
                            <div class="inner count-box">
                                <div class="text">Utilization Works</div>
                                <div class="bar">
                                    <div class="bar-innner">
                                        <div class="skill-percent">
                                            <span class="count-text" data-speed="3000" data-stop="60">0</span>
                                            <span class="percent">%</span>
                                        </div>
                                        <div class="bar-fill" data-percent="60"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Skill Box-->
                        <div class="progress-box wow">
                            <div class="inner count-box">
                                <div class="text">EPC Works</div>
                                <div class="bar">
                                    <div class="bar-innner">
                                        <div class="skill-percent">
                                            <span class="count-text" data-speed="3000" data-stop="95">0</span>
                                            <span class="percent">%</span>
                                        </div>
                                        <div class="bar-fill" data-percent="95"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Skill Box-->
                        <div class="progress-box wow">
                            <div class="inner count-box">
                                <div class="text">Customer Satisfaction</div>
                                <div class="bar">
                                    <div class="bar-innner">
                                        <div class="skill-percent">
                                            <span class="count-text" data-speed="3000" data-stop="80">0</span>
                                            <span class="percent">%</span>
                                        </div>
                                        <div class="bar-fill" data-percent="80"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Skill Box-->
                        <div class="progress-box wow">
                            <div class="inner count-box">
                                <div class="text">Avg Profit Increased</div>
                                <div class="bar">
                                    <div class="bar-innner">
                                        <div class="skill-percent">
                                            <span class="count-text" data-speed="3000" data-stop="90">0</span>
                                            <span class="percent">%</span>
                                        </div>
                                        <div class="bar-fill" data-percent="90"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="growth-content-right">
                    <div class="icon-holder">
                        <span class="icon-biomass"></span>    
                    </div>
                    <h2>We maintains a highly trained and<br> experienced team.</h2>
                    <div class="text">
                        <p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a to enjoy a pleasure that has no annoying consequences.</p>
                        <p>Ever undertakes laborious physicalexercise, except to obtain some advantage  but who has any right to find fault with a to enjoy.</p>
                    </div> 
                    <div class="bottom-content">
                        <div class="icon" style="background-image: url(images/resources/video-gallery-bg.png);">
                            <a class="html5lightbox" title="Enduz Video Gallery" href="">
                                <span class="icon-play"></span>
                            </a>
                        </div>
                        <div class="title">
                            <h4>Video About Company</h4>
                            <span>Some advantages</span>
                        </div>
                    </div>   
                </div>
            </div>
        </div>    
    </div>
</section>
<!--End growth area-->
<!--Start Featured project area-->
<section class="featured-project-area">
    <div class="container">
        <div class="sec-title text-center">
            <div class="title">Featured Projects</div>
            <div class="inner">
                <div class="border1"></div>
                <span>Our Works</span>
                <div class="border2"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div class="featured-project">
                    <div class="featured-project-carousel owl-carousel owl-theme">
                        <!--Start single featured project-->
                        <div class="single-featured-project">
                            <div class="img-holder">
                                <img src="images/projects/featured-project-1.jpg" alt="Awesome Image">
                                <div class="overlay-content">
                                    <div class="count">01</div>
                                    <div class="project-details">
                                        <h3>Bank Building</h3>
                                        <span>Projct Description</span>
                                        <p>Desires to obtain pain off itself, because  pain, but because occasionally.</p>
                                        <a href="#">Read More</a>
                                    </div>    
                                </div>
                            </div>    
                        </div>
                        <!--End single featured project-->
                        <!--Start single featured project-->
                        <div class="single-featured-project">
                            <div class="img-holder">
                                <img src="images/projects/featured-project-2.jpg" alt="Awesome Image">
                                <div class="overlay-content">
                                    <div class="count">02</div>
                                    <div class="project-details">
                                        <h3>Engineering</h3>
                                        <span>Projct Description</span>
                                        <p>Desires to obtain pain off itself, because  pain, but because occasionally.</p>
                                        <a href="#">Read More</a>
                                    </div>    
                                </div>
                            </div>    
                        </div>
                        <!--End single featured project-->    
                        <!--Start single featured project-->
                        <div class="single-featured-project">
                            <div class="img-holder">
                                <img src="images/projects/featured-project-3.jpg" alt="Awesome Image">
                                <div class="overlay-content">
                                    <div class="count">03</div>
                                    <div class="project-details">
                                        <h3>Power & Energy</h3>
                                        <span>Projct Description</span>
                                        <p>Desires to obtain pain off itself, because  pain, but because occasionally.</p>
                                        <a href="#">Read More</a>
                                    </div>    
                                </div>
                            </div>    
                        </div>
                        <!--End single featured project-->        
                    </div>    
                </div>
            </div>
        </div>
    </div>
</section>
<!--End Featured project area-->
<!--Start fact counter area-->
<section class="fact-counter-area" style="background-image: url(images/parallax-background/fact-counter-bg.jpg);">
    <div class="container">
        <div class="row">
            <!--Start single fact counter-->
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div class="single-fact-counter text-center wow fadeInUp" data-wow-delay="300ms">
                    <div class="count-box">
                        <h1>
                            <span class="timer" data-from="1" data-to="10" data-speed="5000" data-refresh-interval="50">10</span><b>k</b>
                        </h1>
                        <div class="title">
                            <h3>Projects Completed</h3>
                        </div>
                        <div class="icon">
                            <span class="icon-tower"></span>    
                        </div>
                    </div>
                    <div class="overlay-text">
                        <h1>
                            <span class="timer" data-from="1" data-to="10" data-speed="5000" data-refresh-interval="50">10</span><b>k</b>
                        </h1>
                        <div class="title">
                            <h3>Projects Completed</h3>
                        </div> 
                        <div class="text">
                            <p>Our aim is to bring our service to all the people.</p>
                            <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                        </div>   
                    </div>
                </div>
            </div>
            <!--End single fact counter-->
            <!--Start single fact counter-->
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div class="single-fact-counter text-center wow fadeInUp" data-wow-delay="600ms">
                    <div class="count-box">
                        <h1>
                            <span class="timer" data-from="1" data-to="378" data-speed="5000" data-refresh-interval="50">378</span>
                        </h1>
                        <div class="title">
                            <h3>Branches Worldwide</h3>
                        </div>
                        <div class="icon">
                            <span class="icon-conveyor"></span>    
                        </div>
                    </div>
                    <div class="overlay-text">
                        <h1>
                            <span class="timer" data-from="1" data-to="378" data-speed="5000" data-refresh-interval="50">378</span>
                        </h1>
                        <div class="title">
                            <h3>Branches Worldwide</h3>
                        </div> 
                        <div class="text">
                            <p>Our aim is to bring our service to all the people.</p>
                            <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                        </div>   
                    </div>
                </div>
            </div>
            <!--End single fact counter-->
            <!--Start single fact counter-->
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div class="single-fact-counter text-center wow fadeInUp" data-wow-delay="900ms">
                    <div class="count-box">
                        <h1>
                            <span class="timer" data-from="1" data-to="165" data-speed="5000" data-refresh-interval="50">165</span>
                        </h1>
                        <div class="title">
                            <h3>Trained Engineers</h3>
                        </div>
                        <div class="icon">
                            <span class="icon-avatar"></span>    
                        </div>
                    </div>
                    <div class="overlay-text">
                        <h1>
                            <span class="timer" data-from="1" data-to="165" data-speed="5000" data-refresh-interval="50">165</span>
                        </h1>
                        <div class="title">
                            <h3>Trained Engineers</h3>
                        </div> 
                        <div class="text">
                            <p>Our aim is to bring our service to all the people.</p>
                            <a class="btn-two" href="#"><span class="icon-arrow"></span>Read More</a>
                        </div>   
                    </div>
                </div>
            </div>
            <!--End single fact counter-->
        </div>
    </div>
</section>
<!--End fact counter area-->
<!--Start working process area-->
<section class="working-process-area">
    <div class="container">
        <div class="sec-title text-center">
            <div class="title">Working Process</div>
            <div class="inner">
                <div class="border1"></div>
                <span>Way for Solution</span>
                <div class="border2"></div>
            </div>
            <p>To take a trivial example, which of us ever undertakes laborious physical exercise, except to enjoy a pleasure that has no annoying consequences.</p>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div class="working-process">
                    <ul class="clearfix">
                        <li class="arrow wow fadeInDown" data-wow-delay="300ms">
                            <div class="single-item">
                                <div class="icon-holder">
                                    <span class="icon-molding-machine"></span>
                                    <div class="count-box">
                                        <h4>1</h4>
                                    </div>
                                </div>
                                <div class="text-holder">
                                    <h3>Cold Rolling</h3>
                                    <span>Shaping</span>
                                    <p>Safety and innovation are the everything together.</p>
                                </div>
                            </div>
                        </li>
                        <li class="arrow top martop50 wow fadeInUp" data-wow-delay="600ms">
                            <div class="single-item">
                                <div class="icon-holder">
                                    <span class="icon-conveyor"></span>
                                    <div class="count-box">
                                        <h4>2</h4>
                                    </div>
                                </div>
                                <div class="text-holder">
                                    <h3>Machining</h3>
                                    <span>Drilling</span>
                                    <p>How this mistaken denouncing pleasure praisings.</p>
                                </div>
                            </div>
                        </li>
                        <li class="arrow wow fadeInDown" data-wow-delay="900ms">
                            <div class="single-item">
                                <div class="icon-holder">
                                    <span class="icon-conveyor-1"></span>
                                    <div class="count-box">
                                        <h4>3</h4>
                                    </div>
                                </div>
                                <div class="text-holder">
                                    <h3>Heat Treatment</h3>
                                    <span>Tempering</span>
                                    <p>Idea of pleasure praisings was complete system.</p>
                                </div>
                            </div>
                        </li>
                        <li class="martop50 wow fadeInUp" data-wow-delay="1200ms">
                            <div class="single-item">
                                <div class="icon-holder">
                                    <span class="icon-miscellaneous"></span>
                                    <div class="count-box">
                                        <h4>4</h4>
                                    </div>
                                </div>
                                <div class="text-holder">
                                    <h3>Surface Treatment</h3>
                                    <span>Carburizing</span>
                                    <p>Know how too pursue pleasures encounter consences.</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End working process area-->
<!--Start Testimonial area-->
<section class="testimonial-area">
    <div class="title wow slideInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
        <span class="float-text">Testimonials</span>
    </div>
    <div class="container-fluid testimonial">
        <div class="testimonial-carousel owl-carousel owl-theme">
            <!--Start Single Testimonial Item-->
            <div class="single-testimonial-item">
                <div class="img-holder">
                    <img src="images/testimonial/1.jpg" alt="Awesome Image">
                    <div class="icon-holder">
                        <img src="images/icon/quote-icon.png" alt="Quote Icon">  
                    </div>
                    <div class="title-holder">
                        <span>Newyork</span>
                        <h3>Thomas Bennet</h3>    
                    </div>
                    <div class="overlay-content">
                        <p>To take a trivial example, which of us ever undertakes laborious physical exercise except obtain some advantage from it but who has any right some great pleasure.</p>
                    </div>
                </div>    
            </div>    
            <!--End Single Testimonial Item--> 
            <!--Start Single Testimonial Item-->
            <div class="single-testimonial-item">
                <div class="img-holder">
                    <img src="images/testimonial/2.jpg" alt="Awesome Image">
                    <div class="icon-holder">
                        <img src="images/icon/quote-icon.png" alt="Quote Icon">  
                    </div>
                    <div class="title-holder">
                        <span>Texus</span>
                        <h3>Tomy Brown</h3>    
                    </div>
                    <div class="overlay-content">
                        <p>To take a trivial example, which of us ever undertakes laborious physical exercise except obtain some advantage from it but who has any right some great pleasure.</p>
                    </div>
                </div>    
            </div>    
            <!--End Single Testimonial Item-->   
            <!--Start Single Testimonial Item-->
            <div class="single-testimonial-item">
                <div class="img-holder">
                    <img src="images/testimonial/3.jpg" alt="Awesome Image">
                    <div class="icon-holder">
                        <img src="images/icon/quote-icon.png" alt="Quote Icon">  
                    </div>
                    <div class="title-holder">
                        <span>Los Angeles</span>
                        <h3>Mark Richardson</h3>    
                    </div>
                    <div class="overlay-content">
                        <p>To take a trivial example, which of us ever undertakes laborious physical exercise except obtain some advantage from it but who has any right some great pleasure.</p>
                    </div>
                </div>    
            </div>    
            <!--End Single Testimonial Item-->      
        </div>   
    </div>    
</section>
<!--End Testimonial area-->
<!--Start latest blog area-->
<section class="latest-blog-area">
    <div class="container inner-content">
        <div class="sec-title text-center">
            <div class="title">Industry Updates</div>
            <div class="inner">
                <div class="border1"></div>
                <span>Blog & News</span>
                <div class="border2"></div>
            </div>
        </div>
        <div class="row">
            <!--Start single blog post-->
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div class="single-blog-post">
                    <div class="img-holder">
                        <img src="images/blog/lat-blog-1.jpg" alt="Awesome Image">
                        <div class="author-box">
                            <div class="img-holder">
                                <img src="images/blog/author-1.png" alt="Awesome Image">    
                            </div>
                            <div class="title-holder">
                                <h4>Fread Dacey</h4>
                            </div>
                        </div>
                        <div class="overlay-style-one">
                            <div class="box">
                                <div class="content">
                                    <div class="icon">
                                        <a class="readmore" href="#"><span class="icon-more"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-holder">
                        <div class="post-date">
                            <p>14th Nov, 2018</p>
                        </div>
                        <h3 class="blog-title"><a href="#">We are best for any indutrial and business solution.</a></h3> 
                        <div class="text">
                            <p>Explain to you how all this uts mistaken ideaof denouncing pleasure & our praising was born & complete system.</p>
                        </div>  
                        <div class="meta-box">
                            <ul class="meta-info">
                                <li><a href="#"><span class="icon-comment"></span>5 Comments</a></li>
                                <li><a href="#"><span class="icon-archive"></span>Industries</a></li>
                            </ul>    
                        </div>
                    </div>
                </div>
            </div>
            <!--End single blog post-->
            <!--Start single blog post-->
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div class="single-blog-post">
                    <div class="img-holder">
                        <img src="images/blog/lat-blog-2.jpg" alt="Awesome Image">
                        <div class="author-box">
                            <div class="img-holder">
                                <img src="images/blog/author-2.png" alt="Awesome Image">    
                            </div>
                            <div class="title-holder">
                                <h4>Halsey Varik</h4>
                            </div>
                        </div>
                        <div class="overlay-style-one">
                            <div class="box">
                                <div class="content">
                                    <div class="icon">
                                        <a class="readmore" href="#"><span class="icon-more"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-holder">
                        <div class="post-date">
                            <p>06th Oct, 2018</p>
                        </div>
                        <h3 class="blog-title"><a href="#">We won best factory award of the year 2016 & 17.</a></h3> 
                        <div class="text">
                            <p>Nor again is there anyone who loves pursue or desires to obtain pain of itself, because it is pain, but occasionally.</p>
                        </div>  
                        <div class="meta-box">
                            <ul class="meta-info">
                                <li><a href="#"><span class="icon-comment"></span>0 Comments</a></li>
                                <li><a href="#"><span class="icon-archive"></span>Manufacturing</a></li>
                            </ul>    
                        </div>
                    </div>
                </div>
            </div>
            <!--End single blog post-->
            <!--Start single blog post-->
            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12">
                <div class="single-blog-post">
                    <div class="img-holder">
                        <img src="images/blog/lat-blog-3.jpg" alt="Awesome Image">
                        <div class="author-box">
                            <div class="img-holder">
                                <img src="images/blog/author-3.png" alt="Awesome Image">    
                            </div>
                            <div class="title-holder">
                                <h4>Dalyn Haeda</h4>
                            </div>
                        </div>
                        <div class="overlay-style-one">
                            <div class="box">
                                <div class="content">
                                    <div class="icon">
                                        <a class="readmore" href="#"><span class="icon-more"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-holder">
                        <div class="post-date">
                            <p>27th Sep, 2018</p>
                        </div>
                        <h3 class="blog-title"><a href="#">10 reason why should choose our industry for military.</a></h3> 
                        <div class="text">
                            <p>To take a trivial example, which of us ever undertakes laborious physical exercise sed some advantage.</p>
                        </div>  
                        <div class="meta-box">
                            <ul class="meta-info">
                                <li><a href="#"><span class="icon-comment"></span>2 Comments</a></li>
                                <li><a href="#"><span class="icon-archive"></span>Technology</a></li>
                            </ul>    
                        </div>
                    </div>
                </div>
            </div>
            <!--End single blog post-->
        </div>
    </div>
</section>
<!--End latest blog area--> 
<!--Start newsletter area-->
<section class="newsletter-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-4">
                <div class="newsletter-title">
                    <h3>Newsletter Subscription</h3>
                    <span>Get latest news & updates to your inbox directly.</span>
                </div>
            </div>
            <div class="col-xl-8">
                <form class="newsletter-form" action="#">
                    <input type="text" name="name" placeholder="Name">
                    <input type="email" name="email" placeholder="Email">
                    <button class="btn-one" type="submit">Submit Now</button>
                </form>    
            </div>
        </div>
    </div>
</section>
<!--End newsletter area-->
<!--Start Map Quote area-->
<section class="map-quote-area">
    <div class="google-map-box">
        <div 
            class="google-map" 
            id="home1-google-map" 
            data-map-lat="40.584160" 
            data-map-lng="-74.415543" 
            data-icon-path="images/resources/map-marker.png" 
            data-map-title="Brooklyn, New York, United Kingdom" 
            data-map-zoom="12" 
            data-markers='{
                "marker-1": [40.584160, -74.415543, "<h4>Head Office</h4><p>44/108 Brooklyn, UK</p>"],
                "marker-2": [40.602230, -74.689910, "<h4>Head Office</h4><p>44/108 Brooklyn, UK</p>"],
                "marker-3": [35.616959, -87.838852, "<h4>Head Office</h4><p>44/108 Brooklyn, UK</p>"]
            }'>
        </div>   
    </div>  
    <div class="container quote-content clearfix">
        <div class="view-map">
            <a href="contact.html">View On Map</a>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content clearfix">
                    <div class="contact-box">
                        <h3>Quick Contact</h3>
                        <ul>
                            <li>
                                <span>Address</span>
                                <p>54 N. City Hall Lakewood Avenue <br>USA IL, 60640.</p>
                            </li>
                            <li>
                                <span>Phone</span>
                                <p>+555 5678 12340</p>
                            </li>
                            <li>
                                <span>Email</span>
                                <p>Supportteam@example.com</p>
                            </li>
                        </ul>
                    </div>
                    <div class="quote">
                        <div class="title">
                            <h3>Get a Free Quote</h3>
                            <p>For business inquiry fill below form or call toll free num - (+91) 00-700-6202.<br> Support team will contact you shortly.</p>
                        </div> 
                        <form class="quote-form">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <input type="text" name="form_name" value="" placeholder="Your Name" required="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <input type="text" name="form_phn" value="" placeholder="Phone Number" required="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <select class="selectmenu">
                                            <option selected="selected">Select Solutions</option>
                                            <option>Gas & Petroleum</option>
                                            <option>Standby Power</option>
                                            <option>Agriculture</option>
                                            <option>Military Contracts</option>
                                            <option>OE Manufactures</option>
                                            <option>Marine Generators</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-box">
                                        <button class="btn-one" type="submit">Get a Quote</button>
                                    </div>
                                </div>    
                            </div>
                        </form>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>
<!--End Map Quote area-->
<!--Start Brand area-->  
<section class="brand-area">
    <div class="container">
        <div class="sec-title text-center">
            <div class="title">Clients & Partners</div>
            <div class="inner">
                <div class="border1"></div>
                <span>Be Trusted</span>
                <div class="border2"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <ul class="brand">
                    <!--Start single item-->
                    <li class="single-item">
                        <a href="#"><img src="images/brand/1.png" alt="Awesome Brand Image"></a>
                        <div class="title"><h3>Tech Logo & Co</h3></div>
                    </li>
                    <!--End single item-->
                    <!--Start single item-->
                    <li class="single-item">
                        <a href="#"><img src="images/brand/2.png" alt="Awesome Brand Image"></a>
                        <div class="title"><h3>My Company Org</h3></div>
                    </li>
                    <!--End single item-->
                    <!--Start single item-->
                    <li class="single-item">
                        <a href="#"><img src="images/brand/3.png" alt="Awesome Brand Image"></a>
                        <div class="title"><h3>Tech Logo & Co</h3></div>
                    </li>
                    <!--End single item-->
                    <!--Start single item-->
                    <li class="single-item">
                        <a href="#"><img src="images/brand/4.png" alt="Awesome Brand Image"></a>
                        <div class="title"><h3>Tech Logo & Co</h3></div>
                    </li>
                    <!--End single item-->
                </ul>
            </div>
        </div>
    </div>
</section>
<!--End Brand area-->           
<!--Start footer area-->  
<footer class="footer-area">
    <div class="container">
        <div class="row">
            <!--Start single footer widget-->
            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                <div class="single-footer-widget marbtm50">
                    <div class="footer-contact-info">
                        <h3>Let’s work together,<br> Looking forward to speaking to you!. </h3> 
                        <ul class="contact-info">
                            <li class="single">
                                <span>Phone</span>
                                <p>+555 5678 12340</p>
                            </li>
                            <li class="single">
                                <span>Email</span>
                                <p>supportteam@example.com</p>
                            </li>
                            <li class="single">
                                <span>Follow us on:</span>
                                <div class="footer-social-links">
                                    <ul>
                                        <li><a href="#">Facebook</a></li>
                                        <li><a href="#">Twitter</a></li>
                                        <li><a href="#">Google</a></li>
                                        <li><a href="#">Youtube</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>    
                    </div>
                </div>
            </div>
            <!--End single footer widget-->
            <!--Start single footer widget-->
            <div class="col-xl-2 col-lg-2 col-md-6 col-sm-12">
                <div class="single-footer-widget marbtm50">
                    <div class="title">
                        <h3>About Us</h3>
                    </div>
                    <ul class="about-links">
                        <li><a href="#">Company</a></li>
                        <li><a href="#">Team</a></li>
                        <li><a href="#">Case Studies</a></li>
                        <li><a href="#">Get a Quote</a></li>
                        <li><a href="#">News</a></li>
                        <li><a href="#">Testimonials</a></li>
                    </ul>
                </div>
            </div>
            <!--End single footer widget-->
            <!--Start single footer widget-->
            <div class="col-xl-2 col-lg-3 col-md-6 col-sm-12">
                <div class="single-footer-widget">
                    <div class="title">
                        <h3>Industries</h3>
                    </div>
                    <ul class="solutions-links">
                        <li><a href="#">Oil & Petroleum</a></li>
                        <li><a href="#">Stand by Power</a></li>
                        <li><a href="#">Military Contracts</a></li>
                        <li><a href="#">Agriculture</a></li>
                        <li><a href="#">OE Manufacturers</a></li>
                        <li><a href="#">Marine Generators</a></li>
                    </ul>   
                </div>
            </div>
            <!--End single footer widget-->
            <!--Start single footer widget-->
            <div class="col-xl-4 col-lg-3 col-md-6 col-sm-12">
                <div class="single-footer-widget pdtop-50">
                    <div class="title">
                        <h3>Locations</h3>
                    </div>
                    <ul class="locations">
                        <li>
                            <h3>Chicago</h3>
                            <p>USA<br> 54 N. Lakewood Avenue, IL 60640</p>    
                        </li>
                        <li>
                            <h3>London</h3>
                            <p>UK<br> 27 Old Gloucester Street, London WC1N</p>    
                        </li>
                    </ul>   
                </div>
            </div>
            <!--End single footer widget-->
        </div>
    </div>
</footer>   
<!--End footer area-->
<!--Start footer bottom area-->
<section class="footer-bottom-area">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="inner clearfix">
                    <div class="copyright-text float-left">
                        <p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
                    </div>
                    <div class="footer-logo">
                        <a href="index.html">
                            <img src="images/footer/footer-logo.png" alt="Awesome Logo">
                        </a>    
                    </div>
                    <ul class="footer-menu float-right">
                        <li><a href="#">Site Map</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms & Condition</a></li>
                    </ul>
                </div>   
            </div>
        </div>
    </div>    
</section>
<!--End footer bottom area-->   
</div>  
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target thm-bg-clr" data-target="html"><span class="fa fa-angle-up"></span></div>
<!-- Color Palate / Color Switcher -->
<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-gear"></i>
    </div>
    <div class="color-palate-head">
        <h6>Choose Your Color</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="css/color-themes/default-theme.css"></span>
            <span class="palate teal-color" data-theme-file="css/color-themes/teal-theme.css"></span>
            <span class="palate navy-color" data-theme-file="css/color-themes/navy-theme.css"></span>
            <span class="palate yellow-color" data-theme-file="css/color-themes/yellow-theme.css"></span>
            <span class="palate blue-color" data-theme-file="css/color-themes/blue-theme.css"></span>
            <span class="palate purple-color" data-theme-file="css/color-themes/purple-theme.css"></span>
            <span class="palate olive-color" data-theme-file="css/color-themes/olive-theme.css"></span>
            <span class="palate red-color" data-theme-file="css/color-themes/red-theme.css"></span>
        </div>
    </div>
    <div class="palate-foo">
        <span>You can easily change and switch the colors.</span>
    </div>
</div>
<!-- /.End Of Color Palate -->
<!-- main jQuery -->
<!-- Wow Script -->
<!-- bootstrap -->
<!-- bx slider -->
<!-- count to -->
<!-- owl carousel -->
<!-- validate -->
<!-- mixit up -->
<!-- isotope script-->
<!-- Easing -->
<!-- Gmap helper -->
<!--Gmap script-->
<!-- jQuery ui js -->
<!-- Language Switche  -->
<!-- jQuery timepicker js -->
<!-- Bootstrap select picker js -->
<script src="assets/bootstrap-sl-1.12.1/bootstrap-select.js"></script> 
<!-- html5lightbox js -->                              
<!--<script src="assets/html5lightbox/html5lightbox.js"></script>-->
<!--Color Switcher-->
<!--Revolution Slider-->
<!-- thm custom script -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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