红色欧美风格的清洁服务整站网站源码下载



12 47 16



模板描述:红色欧美风格 清洁服务 整站网站,红色欧美风格的清洁服务整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">

2. 引入JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.simpleLoadMore.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/aos.min.js"></script>
<script src="assets/js/script.js"></script>
<script src="https://ditu.google.cn/maps/api/js?key=AIzaSyBk25E4mNfVIEt3tNl3K1HwNZVruVoFBlA"></script>
<script id="map-script" src="assets/js/map-script.js"></script>

3. HTML代码

    <div class="page-wrapper">
        <!-- Preloader -->
        <div class="preloader"></div> 
        <!-- main header -->
        <header class="main-header">
            <!--Header-Upper-->
            <div class="header-upper">
                <div class="container-fluid clearfix">
                    <div class="float-left logo-outer">
                        <div class="logo"><a href="index.html"><img src="assets/images/logo.png" alt="" title=""></a></div>
                    </div>
                    <div class="float-right upper-right clearfix">
                        <div class="nav-outer clearfix">
                            <!-- Main Menu -->
                            <nav class="main-menu navbar-expand-lg">
                                <div class="navbar-header clearfix">
                                    <!-- Toggle Button -->
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>
                                <div class="navbar-collapse collapse clearfix">
                                    <ul class="navigation clearfix">
                                        <li class="current"><a href="index.html">Home</a></li>
                                        <li><a href="services.html">services</a></li>
                                        <li><a href="about.html">about</a></li>
                                        <li><a href="pricing.html">pricing</a></li>
                                        <li><a href="blog.html">blog</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                        <li><a href="callto:830-215-4917" class="btn-style-two">830-215-4917</a></li>
                                        <li><a href="#" class="theme-btn" data-toggle="modal" data-target="#locationPopUp">Find a location</a></li>
                                    </ul>
                                </div>
                            </nav>
                            <!-- Main Menu End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--End Header Upper-->
            <!--Sticky Header-->
            <div class="sticky-header">
                <div class="container-fluid clearfix">
                    <!--Logo-->
                    <div class="logo float-left">
                        <a href="index.html" class="img-responsive"><img src="assets/images/logo.png" alt="" title=""></a>
                    </div>
                    <!--Right Col-->
                    <div class="right-col float-right">
                        <!-- Main Menu -->
                        <nav class="main-menu navbar-expand-lg">
                            <div class="navbar-collapse collapse clearfix">
                                 <ul class="navigation clearfix">
                                    <li class="current"><a href="index.html">Home</a></li>
                                    <li><a href="services.html">services</a></li>
                                    <li><a href="about.html">about</a></li>
                                    <li><a href="pricing.html">pricing</a></li>
                                    <li><a href="blog.html">blog</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="callto:830-215-4917" class="btn-style-two">830-215-4917</a></li>
                                    <li><a href="#" class="theme-btn" data-toggle="modal" data-target="#locationPopUp">Find a location</a></li>
                                </ul>
                            </div>
                        </nav><!-- Main Menu End-->
                    </div>
                </div>
            </div>
            <!--End Sticky Header-->
        </header>
        <!-- Hero Section Start -->
        <section class="hero-section">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6 d-flex">
                        <div class="hero-contect">
                            <h2 class="section-title wow animated fadeInUp">Stop Coming Home to a Second Job. We'll Do the Cleaning for You!</h2>
                            <p class="wow animated fadeInUp">Eveniet, mollitia ipsum dolores sed esse nobis ut commoinvidunt laudantium. Ipsum asperiores neque deleniti exercitationem temporibus, sadipscing veritatis labore </p>
                            <div class="hero-btn">
                                <a href="#" class="theme-btn wow animated fadeInUp">Get Started</a>
                                <a href="#contact" class="scroll btn-style-two wow animated fadeInUp">Request A Free Estimate</a>
                            </div>
                            <div class="hero-content-bottom wow animated fadeInUp">
                                <img src="assets/images/hero/hero-content-bottom.png" alt="Hero Bottom">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="hero-img wow animated fadeInUp">
                            <div class="pop-over wow animated fadeInUp"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Hero Section End -->
        <!-- Services Section Start -->
        <section class="services-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 order-lg-2">
                        <div class="services-content">
                            <h4 class="section-title-hint wow animated fadeInUp" data-wow-delay="0.25s">Services</h4>
                            <h2 class="section-title mb-25 wow animated fadeInUp" data-wow-delay="0.5s">Keeping Your Home Cleaner with Our Cleaning & Handyman Tasks</h2>
                            <p class="mb-30 wow animated fadeInUp" data-wow-delay="0.75s">Takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo</p>
                            <a href="#" class="btn-style-two wow animated fadeInUp" data-wow-delay="1s">All Services</a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="services-boxes">
                            <div class="box-shape" data-aos="slide-down"></div>
                            <div class="service-box pl-50 mr-35">
                                <img class="wow animated fadeInUp" data-wow-delay="0.25s" src="assets/images/services/service-7.png" alt="Service Box">
                                <h6 class="wow animated fadeInUp" data-wow-delay="0.45s">Every Time We Clean</h6>
                                <h3 class="wow animated fadeInUp" data-wow-delay="0.55s"><a href="service-details.html">Sleeping Areas</a></h3>
                            </div>
                            <div class="service-box">
                                <img class="wow animated fadeInUp" data-wow-delay="0.5s" src="assets/images/services/service-8.png" alt="Service Box">
                                <h6 class="wow animated fadeInUp" data-wow-delay="0.65s">Flat areas hand wiped</h6>
                                <h3 class="wow animated fadeInUp" data-wow-delay="0.75s"><a href="service-details.html">Living Areas</a></h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Services Section End -->
        <!-- About Us Section Start -->
        <section class="about-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="about-us-content">
                            <h4 class="section-title-hint wow animated fadeInUp" data-wow-delay="0.25s">About Us</h4>
                            <h2 class="section-title mb-25 wow animated fadeInUp" data-wow-delay="0.5s">Our Goal Is to Make <br>Our Customers' Lives Better</h2>
                            <p class="mb-25 wow animated fadeInUp" data-wow-delay="0.65s">Accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
                            <ul class="list-style-one mb-25 wow animated fadeInUp" data-wow-delay="0.75s">
                                <li>Satisfaction guaranteed</li>
                                <li>Bonded and insured</li>
                                <li>Cleaning frequencies</li>
                            </ul>
                            <a href="#" class="btn-style-two wow animated fadeInUp" data-wow-delay="0.85s">Learn More</a>
                        </div>
                    </div>
                    <div class="col-lg-6 pl-lg-4">
                        <div class="about-us-img">
                            <div class="box-shape" data-aos="slide-down"></div>
                            <div class="about-img-title wow animated fadeInUp" data-wow-delay="0.6s">
                               <h3>Simple price<br>per hour</h3>
                            </div>
                            <img class="wow animated fadeInUp" data-wow-delay="0.35s" src="assets/images/about/about.png" alt="About Us">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- About Us Section End -->
        <!-- Pricing Section Start -->
        <section class="pricing-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 order-lg-2">
                        <div class="pricing-content">
                            <h4 class="section-title-hint wow animated fadeInUp" data-wow-delay="0.25s">Pricing</h4>
                            <h2 class="section-title mb-25 wow animated fadeInUp" data-wow-delay="0.5s">We will clean your <br>home like it was our own, with a lot of love and attention to detail!</h2>
                            <p class="mb-30 wow animated fadeInUp" data-wow-delay="0.75s">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea</p>
                            <a href="#" class="btn-style-two wow animated fadeInUp" data-wow-delay="1s">Details Pricing</a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="pricing-boxes">
                            <div class="pricing-box mr-35">
                                <img class="wow animated fadeInUp" data-wow-delay="0.25s" src="assets/images/pricing/price-1.png" alt="Pricing Box">
                                <div class="price-rate wow animated fadeInUp" data-wow-delay="0.8s">
                                    <span class="from">From</span>
                                    <span class="price">$30/Hr</span>
                                    <span class="for">For home</span>
                                </div>
                            </div>
                            <div class="pricing-box">
                                <img class="wow animated fadeInUp" data-wow-delay="0.55s" src="assets/images/pricing/price-2.png" alt="Pricing Box">
                                <div class="price-rate wow animated fadeInUp" data-wow-delay="1s">
                                    <span class="from">From</span>
                                    <span class="price">$45/Hr</span>
                                    <span class="for">For business</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Pricing Section End -->
        <!-- Testimonials Section Start -->
        <section class="testimonial-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <h4 class="section-title-hint wow animated fadeInUp" data-wow-delay="0.25s">Testimonials</h4>
                        <h2 class="section-title mb-40 wow animated fadeInUp" data-wow-delay="0.5s">Hear From Our Clients</h2>
                    </div>
                    <div class="col-lg-9">
                        <div class="testimonials-outer wow animated fadeInRight" data-wow-delay="0.5s">
                            <div class="testi-quote wow animated fadeInLeft" data-wow-delay="0.75s"></div>
                            <div class="single-item-carousel owl-carousel">
                                <div class="testimonial-single">
                                    <div class="testimonial-img">
                                        <img src="assets/images/testimonials/testimonial-1.png" alt="Testimonial Author">
                                    </div>
                                    <div class="testimonial-details">
                                        <h3>Linda</h3>
                                        <h4>County Line Road</h4>
                                        <p>Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et</p>
                                        <p>Dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
                                    </div>
                                </div>
                                <div class="testimonial-single">
                                    <div class="testimonial-img">
                                        <img src="assets/images/testimonials/testimonial-2.png" alt="Testimonial Author">
                                    </div>
                                    <div class="testimonial-details">
                                        <h3>Erin Vincent</h3>
                                        <h4>Dover Road</h4>
                                        <p>Libero architecto voluptatibus, cum id porro provident explicabo aliquid ipsum mollitia ad. Tenetur quibusdam ex eaque, quidem numquam ipsa beatae cum repudiandae delectus.</p>
                                        <p>Alias deserunt culpa earum laudantium similique est eligendi recusandae! Minus beatae dolorum nostrum, accusantium ducimus,</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem qui voluptatum,</p>
                                    </div>
                                </div>
                                <div class="testimonial-single">
                                    <div class="testimonial-img">
                                        <img src="assets/images/testimonials/testimonial-3.png" alt="Testimonial Author">
                                    </div>
                                    <div class="testimonial-details">
                                        <h3>Joel Watson</h3>
                                        <h4>St Denys Road</h4>
                                        <p>Alias distinctio excepturi quae facere magnam enim, repellendus aliquam, accusantium explicabo reprehenderit ipsum itaque ad totam nihil debitis corporis minima minus! Nihil eaque ab eligendi vitae voluptatibus quam nam obcaecati, ipsa praesentium voluptates.</p>
                                        <p> Eaque quo blanditiis consequuntur id explicabo quidem consequatur soluta reiciendis libero, cum ab sapiente sed aliquam eligendi sint dicta. </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Testimonials Section End -->
        <!-- Blog Section Start -->
        <section class="blog-section">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4 order-xl-3">
                        <div class="blog-box">
                            <h4 class="section-title-hint wow animated fadeInUp" data-wow-delay="0.25s">Blog</h4>
                            <h2 class="section-title mb-40 wow animated fadeInUp" data-wow-delay="0.5s">Tips, News & Updates</h2>
                            <div class="blog-img wow animated fadeInUp" data-wow-delay="0.65s"></div>
                            <div class="blog-title-box wow animated fadeInRight" data-wow-delay="1.15s">
                                <h3><a href="blog-details.html">How To Clean Your Glass Top Stove</a></h3>
                                <span class="date">AUG 23, 2019</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-md-6">
                        <div class="blog-box big">
                            <div class="blog-img wow animated fadeInUp" data-wow-delay="0.25s"></div>
                            <div class="blog-title-box wow animated fadeInRight" data-wow-delay="0.75s">
                                <h3><a href="blog-details.html">How to Make Your Bed Like a Pro</a></h3>
                                <span class="date">AUG 23, 2019</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6 col-md-6">
                        <div class="blog-box big">
                            <div class="blog-img wow animated fadeInUp" data-wow-delay="0.45s"></div>
                            <div class="blog-title-box wow animated fadeInRight" data-wow-delay="0.95s">
                                <h3><a href="blog-details.html">Living Room Decor Ideas</a></h3>
                                <span class="date">AUG 23, 2019</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Blog Section End -->
        <!-- Location Map Area Start -->
        <div class="modal fade location" id="locationPopUp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span class="flaticon-cross" aria-hidden="true"></span>
                    </button>
                    <div class="row align-items-center">
                        <div class="col-md-5 order-md-2">
                            <div class="location-details">
                                <div class="contact-item">
                                    <h3>Phone</h3>
                                    <a href="callto:+44562423001">+44 562 4230 01</a> <br>
                                    <a href="callto:+08665955501">+08 6659 555 01</a> <br>
                                </div>
                                <div class="contact-item">
                                    <h3>Email</h3>
                                    <a href="mailto:yourmail@outlook.com">yourmail@outlook.com</a>
                                </div>
                                <div class="contact-item">
                                    <h3>Location</h3>
                                    <p>1412 German street, Washington <br>Canadam, UK</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="contact-map-section">
                                <div class="outer-container">
                                    <div class="map-outer">
                                        <div class="map"
                                            data-zoom="12"
                                            data-lat="-37.817085"
                                            data-lng="144.955631"
                                            data-type="roadmap"
                                            data-hue="#ffc400"
                                            data-icon-path="assets/images/marker-icon.png">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Location Map Area End -->
        <!-- Footer Area Start -->
        <footer class="footer-area" id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="footer-contact-info">
                            <h3 class="mb-20">Contact Us</h3>
                            <p>1412 German street, Washington Canadam, UK</p>
                            <a href="callto:+44562423001">+44 562 4230 01</a> <br>
                            <a href="callto:+08665955501">+08 6659 555 01</a> <br>
                            <a href="mailto:yourmail@outlook.com" class="mt-15 d-inline-block">yourmail@outlook.com</a>
                            <div class="social-style-one mt-20">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-behance"></i></a>
                                <a href="#"><i class="fab fa-dribbble"></i></a>
                                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            </div>
                            <div class="copyright">
                                <p>@ 2019 ConCleaner All Rights Reserved</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 align-self-stretch d-flex">
                        <div class="footer-contact-form align-self-stretch">
                            <!-- Form Area Start -->
                            <form id="contact-form" name="contact_form" class="contact-form" action="sendmail.php" method="POST">
                                <input type="text" name="first_name"  value="" placeholder="Name*" required>
                                <input type="email" name="email" value="" placeholder="Email*" required>
                                <textarea name="message" placeholder="Message" required></textarea>
                                <input id="form_botcheck" name="form_botcheck" type="hidden" value="">
                                <button class="theme-btn" type="submit" data-loading-text="Please wait...">Send Request</button>
                            </form>
                            <!-- Form Area End -->
                            <div class="mobile-copyright">
                                <p>@ 2019 ConCleaner All Rights Reserved</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer Area End -->
    </div>
    <!--End pagewrapper-->
    <!-- Scroll Top Button -->
    <button class="scroll-top scroll-to-target" data-target="html"><span class="fa fa-angle-up"></span></button>
    <!-- jequery plugins -->
    <!--   Animations-->
    <!-- Custom script -->
    <!-- map script -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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