红色欧美风格的数字化信息技术企业网站源码下载



6 22 8



模板描述:红色欧美风格 数字化信息技术 企业网站,红色欧美风格的数字化信息技术企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css"/>
<link rel="stylesheet" type="text/css" href="css/owl.theme.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"/>
<link rel="stylesheet" type="text/css" href="css/settings.css"/>
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/icons.css"/>
<link rel="stylesheet" type="text/css" href="css/preset.css"/>
<link rel="stylesheet" type="text/css" href="css/theme.css"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/presets/color1.css" id="colorChange"/>

2. 引入JS

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/gmaps.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyDTPlX-43R1TpcQUyWjFgiSfL_BiGxslZU"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<script src="js/jquery.themepunch.tools.min.js"></script>
<script src="js/extensions/revolution.extension.actions.min.js"></script>
<script src="js/extensions/revolution.extension.carousel.min.js"></script>
<script src="js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="js/extensions/revolution.extension.migration.min.js"></script>
<script src="js/extensions/revolution.extension.parallax.min.js"></script>
<script src="js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="js/extensions/revolution.extension.navigation.min.js"></script>
<script src="js/extensions/revolution.extension.video.min.js"></script>
<script src="js/dlmenu.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/mixer.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/slick.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/theme.js"></script>

3. HTML代码

        <!-- Preloading -->
        <div class="preloader text-center">
            <div class="la-ball-circus la-2x">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <!-- Preloading -->
        <!-- Header 01 -->
        <header class="header_01" id="header">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-2 col-sm-3 col-md-3">
                        <div class="logo">
                            <a href="index.html"><img src="images/logo.png" alt=""/></a>
                        </div>
                    </div>
                    <div class="col-lg-8 col-sm-7 col-md-7">
                        <nav class="mainmenu text-center">
                            <ul>
                                <li class="menu-item-has-children">
                                    <a href="#">home</a>
                                    <ul class="sub-menu">
                                        <li><a href="index.html">Home 01</a></li>
                                        <li><a href="index2.html">Home 02</a></li>
                                        <li><a href="index3.html">Home 03</a></li>
                                    </ul>
                                </li>
                                <li><a href="about.html">About</a></li>
                                <li class="menu-item-has-children"><a href="#">Services</a>
                                    <ul class="sub-menu">
                                        <li><a href="services.html">Service</a></li>
                                        <li><a href="service_detail.html">Service Detail</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="#">Portfolio</a>
                                    <ul class="sub-menu">
                                        <li><a href="portfolio.html">Portfolio v1</a></li>
                                        <li><a href="portfolio2.html">Portfolio v2</a></li>
                                        <li><a href="portfolio_detail.html">Portfolio Detail</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item-has-children"><a href="#">Blog</a>
                                    <ul class="sub-menu">
                                        <li><a href="blog.html">Blog v1</a></li>
                                        <li><a href="blog2.html">Blog v2</a></li>
                                        <li><a href="blog3.html">Blog v3</a></li>
                                        <li><a href="blog_single.html">Blog Single</a></li>
                                    </ul>
                                </li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-lg-2 col-sm-2 col-md-2">
                        <div class="navigator text-right">
                            <a class="search searchToggler" href="javascript:void(0);"><i class="mei-magnifying-glass"></i></a>
                            <a href="javascript:void(0);" class="menu mobilemenu hidden-sm hidden-md hidden-lg hidden-xs"><i class="mei-menu"></i></a>
                            <a id="open-overlay-nav" class="menu hamburger" href="javascript:void(0);"><i class="mei-menu"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Header 01 -->
        <!-- Search From -->
        <div class="searchFixed popupBG">
            <div class="container-fluid">
                <a href="" id="sfCloser" class="sfCloser"></a>
                <div class="searchForms">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8 col-lg-offset-2">
                                <form method="post" action="#">
                                    <input type="text" name="s" class="searchField" placeholder="Search here..."/>
                                    <button type="submit"><i class="fa fa-search"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Search From -->
        <!-- PopUP Menu -->
        <div class="popup popup__menu">
            <a href="" id="close-popup" class="close-popup"></a>
            <div class="container mobileContainer">
                <div class="row">
                    <div class="col-lg-12 text-left">
                        <div class="logo2">
                            <a href="index.html"><img src="images/logo.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="popup-inner">
                            <div class="dl-menu__wrap dl-menuwrapper">
                                <ul class="dl-menu dl-menuopen">
                                    <li class="menu-item-has-children">
                                        <a href="javascript:void(0);">home</a>
                                        <ul class="dl-submenu">
                                            <li><a href="index.html">Home 01</a></li>
                                            <li><a href="index2.html">Home 02</a></li>
                                            <li><a href="index3.html">Home 03</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="about.html">About</a></li>
                                    <li class="menu-item-has-children"><a href="javascript:void(0);">services</a>
                                        <ul class="dl-submenu">
                                            <li><a href="services.html">Service</a></li>
                                            <li><a href="service_detail.html">Service Detail</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="javascript:void(0);">Portfolio</a>
                                        <ul class="dl-submenu">
                                            <li><a href="portfolio.html">Portfolio v1</a></li>
                                            <li><a href="portfolio2.html">Portfolio v2</a></li>
                                            <li><a href="portfolio_detail.html">Portfolio Detail</a></li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="javascript:void(0);">Blog</a>
                                        <ul class="dl-submenu">
                                            <li><a href="blog.html">Blog v1</a></li>
                                            <li><a href="blog2.html">Blog v2</a></li>
                                            <li><a href="blog3.html">Blog v3</a></li>
                                            <li><a href="blog_single.html">Blog Single</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="contact.html">Contact</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-xs-12 text-left">
                        <ul class="footer__contacts text-left">
                            <li>Phone: 666 888 000</li>
                            <li>Email: needhelp@meipaly.com</li>
                            <li>Address: 66 Broklyn Street, New York United States of America</li>
                        </ul>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-xs-12 col-xs-12">
                        <div class="popUp_social text-right">
                            <ul>
                                <li><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
                                <li><a href="#"><i class="fa fa-facebook-square"></i>Facebook</a></li>
                                <li><a href="#"><i class="fa fa-youtube-play"></i>Youtube</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- PopUP Menu -->
        <!-- Revolution Slider -->
        <section class="rev_slider">
            <div class="rev_slider_wrapper">
                <div id="rev_slider_1" class="rev_slider" data-version="5.4.5">
                    <ul>
                        <!-- MINIMUM SLIDE STRUCTURE -->
                        <li data-transition="random" data-masterspeed="1000">
                            <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                            <img src="images/slider/1_1.jpg" alt="Sky" class="rev-slidebg">
                            <div class="tp-caption tp-resizeme normalWraping layer_1" 
                                 data-frames='[{"delay":1300,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
                                 {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                 data-x="center" 
                                 data-y="center" 
                                 data-hoffset="0" 
                                 data-voffset="['-124', '-110', '-100', '-50']" 
                                 data-width="100%"
                                 data-height="['auto]"
                                 data-whitesapce="['normal']"
                                 data-fontsize="20"
                                 data-lineheight="36"
                                 data-fontweight="400"
                                 data-letterspacing="2"
                                 data-color="#FFF"
                                 data-textAlign="center"
                                 >WELCOME TO MEIPALY AGENCY</div>
                            <div class="tp-caption tp-resizeme normalWraping layer_2" 
                                 data-frames='[{"delay":1600,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
                                 {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]' 
                                 data-x="center" 
                                 data-y="center" 
                                 data-hoffset="0" 
                                 data-voffset="['12', '20', '10', '25']" 
                                 data-width="100%"
                                 data-height="['auto]"
                                 data-whitesapce="['normal']"
                                 data-word-wrap="['normal']"
                                 data-white-break="['break-all']"
                                 data-fontsize="['110', '70', '60', '40']"
                                 data-lineheight="['112', '80', '65', '50']"
                                 data-fontweight="700"
                                 data-letterspacing="['4.4', '4.4', '2', '1']"
                                 data-color="#FFF"
                                 data-textAlign="center"
                                 >SMART WEB<br> DESIGN AGENCY.</div>
                            <div class="tp-caption tp-resizeme normalWraping layer_3"
                                 data-frames='[{"delay":2000,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
                                 {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                 data-x="center"
                                 data-y="center" 
                                 data-hoffset="0" 
                                 data-voffset="['212', '200', '150', '140']" 
                                 data-width="100%"
                                 data-height="['auto]"
                                 data-whitesapce="['normal']"
                                 data-fontsize="16"
                                 data-lineheight=""
                                 data-fontweight="400"
                                 data-textAlign="center"
                                 ><a href="#" class="common_btn"><span>DISCOVER MORE</span></a></div>
                        </li>
                        <li data-transition="random" data-masterspeed="1000">
                            <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                            <img src="images/slider/1_2.jpg" alt="Sky" class="rev-slidebg">
                            <div class="tp-caption tp-resizeme normalWraping layer_1" 
                                 data-frames='[{"delay":1300,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
                                 {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                 data-x="center" 
                                 data-y="center" 
                                 data-hoffset="0" 
                                 data-voffset="['-124', '-110', '-100', '-50']" 
                                 data-width="100%"
                                 data-height="['auto]"
                                 data-whitesapce="['normal']"
                                 data-fontsize="20"
                                 data-lineheight="36"
                                 data-fontweight="400"
                                 data-letterspacing="2"
                                 data-color="#FFF"
                                 data-textAlign="center"
                                 >WELCOME TO MEIPALY AGENCY</div>
                            <div class="tp-caption tp-resizeme normalWraping layer_2" 
                                 data-frames='[{"delay":1600,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
                                 {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]' 
                                 data-x="center" 
                                 data-y="center" 
                                 data-hoffset="0" 
                                 data-voffset="['12', '20', '10', '25']" 
                                 data-width="100%"
                                 data-height="['auto]"
                                 data-whitesapce="['normal']"
                                 data-word-wrap="['normal']"
                                 data-white-break="['break-all']"
                                 data-fontsize="['110', '70', '60', '40']"
                                 data-lineheight="['112', '80', '65', '50']"
                                 data-fontweight="700"
                                 data-letterspacing="['4.4', '4.4', '2', '1']"
                                 data-color="#FFF"
                                 data-textAlign="center"
                                 >SMART WEB<br> DESIGN AGENCY.</div>
                            <div class="tp-caption tp-resizeme normalWraping layer_3"
                                 data-frames='[{"delay":2000,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeInOut"},
                                 {"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
                                 data-x="center"
                                 data-y="center" 
                                 data-hoffset="0" 
                                 data-voffset="['212', '200', '150', '140']" 
                                 data-width="100%"
                                 data-height="['auto]"
                                 data-whitesapce="['normal']"
                                 data-fontsize="16"
                                 data-lineheight=""
                                 data-fontweight="400"
                                 data-textAlign="center"
                                 ><a href="#" class="common_btn"><span>DISCOVER MORE</span></a></div>
                        </li>
                    </ul><!-- END SLIDES LIST -->
                </div>
            </div>
        </section>
        <!-- Revolution Slider -->
        <!-- Services Section -->
        <section class="service_section commonSection">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="sub_title red_color">Services we are offering</h4>
                        <h2 class="sec_title white">We design digital products that<br> help grow businesses.</h2>
                        <p class="sec_desc color_aaa">
                            We are committed to providing our customers with exceptional service<br> while offering our employees the best training.
                        </p>
                    </div>
                </div>
                <div class="row custom_column">
                    <div class="col-lg-3 col-sm-4 col-md-3">
                        <a href="service_detail.html" class="icon_box_1 text-center">
                            <div class="flipper">
                                <div class="front">
                                    <i class="mei-web-design"></i>
                                    <h3>Website Development</h3>
                                </div>
                                <div class="back">
                                    <i class="mei-web-design"></i>
                                    <h3>Website Development</h3>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-md-3">
                        <a href="service_detail.html" class="icon_box_1 text-center">
                            <div class="flipper">
                                <div class="front">
                                    <i class="mei-computer-graphic"></i>
                                    <h3>Graphic Designing</h3>
                                </div>
                                <div class="back">
                                    <i class="mei-computer-graphic"></i>
                                    <h3>Graphic Designing</h3>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-md-3">
                        <a href="service_detail.html" class="icon_box_1 text-center">
                            <div class="flipper">
                                <div class="front">
                                    <i class="mei-development-1"></i>
                                    <h3>Digital Marketing</h3>
                                </div>
                                <div class="back">
                                    <i class="mei-development-1"></i>
                                    <h3>Digital Marketing</h3>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-md-3">
                        <a href="service_detail.html" class="icon_box_1 text-center">
                            <div class="flipper">
                                <div class="front">
                                    <i class="mei-development"></i>
                                    <h3>SEo & Content Writing</h3>
                                </div>
                                <div class="back">
                                    <i class="mei-development"></i>
                                    <h3>SEo & Content Writing</h3>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-md-3">
                        <a href="service_detail.html" class="icon_box_1 text-center">
                            <div class="flipper">
                                <div class="front">
                                    <i class="mei-app-development"></i>
                                    <h3>App Development</h3>
                                </div>
                                <div class="back">
                                    <i class="mei-app-development"></i>
                                    <h3>App Development</h3>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- Services Section -->
        <!-- About Agency Section -->
        <section class="commonSection ab_agency">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-md-6 PR_79">
                        <h4 class="sub_title">welcom to smart meipaly web agency</h4>
                        <h2 class="sec_title MB_45">We are the Best Website agency in The World</h2>
                        <p class="sec_desc">
                            We are committed to providing our customers with exceptional service while offering our employees the best training. 
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry has been the
                            industry's standard dummy text ever since the 1500s.
                        </p>
                        <a class="common_btn red_bg" href="#"><span>Learn More</span></a>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-md-6">
                        <div class="ab_img1">
                            <img src="images/home_1/2.jpg" alt=""/>
                        </div>
                        <div class="ab_img2">
                            <img src="images/home_1/1.jpg" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- About Agency Section -->
        <!-- What We Do Section -->
        <section class="commonSection what_wedo">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="sub_title">how do we works</h4>
                        <h2 class="sec_title">Digital Experience</h2>
                        <p class="sec_desc">
                            We are committed to providing our customers with exceptional service while<br> offering our employees the best training.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <div class="videoWrap">
                            <img src="images/home_1/3.jpg" alt="">
                            <div class="play_video">
                                <a class="video_popup" href="http://www.51qianduan.com//watch?v=A7ZkZazfvao"><i class="fa fa-play"></i></a>
                                <h2>Watch Video</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-5 col-md-4">
                        <h4 class="sub_title">don’t miss out our latest updates</h4>
                        <h2 class="sec_title">Subscribe us</h2>
                    </div>
                    <div class="col-lg-8 col-sm-7 col-md-8">
                        <form action="" method="post" class="subscribefrom">
                            <input type="email" placeholder="Enter your email" name="email">
                            <button class="common_btn red_bg" type="submit" name="submit"><span>Subscribe now</span></button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- What We Do Section -->
        <!-- Portfolio Section -->
        <section class="commonSection porfolio">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="sub_title">our portfolio</h4>
                        <h2 class="sec_title">work showcase</h2>
                        <p class="sec_desc">
                            We are committed to providing our customers with exceptional service while<br> offering our employees the best training.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="singlefolio">
                            <img src="images/portfolio/1.jpg" alt=""/>
                            <div class="folioHover">
                                <a class="cate" href="#">Graphic</a>
                                <h4><a href="portfolio_detail.html">Design Styles</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="singlefolio">
                            <img src="images/portfolio/2.jpg" alt=""/>
                            <div class="folioHover">
                                <a class="cate" href="#">Graphic</a>
                                <h4><a href="portfolio_detail.html">Design Styles</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="singlefolio">
                            <img src="images/portfolio/3.jpg" alt=""/>
                            <div class="folioHover">
                                <a class="cate" href="#">Graphic</a>
                                <h4><a href="portfolio_detail.html">Design Styles</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="singlefolio">
                            <img src="images/portfolio/4.jpg" alt=""/>
                            <div class="folioHover">
                                <a class="cate" href="#">Graphic</a>
                                <h4><a href="portfolio_detail.html">Design Styles</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="singlefolio">
                            <img src="images/portfolio/5.jpg" alt=""/>
                            <div class="folioHover">
                                <a class="cate" href="#">Graphic</a>
                                <h4><a href="portfolio_detail.html">Design Styles</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="singlefolio">
                            <img src="images/portfolio/6.jpg" alt=""/>
                            <div class="folioHover">
                                <a class="cate" href="#">Graphic</a>
                                <h4><a href="portfolio_detail.html">Design Styles</a></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Portfolio Section -->
        <!-- FunFact Section -->
        <section class="commonSection funfact">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-sm-6 col-md-3 noPadding BR">
                        <div class="singlefunfact text-center">
                            <h1 data-counter="8705" class="timer"><span class="countSpan">8</span>705</h1>
                            <h3>Projects Completed</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-md-3 noPadding BR">
                        <div class="singlefunfact text-center">
                            <h1 data-counter="480" class="timer"><span class="countSpan"></span>480</h1>
                            <h3>Active Clients</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-md-3 noPadding BR">
                        <div class="singlefunfact text-center">
                            <h1 data-counter="626" class="timer"><span class="countSpan"></span>626</h1>
                            <h3>Cups of Coffee</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-md-3 noPadding">
                        <div class="singlefunfact text-center">
                            <h1 data-counter="9774" class="timer"><span class="countSpan">9</span>774</h1>
                            <h3>Happy Clients</h3>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- FunFact Section -->
        <!-- Trust Clients Section -->
        <section class="commonSection trustClient">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <div class="CL_content">
                            <img src="images/home_1/4.jpg" alt="">
                            <div class="abc_inner">
                                <div class="row">
                                    <div class="col-lg-5 col-sm-5 col-md-5">
                                    </div>
                                    <div class="col-lg-7 col-sm-7 col-md-7">
                                        <div class="abci_content">
                                            <h2>We are trusted by more than 8900 clients</h2>
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi-dunt ut labore et dolore magna aliqua.
                                                Ut enim ad minim veniam, quis nostrud exercita-tion ullamco laboris nisi ut aliquip ex ea commodo.
                                            </p>
                                            <a class="common_btn red_bg" href="#"><span>Learn More</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Trust Clients Section -->
        <!-- Team Section -->
        <section class="commonSection team">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="sub_title">meet the team</h4>
                        <h2 class="sec_title">expert people</h2>
                        <p class="sec_desc">
                            We are committed to providing our customers with exceptional service while<br> offering our employees the best training.
                        </p>
                    </div>
                </div>
            </div>
            <div class="team_slider">
                <div class="singleTM">
                    <div class="tm_img">
                        <img src="images/team/1.jpg" alt="">
                        <div class="tm_overlay">
                            <div class="team_social">
                                <a href="#"><span>Facebook</span></a>
                                <a href="#"><span>Twitter</span></a>
                                <a href="#"><span>Youtube</span></a>
                            </div>
                            <a href="#" class="common_btn"><span>learn more</span></a>
                        </div>
                    </div>
                    <div class="detail_TM">
                        <h5>kevin smith</h5>
                        <h6>co founder</h6>
                    </div>
                </div>
                <div class="singleTM">
                    <div class="tm_img">
                        <img src="images/team/2.jpg" alt="">
                        <div class="tm_overlay">
                            <div class="team_social">
                                <a href="#"><span>Facebook</span></a>
                                <a href="#"><span>Twitter</span></a>
                                <a href="#"><span>Youtube</span></a>
                            </div>
                            <a href="#" class="common_btn"><span>learn more</span></a>
                        </div>
                    </div>
                    <div class="detail_TM">
                        <h5>Jessica Brown</h5>
                        <h6>General Manager</h6>
                    </div>
                </div>
                <div class="singleTM">
                    <div class="tm_img">
                        <img src="images/team/3.jpg" alt="">
                        <div class="tm_overlay">
                            <div class="team_social">
                                <a href="#"><span>Facebook</span></a>
                                <a href="#"><span>Twitter</span></a>
                                <a href="#"><span>Youtube</span></a>
                            </div>
                            <a href="#" class="common_btn"><span>learn more</span></a>
                        </div>
                    </div>
                    <div class="detail_TM">
                        <h5>Mike Hardson</h5>
                        <h6>Senior Designer</h6>
                    </div>
                </div>
                <div class="singleTM">
                    <div class="tm_img">
                        <img src="images/team/4.jpg" alt="">
                        <div class="tm_overlay">
                            <div class="team_social">
                                <a href="#"><span>Facebook</span></a>
                                <a href="#"><span>Twitter</span></a>
                                <a href="#"><span>Youtube</span></a>
                            </div>
                            <a href="#" class="common_btn"><span>learn more</span></a>
                        </div>
                    </div>
                    <div class="detail_TM">
                        <h5>Rose Ford</h5>
                        <h6>Marketing manager</h6>
                    </div>
                </div>
                <div class="singleTM">
                    <div class="tm_img">
                        <img src="images/team/5.jpg" alt="">
                        <div class="tm_overlay">
                            <div class="team_social">
                                <a href="#"><span>Facebook</span></a>
                                <a href="#"><span>Twitter</span></a>
                                <a href="#"><span>Youtube</span></a>
                            </div>
                            <a href="#" class="common_btn"><span>learn more</span></a>
                        </div>
                    </div>
                    <div class="detail_TM">
                        <h5>John Albert</h5>
                        <h6>Brand Officer</h6>
                    </div>
                </div>
            </div>
        </section>
        <!-- Team Section -->
        <!-- Client Section -->
        <section class="commonSection client">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="sub_title">our clients</h4>
                        <h2 class="sec_title">they trust us</h2>
                        <p class="sec_desc">
                            We are committed to providing our customers with exceptional service while<br> offering our employees the best training.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="client_slider">
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/1.png" alt=""/>
                                </a>
                            </div>
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/2.png" alt=""/>
                                </a>
                            </div>
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/3.png" alt=""/>
                                </a>
                            </div>
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/4.png" alt=""/>
                                </a>
                            </div>
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/5.png" alt=""/>
                                </a>
                            </div>
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/1.png" alt=""/>
                                </a>
                            </div>
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/2.png" alt=""/>
                                </a>
                            </div>
                            <div class="singleClient">
                                <a href="#">
                                    <img src="images/client/3.png" alt=""/>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Client Section -->
        <!-- Testimonial Section -->
        <section class="commonSection testimonial">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 col-lg-offset-1 col-sm-12 text-center">
                        <div class="testimonial_content">
                            <div class="testi_icon"><i class="mei-team"></i></div>
                            <h2>Great things in business are never done by one person. <span>They’re done by a team of people.</span></h2>
                            <p>
                                We are committed to providing our customers with exceptional service while<br> offering our employees the best training.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Testimonial Section -->
        <!-- Blog Section -->
        <section class="commonSection blog">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="sub_title">our news & articles</h4>
                        <h2 class="sec_title">latest blog posts</h2>
                        <p class="sec_desc">
                            We are committed to providing our customers with exceptional service while<br> offering our employees the best training.
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="latestBlogItem">
                            <div class="lbi_thumb">
                                <img src="images/blog/1.jpg" alt="">
                            </div>
                            <div class="lbi_details">
                                <a href="#" class="lbid_date">26 NOV</a>
                                <h2><a href="blog_single.html">basic rules of running web  agency business</a></h2>
                                <a class="learnM" href="blog_single.html">Learn More</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="latestBlogItem">
                            <div class="lbi_thumb">
                                <img src="images/blog/2.jpg" alt="">
                            </div>
                            <div class="lbi_details">
                                <a href="#" class="lbid_date">20 NOV</a>
                                <h2><a href="blog_single.html">Become the best sale marketer</a></h2>
                                <a class="learnM" href="blog_single.html">Learn More</a>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix hidden-lg hidden-md hidden-xs"></div>
                    <div class="col-lg-4 col-sm-6 col-md-4">
                        <div class="latestBlogItem">
                            <div class="lbi_thumb">
                                <img src="images/blog/3.jpg" alt="">
                            </div>
                            <div class="lbi_details">
                                <a href="#" class="lbid_date">16 NOV</a>
                                <h2><a href="blog_single.html">Introducing latest mopaly features</a></h2>
                                <a class="learnM" href="blog_single.html">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Blog Section -->
        <!-- Ready Section -->
        <section class="commonSection ready">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 col-sm-8 col-md-9">
                        <h2 class="sec_title white">Let's Get Your Project Started!</h2>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-md-3 text-right">
                        <a class="common_btn" href="contact.html"><span>Contact with us</span></a>
                    </div>
                </div>
            </div>
        </section>
        <!-- Ready Section -->
        <!-- Footer Section -->
        <footer class="footer_1">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 col-sm-6 col-md-5">
                        <aside class="widget aboutwidget">
                            <a href="#"><img src="images/foo_logo.png" alt=""></a>
                            <p>
                                Welcome to our web design agency. Lorem ipsum is simply free text dolor sit amet consectetur adipisicing elit. 
                                Tempore corrupti temporibus fuga earum asperiores, alias excepturi sit mpedit fugit laudantium.
                            </p>
                        </aside>
                    </div>
                    <div class="col-lg-4 col-sm-4 col-md-4">
                        <aside class="widget contact_widgets">
                            <h3 class="widget_title">contact</h3>
                            <p>
                                66 Broklyn Street, New York<br>
                                United States of America
                            </p>
                            <p>P: 666 888 000</p>
                            <p>E: <a href="#">needhelp@meipaly.com</a></p>
                        </aside>
                    </div>
                    <div class="col-lg-3 col-sm-2 col-md-3">
                        <aside class="widget social_widget">
                            <h3 class="widget_title">social</h3>
                            <ul>
                                <li><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
                                <li><a href="#"><i class="fa fa-facebook-square"></i>Facebook</a></li>
                                <li><a href="#"><i class="fa fa-youtube-play"></i>Youtube</a></li>
                            </ul>
                        </aside>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-sm-12 text-center">
                        <div class="copyright">
                            © copyright 2019 by <a href="http://www.51qianduan.com/">Layerdrops.com</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer Section -->
        <!-- Bact To To -->
        <a id="backToTop" href="#" class=""><i class="fa fa-angle-double-up"></i></a>
        <!-- Bact To To -->
        <!-- Include All JS -->
        <!-- Rev slider Add on Start -->
        <!-- Rev slider Add on End -->
        <!-- Include All JS -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 红色 宽屏 全屏 满屏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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