绿色欧美风格的智能家居公司企业网站源码下载



13 48 17



模板描述:绿色欧美风格 智能家居公司 企业网站,绿色欧美风格的智能家居公司企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/fontello.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" media="screen" href="assets/css/lightbox.css" />
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/style.css">

2. 引入JS

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/lightbox.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/waypoint.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/custom.js"></script>

3. HTML代码

    <!-- ***************************
        PreLoader Area Start
     *************************** -->
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div><!--end .spinner-->
    <!-- ***************************
        PreLoader Area Start
     *************************** -->
    <!-- ***************************
        Header Area Start
     *************************** -->
     <header class="header_area">
         <div class="header_top">
             <div class="container">
                 <div class="row">
                     <div class="col-md-6 col-sm-6">
                         <div class="header_left">
                             <p>See What Safe Should Feel Like. <a href="">Click Here</a></p>
                         </div><!--end .header_left-->
                     </div><!--end .col-md-6-->
                     <div class="col-md-6 col-sm-6">
                         <div class="header_left header_right text-right">
                             <p><i class="icon-phone-call"></i> Need Help? Talk to an Expert <span>2222 888 9999</span></p>
                         </div><!--end .header_left.header_right-->
                     </div><!--end .col-md-6-->
                 </div><!--end .row-->
             </div><!--end .container-->
         </div><!--end .header_top-->
         <div class="main_menu_area scroll_fixed">
             <div class="container">
                 <div class="row">
                     <div class="col-md-3 col-sm-12 col-xs-12 responsive_button">
                         <button type="button" class="navbar-toggles">
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                         </button>
                         <a href="index.html" class="logo">
                             <img src="assets/images/logo.png" alt="Logo">
                         </a>
                     </div><!--end .col-md-2-->
                     <div class="col-md-9 collapse_responsive text-right">
                         <span class="close_menu_area_btn">x</span>
                         <div class="collapse navbar-collapse remove_padding" id="myNavbar">
                             <ul class="nav navbar-nav text-center">
                                 <li class="drop_list">
                                     <a href="index.html">Home </a> <span class="menu_icon fa fa-angle-down"></span>
                                     <ul class="highlight_dropdown">
                                         <li><a href="index.html">Home V1</a></li>
                                         <li><a href="home-2.html">Home v2</a></li>
                                         <li><a href="home-3.html">Home v3</a></li>
                                         <li><a href="home-4.html">Home v4</a></li>
                                     </ul>
                                 </li>
                                 <li><a href="about.html">About</a></li>
                                 <li><a href="service.html">Our Services</a></li>
                                 <li class="drop_list">
                                     <a href="">Pages</a> <span class="menu_icon fa fa-angle-down"></span>
                                     <ul class="highlight_dropdown">
                                        <li><a href="pricing.html">Plans & Pricing</a></li>
                                        <li><a href="pro-installation.html">Pro Installation</a></li>
                                        <li><a href="blog.html">Blog</a></li>
                                        <li><a href="blog-details.html">Single Blog</a></li>
                                        <li><a href="404.html">404</a></li>
                                     </ul>
                                 </li>
                                 <li><a href="contact.html">Contact</a></li>
                             </ul>
                         </div><!--end .collapse-->
                     </div><!--end .col-md-10-->
                 </div><!--end .row-->
             </div><!--end .container-->
         </div><!--end .main_menu_area-->
     </header><!--end .header_area-->
    <!-- ***************************
        Header Area End
     *************************** -->
    <!-- ***************************
        Header Slider Area Start
     *************************** -->
     <section class="header_slider_area header_slider owl-carousel">
         <div class="header_slider_bg">
             <div class="container">
                 <div class="row">
                     <div class="col-md-4">
                        <div class="header_slide_box">
                            <h4>Security & peace of mind</h4>
                            <h1>Get a free quote today.</h1>
                            <h3>What are you protection?</h3>
                            <div class="btn_box">
                                <a href="#" class="btn btn-default default_btn">Home Owner <i class="fa fa-angle-right"></i></a>
                                <a href="#" class="btn btn-default default_btn">Rental <i class="fa fa-angle-right"></i></a>
                                <a href="#" class="btn btn-default default_btn">Business <i class="fa fa-angle-right"></i></a>
                            </div><!--end .btn_box-->
                            <p>STEP 1 OF 4</p>
                        </div><!--end .header_slide_box-->
                     </div><!--end .col-md-4-->
                 </div><!--end .row-->
             </div><!--end .container-->
         </div><!--end .header_slider_bg-->
         <div class="header_slider_bg bg_2">
             <div class="container">
                 <div class="row">
                     <div class="col-md-4">
                         <div class="header_slide_box">
                             <h4>Security & peace of mind</h4>
                             <h1>Get a free quote today.</h1>
                             <h3>What is your property size?</h3>
                             <div class="btn_box">
                                 <a href="#" class="btn btn-default default_btn">Under 1,000 SQ. FT <i class="fa fa-angle-right"></i></a>
                                 <a href="#" class="btn btn-default default_btn">1,000 to 2,000 SQ. FT <i class="fa fa-angle-right"></i></a>
                                 <a href="#" class="btn btn-default default_btn">Over 2,000 SQ. FT <i class="fa fa-angle-right"></i></a>
                             </div><!--end .btn_box-->
                             <p>STEP 2 OF 4</p>
                         </div><!--end .header_slide_box-->
                     </div><!--end .col-md-4-->
                 </div><!--end .row-->
             </div><!--end .container-->
         </div><!--end .header_slider_bg-->
         <div class="header_slider_bg bg_3">
             <div class="container">
                 <div class="row">
                     <div class="col-md-4">
                         <div class="header_slide_box">
                             <h4>Security & peace of mind</h4>
                             <h1>Get a free quote today.</h1>
                             <h3>How many doors and windows do you want to protect?</h3>
                             <div class="btn_box">
                                 <a href="#" class="btn btn-default default_btn">1 to 5 Doors  /  Windows <i class="fa fa-angle-right"></i></a>
                                 <a href="#" class="btn btn-default default_btn">5 to 10 Doors  /  Windows <i class="fa fa-angle-right"></i></a>
                                 <a href="#" class="btn btn-default default_btn">10 to 15 Doors  /  Windows <i class="fa fa-angle-right"></i></a>
                             </div><!--end .btn_box-->
                             <p>STEP 3 OF 4</p>
                         </div><!--end .header_slide_box-->
                     </div><!--end .col-md-4-->
                 </div><!--end .row-->
             </div><!--end .container-->
         </div><!--end .header_slider_bg-->
         <div class="header_slider_bg bg_4">
             <div class="container">
                 <div class="row">
                     <div class="col-md-4">
                         <div class="header_slide_box">
                             <h4>Security & peace of mind</h4>
                             <h1>Get a free quote today.</h1>
                             <h3>Add your informations</h3>
                             <div class="register_info_box">
                                 <form action="#" method="post">
                                     <div class="input-group">
                                         <input type="text" name="name" placeholder="Your Name">
                                     </div><!--end .input-group-->
                                     <div class="input-group">
                                         <input type="tel" name="tel" placeholder="Phone Number">
                                     </div><!--end .input-group-->
                                     <div class="input-group">
                                         <input type="EMAIL" name="EMAIL" placeholder="Email Address">
                                     </div><!--end .input-group-->
                                     <div class="input-group">
                                         <button class="btn btn-default default_btn" type="submit">Get a Free Quote</button>
                                     </div><!--end .input-group-->
                                 </form>
                             </div><!--end .register_info_box-->
                         </div><!--end .header_slide_box-->
                     </div><!--end .col-md-4-->
                 </div><!--end .row-->
             </div><!--end .container-->
         </div><!--end .header_slider_bg-->
     </section><!--end .header_slider_area-->
    <!-- ***************************
        Header Slider Area End
     *************************** -->
    <!-- ***************************
        Welcome Area Start
     *************************** -->
     <section class="welcome_area section_padding text-center section_bb">
         <img src="assets/images/wlc-shape-1.png" alt="Shape" class="map_shape wlc_shape_1">
         <img src="assets/images/wlc-shape-2.png" alt="Shape" class="map_shape_2 wlc_shape_2">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="hero_section_title mb_50">
                         <h4>Alarm & Security Company</h4>
                         <h1>Welcome To HoomPotact</h1>
                     </div><!--end .hero_section_title-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
             <div class="welcome_items_flex flex_welcome">
                 <div class="welcome_item_box">
                     <i class="icon-doorbell"></i>
                     <h3>Doorbell
                         <br>Camera</h3>
                 </div><!--end .welcome_item_box-->
                 <div class="welcome_item_box">
                     <i class="icon-smart-lock"></i>
                     <h3>Smart
                         <br>Locks</h3>
                 </div><!--end .welcome_item_box-->
                 <div class="welcome_item_box">
                     <i class="icon-cctv"></i>
                     <h3>Outdoor
                         <br>Camera</h3>
                 </div><!--end .welcome_item_box-->
                 <div class="welcome_item_box">
                     <i class="icon-remote-control"></i>
                     <h3>Garage Door
                         <br>Control</h3>
                 </div><!--end .welcome_item_box-->
                 <div class="welcome_item_box">
                     <i class="icon-thermostat"></i>
                     <h3>Element
                         <br>Thermostat</h3>
                 </div><!--end .welcome_item_box-->
                 <div class="welcome_item_box">
                     <i class="icon-video-camera"></i>
                     <h3>Live
                         <br>Video</h3>
                 </div><!--end .welcome_item_box-->
                 <div class="welcome_item_box">
                     <i class="icon-monitor"></i>
                     <h3>24x7
                         <br>Monitoring</h3>
                 </div><!--end .welcome_item_box-->
             </div><!--end .welcome_items_flex-->
         </div><!--end .container-->
     </section><!--end .welcome_area-->
    <!-- ***************************
        Welcome Area End
     *************************** -->
    <!-- ***************************
        Video Promotion Area Start
     *************************** -->
     <section class="video_promotion_area section_padding">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="hero_section_title mb_50 text-center">
                         <h4>Watch Video</h4>
                         <h1>Watch Installation Video</h1>
                     </div><!--end .hero_section_title-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
             <div class="row">
                 <div class="col-md-12">
                     <div class="video_promotion_box">
                        <div class="line_shape"></div>
                         <div class="play_btn_box">
                             <svg xmlns="http://www.w3.org/2000/svg" height="121.844" preserveAspectRatio="xMidYMid" viewBox="0 0 126.938 121.844" width="126.938">
                                 <path d="m63.466 9.901c18.908 0 24.18-10.257 25.458-9.673 22.223 10.152 38.007 32.156 38.007 58.153 0 35.05-28.414 63.465-63.465 63.465s-63.465-28.415-63.465-63.465c0-26.194 15.574-49.403 38.518-58.374 1.426-.558 6.354 9.894 24.947 9.894z" fill="#ffffff" fill-rule="evenodd"></path>
                             </svg>
                             <a href="http://www.51qianduan.com//html/mov_bbb.mp4" class="lightbox" title="Watch Video">
                                 <i class="icon-play-button"></i>
                             </a>
                         </div><!--end .play_btn-box-->
                         <div class="experience_date">
                             We are trusted by more than <span>99,800 </span>clients
                         </div><!--end .experience_date-->
                     </div><!--end .video_promotion_box-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .video_promotion_area-->
    <!-- ***************************
        Video Promotion Area End
     *************************** -->
    <!-- ***************************
        Award Area Start
     *************************** -->
     <section class="award_area section_padding section_bg">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
                     <div class="award_left">
                         <div class="hero_section_title mb_50">
                             <h4>Award-winning</h4>
                             <h1>Home Security Systems</h1>
                         </div><!--end .hero_section_title-->
                         <p>Winner of the Consumers Digest Best Buy for 8 years, our home security packages are the industry standard for affordable, professionally monitored home security.</p>
                         <div class="award_number_flex">
                             <div class="award_box">
                                 <h1 class="counterup">850</h1>
                                 <span>Satisfied Customers</span>
                             </div><!--end .award_box-->
                             <div class="award_box">
                                 <h1 class="counterup">900</h1>
                                 <span>Systems Installed</span>
                             </div><!--end .award_box-->
                         </div><!--end .award_number_flex-->
                     </div><!--end .award_left-->
                 </div><!--end .col-md-6-->
                 <div class="col-md-6">
                     <div class="award_right">
                         <img src="assets/images/award_img.png" alt="Award">
                     </div><!--end .award_right-->
                 </div><!--end .col-md-6-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .award_area-->
    <!-- ***************************
        Award Area End
     *************************** -->
    <!-- ***************************
        Benefits Area Start
     *************************** -->
     <section class="benefits_area section_padding">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="hero_section_title mb_50 text-center">
                         <h4>Our Benefits</h4>
                         <h1>Why Choose HomeSecure?</h1>
                     </div><!--end .hero_section_title-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
             <div class="benefits_boxes_flex mb_60">
                 <div class="benefits_box">
                     <i class="icon-tick"></i>
                     <h3>Save your money and stay comfortable.</h3>
                 </div><!--end .benefits_box-->
                 <div class="benefits_box">
                     <i class="icon-tick"></i>
                     <h3>Manage smart home from anywhere.</h3>
                 </div><!--end .benefits_box-->
                 <div class="benefits_box">
                     <i class="icon-tick"></i>
                     <h3>Chat with contacts during alarms.</h3>
                 </div><!--end .benefits_box-->
             </div><!--end .benefits_boxes_flex-->
             <div class="row">
                 <div class="col-md-6">
                     <div class="benefits_left">
                         <img src="assets/images/benefit.jpg" alt="Benefits Image">
                     </div><!--end .benefits_left-->
                 </div><!--end .col-md-5-->
                 <div class="col-md-6 pl_0">
                     <div class="benefits_right">
                         <h2>HoomPotact is committed to providing every home and family with innovative, dependable, and affordable home security solutions.</h2>
                         <p>
                             We began as a small Austin, Texas security provider in 1992. Our self-installed home security business model quickly grew from local to national with hundreds of thousands of homes secured across all 50 states and Canada. Since then, HoomPotact has continued to protect homes and families in neighborhoods across North America and even expanded to offer cutting-edge home automation and life safety products. Despite dramatic growth and success.
                         </p>
                         <a href="#" class="btn btn-default default_btn">Get In Touch With Us</a>
                     </div><!--end .benefits_right-->
                 </div><!--end .col-md-7-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .benefits_area-->
    <!-- ***************************
        Benefits Area End
     *************************** -->
    <!-- ***************************
        Team Member Area Start
     *************************** -->
     <section class="team_member_area section_padding">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="hero_section_title mb_50 text-center">
                         <h4>Team Members</h4>
                         <h1>Security Professionals</h1>
                     </div><!--end .hero_section_title-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
             <div class="row">
                 <div class="col-md-3 col-sm-6">
                     <div class="team_member_box">
                         <img src="assets/images/teams/team-1.jpg" alt="Team Member">
                         <div class="team_details">
                             <h3>Lauren Smith</h3>
                             <span>Operating Officer</span>
                             <ul class="social_link">
                                 <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                 <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                             </ul>
                         </div><!--end .team_details-->
                     </div><!--end .team_member_box-->
                 </div><!--end .col-md-3-->
                 <div class="col-md-3 col-sm-6">
                     <div class="team_member_box">
                         <img src="assets/images/teams/team-2.jpg" alt="Team Member">
                         <div class="team_details">
                             <h3>Jackie Kevin</h3>
                             <span>Marketing Officer</span>
                             <ul class="social_link">
                                 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                 <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                 <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                             </ul>
                         </div><!--end .team_details-->
                     </div><!--end .team_member_box-->
                 </div><!--end .col-md-3-->
                 <div class="col-md-3 col-sm-6">
                     <div class="team_member_box">
                         <img src="assets/images/teams/team-3.jpg" alt="Team Member">
                         <div class="team_details">
                             <h3>Shela Arvik</h3>
                             <span>Technology Officer</span>
                             <ul class="social_link">
                                 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                 <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                 <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                             </ul>
                         </div><!--end .team_details-->
                     </div><!--end .team_member_box-->
                 </div><!--end .col-md-3-->
                 <div class="col-md-3 col-sm-6">
                     <div class="team_member_box">
                         <img src="assets/images/teams/team-4.jpg" alt="Team Member">
                         <div class="team_details">
                             <h3>Matt Eyring</h3>
                             <span>Engineering Officer</span>
                             <ul class="social_link">
                                 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                 <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                 <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                             </ul>
                         </div><!--end .team_details-->
                     </div><!--end .team_member_box-->
                 </div><!--end .col-md-3-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .team_member_area-->
    <!-- ***************************
        Team Member Area End
     *************************** -->
    <!-- ***************************
        Testimonial Area Start
     *************************** -->
     <section class="testimonial_area section_padding text-center section_bg">
         <img src="assets/images/testimonial-shape.png" class="triangle_shape testimonial_shape_1" alt="Shape">
         <img src="assets/images/testimonial-shape.png" class="triangle_shape_2 testimonial_shape_2" alt="Shape">
         <div class="container">
             <h4 class="title_shape">Testimonials</h4>
             <div class="row">
                <div class="col-md-12">
                    <div class="testimonial_slider_section owl-carousel testimonial_sliders">
                        <div class="testimonial_slider_box">
                            <p>This is due to their excellent service, competitive pricing and customer support. It’s throughly refresing to get such a personal touch.</p>
                            <h3>Matt Eyring</h3>
                            <span class="skills">HoomPotact Customer</span>
                            <span class="slide_number">01 / 03</span>
                        </div><!--end .testimonial_slider_box-->
                        <div class="testimonial_slider_box">
                            <p>This is due to their excellent service, competitive pricing and customer support. It’s throughly refresing to get such a personal touch.</p>
                            <h3>Jackie Kevin</h3>
                            <span class="skills">HoomPotact Customer</span>
                            <span class="slide_number">02 / 03</span>
                        </div><!--end .testimonial_slider_box-->
                        <div class="testimonial_slider_box">
                            <p>This is due to their excellent service, competitive pricing and customer support. It’s throughly refresing to get such a personal touch.</p>
                            <h3>Shirley Smith</h3>
                            <span class="skills">Marketing Customer</span>
                            <span class="slide_number">03 / 03</span>
                        </div><!--end .testimonial_slider_box-->
                    </div><!--end .testimonial_slider_section-->
                </div><!--end .col-md-12-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .testimonial_area-->
    <!-- ***************************
        Testimonial Area End
     *************************** -->
    <!-- ***************************
        Client Area Start
     *************************** -->
     <div class="client_logo_area section_padding section_bb text-center">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="client_slider_section client_slider owl-carousel">
                         <div class="client_img_box">
                             <img src="assets/images/client-logo.png" alt="Client Image">
                         </div><!--end .client_img_box-->
                         <div class="client_img_box">
                             <img src="assets/images/client-logo.png" alt="Client Image">
                         </div><!--end .client_img_box-->
                         <div class="client_img_box">
                             <img src="assets/images/client-logo.png" alt="Client Image">
                         </div><!--end .client_img_box-->
                         <div class="client_img_box">
                             <img src="assets/images/client-logo.png" alt="Client Image">
                         </div><!--end .client_img_box-->
                         <div class="client_img_box">
                             <img src="assets/images/client-logo.png" alt="Client Image">
                         </div><!--end .client_img_box-->
                         <div class="client_img_box">
                             <img src="assets/images/client-logo.png" alt="Client Image">
                         </div><!--end .client_img_box-->
                     </div><!--end .client_slider_section-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
         </div><!--end .container-->
     </div><!--end .client_logo_area-->
    <!-- ***************************
        Client Area End
     *************************** -->
    <!-- ***************************
        Feature Area Start
     *************************** -->
     <section class="feature_area section_padding">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="hero_section_title mb_50 text-center">
                         <h4>Other Features</h4>
                         <h1>Our Systems Features</h1>
                     </div><!--end .hero_section_title-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
             <div class="row">
                 <div class="col-md-4 col-sm-6">
                     <div class="feature_box">
                         <div class="feature_box_details">
                             <h3>Access Control</h3>
                             <p>Stop leaving key under the mat or worrying that you have left the garage door open.</p>
                         </div><!--end .feature_box_details-->
                         <div class="feature_img"></div><!--end .feature_img-->
                         <a href="#" class="btn btn-default default_btn">Learn More <i class="fa fa-angle-right"></i></a>
                     </div><!--end .feature_box-->
                 </div><!--end .col-md-4-->
                 <div class="col-md-4 col-sm-6">
                     <div class="feature_box">
                         <div class="feature_box_details">
                             <h3>Video Monitoring</h3>
                             <p>Don't miss a moment of activity at home. Get video alerts when activity
                                 is detected.</p>
                         </div><!--end .feature_box_details-->
                         <div class="feature_img bg_2"></div><!--end .feature_img-->
                         <a href="#" class="btn btn-default default_btn">Learn More <i class="fa fa-angle-right"></i></a>
                     </div><!--end .feature_box-->
                 </div><!--end .col-md-4-->
                 <div class="col-md-4 col-sm-6">
                     <div class="feature_box">
                         <div class="feature_box_details">
                             <h3>Energy Management</h3>
                             <p>Save money and stay comfortable with responsive energy savings, location based automation.</p>
                         </div><!--end .feature_box_details-->
                         <div class="feature_img bg_3"></div><!--end .feature_img-->
                         <a href="#" class="btn btn-default default_btn">Learn More <i class="fa fa-angle-right"></i></a>
                     </div><!--end .feature_box-->
                 </div><!--end .col-md-4-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .feature_area-->
     <!-- ***************************
        Feature Area End
     *************************** -->
     <!-- ***************************
        Network Area Start
     *************************** -->
     <section class="network_area section_black">
         <img src="assets/images/testimonial-shape.png" alt="Shape" class="triangle_shape ntw_shape">
         <div class="container">
             <div class="row">
                 <div class="col-md-7">
                    <div class="network_left">
                        <ul class="icon_box mb_55">
                            <li>
                                <i class="icon-shield"></i>
                                <span>Encrypted Network</span>
                            </li>
                            <li>
                                <i class="icon-battery"></i>
                                <span>Backup Battery</span>
                            </li>
                            <li>
                                <i class="icon-wifi"></i>
                                <span>Wireless Signal</span>
                            </li>
                        </ul>
                        <div class="hero_section_title mb_50">
                            <h4>Encrypted network</h4>
                            <h1>Secure Signal. Secure Home.</h1>
                        </div><!--end .hero_section_title-->
                        <p>It takes a secure wireless network to create complete home security. Our SkyControl encrypts smart home signals to secure both video and smart home devices. And the bright, HD display shows you a glowing signal of your home’s status from across the room.</p>
                    </div><!--end .network_left-->
                 </div><!--end .col-md-7-->
                 <div class="col-md-5 pl_0">
                     <div class="network_right">
                         <h2>Automation and control powering the smart home</h2>
                         <a href="#">Learn More</a>
                     </div><!--end .network_right-->
                 </div><!--end .col-md-5-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .network_area-->
     <!-- ***************************
        Network Area End
     *************************** -->
     <!-- ***************************
        Easy Step By Step Area Start
     *************************** -->
     <section class="step_by_step_area section_padding text-center">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="hero_section_title mb_50">
                         <h4>3 simple & easy steps</h4>
                         <h1>Smart Home is Just One Call Away</h1>
                     </div><!--end .hero_section_title-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
             <div class="row">
                 <div class="col-md-4 col-sm-6">
                     <div class="step_by_step_box">
                         <i class="icon-conversation"></i>
                         <h3>Talk to an Expert</h3>
                         <ul>
                             <li>Call 2222 888 9999 to discuss</li>
                             <li>your home security and get a </li>
                             <li>free quote now</li>
                         </ul>
                         <a href="#" class="btn_tx">Get Started</a>
                         <a href="#" class="btn_icon"><i class="fa fa-angle-right"></i></a>
                     </div><!--end .step_by_step_box-->
                 </div><!--end .col-md-4-->
                 <div class="col-md-4 col-sm-6">
                     <div class="step_by_step_box">
                         <i class="icon-smart-home"></i>
                         <h3>Build your System</h3>
                         <ul>
                             <li>A Smart Home Pro will help</li>
                             <li>you customize a system </li>
                             <li>specifically to your home</li>
                         </ul>
                         <a href="#" class="btn_tx">Get Started</a>
                         <a href="#" class="btn_icon"><i class="fa fa-angle-right"></i></a>
                     </div><!--end .step_by_step_box-->
                 </div><!--end .col-md-4-->
                 <div class="col-md-4 col-sm-6">
                     <div class="step_by_step_box">
                         <i class="icon-customer-support"></i>
                         <h3>Get Installed</h3>
                         <ul>
                             <li>Schedule your professional</li>
                             <li>installation at your</li>
                             <li>convenience</li>
                         </ul>
                         <a href="#" class="btn_tx">Get Started</a>
                         <a href="#" class="btn_icon"><i class="fa fa-angle-right"></i></a>
                     </div><!--end .step_by_step_box-->
                 </div><!--end .col-md-4-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .step_by_step_area-->
     <!-- ***************************
        Easy Step By Step Area End
     *************************** -->
     <!-- ***************************
        Call To Action Area Start
     *************************** -->
     <section class="cta_area section_padding light_bg">
         <img src="assets/images/wlc-shape-1.png" alt="Shape" class="map_shape cta_shape_1">
         <img src="assets/images/wlc-shape-2.png" alt="Shape" class="map_shape_2 cta_shape_2">
         <div class="container">
             <div class="row">
                 <div class="col-md-12">
                     <div class="cta_box">
                         <h1>Keep the smart home experience effortless</h1>
                         <p>Professional installation and $0 activation</p>
                         <a href="#" class="btn btn-default default_btn">Request a Free Quote</a>
                         <img class="house_shape" src="assets/images/house-shape.png" alt="House Image">
                     </div><!--end .cta_box-->
                 </div><!--end .col-md-12-->
             </div><!--end .row-->
         </div><!--end .container-->
     </section><!--end .cta_area-->
     <!-- ***************************
        Call To Action Area End
     *************************** -->
     <!-- ***************************
        Footer Area Start
     *************************** -->
    <footer class="footer_area section_padding section_dark_bg">
        <img src="assets/images/testimonial-shape.png" class="triangle_shape footer_shape" alt="Shape">
        <img src="assets/images/testimonial-shape.png" class="triangle_shape_2 footer_shape_2" alt="Shape">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="footer_widget newsletter">
                        <h3>Newsletter</h3>
                        <form action="#" method="post">
                            <div class="input-group">
                                <input type="EMAIL" placeholder="Email Address">
                            </div><!--end .input-group-->
                        </form>
                        <ul class="social_links">
                            <li>
                                <a href="#"><i class="fa fa-twitter"></i></a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-linkedin"></i></a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-youtube"></i></a>
                            </li>
                        </ul>
                    </div><!--end .footer_widget-->
                </div><!--end .col-md-4-->
                <div class="col-md-3 col-sm-6">
                    <div class="footer_widget services_widget">
                        <h3>Services</h3>
                        <ul class="quick_links">
                            <li><a href="#"><i class="fa fa-angle-right"></i> Interactive Security</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Home Control</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Video Monitoring</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Access</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Energy Management</a></li>
                        </ul>
                    </div><!--end .footer_widget-->
                </div><!--end .col-md-3-->
                <div class="col-md-3 col-sm-6">
                    <div class="footer_widget company_widget">
                        <h3>Company</h3>
                        <ul class="quick_links">
                            <li><a href="#"><i class="fa fa-angle-right"></i> About Us</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Pricing</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Team</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Blog</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Contact Us</a></li>
                        </ul>
                    </div><!--end .footer_widget-->
                </div><!--end .col-md-3-->
                <div class="col-md-2 col-sm-6">
                    <div class="footer_widget help_widgets">
                        <h3>Help</h3>
                        <ul class="quick_links">
                            <li><a href="#"><i class="fa fa-angle-right"></i> FAQs</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Support</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Privacy Policy</a></li>
                            <li><a href="#"><i class="fa fa-angle-right"></i> Terms of Use</a></li>
                        </ul>
                    </div><!--end .footer_widget-->
                </div><!--end .col-md-2-->
            </div><!--end .row-->
        </div><!--end .container-->
    </footer><!--end .footer_area-->
    <div class="copyright_area text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>&copy; Copyright 2019 by <a href="http://www.51qianduan.com//">Layerdrops.com</a></p>
                </div><!--end .col-md-12-->
            </div><!--end .row-->
        </div><!--end .container-->
    </div><!--end .copyright_area-->
     <!-- ***************************
        Footer Area End
     *************************** -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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