HTML5红色宽屏样式汽车车间维修企业网站模板代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

9 34 12



模板描述:红色 宽屏样式 汽车车间维修。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用汽车车间维修等行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">
<link href="static/css/responsive.css" rel="stylesheet">
<link href="static/css/color.css" rel="stylesheet">
<link href="static/css/999d818a1bad41eaae6e38653e3adca5.css" rel="stylesheet">

2. 引入JS

<script src="static/js/html5shiv.js"></script>
<script src="static/js/respond.js"></script>
<script src="static/js/jquery.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-select.min.js"></script>
<script src="static/js/jquery.fancybox.js"></script>
<script src="static/js/isotope.js"></script>
<script src="static/js/owl.js"></script>
<script src="static/js/appear.js"></script>
<script src="static/js/wow.js"></script>
<script src="static/js/lazyload.js"></script>
<script src="static/js/scrollbar.js"></script>
<script src="static/js/tweenmax.min.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/jquery.polyglot.language.switcher.js"></script>
<script src="static/js/jquery.ajaxchimp.min.js"></script>
<script src="static/js/parallax-scroll.js"></script>
<script src="static/js/script.js"></script>

3. HTML代码

<div class="page-wrapper">
    <!-- Preloader -->
    <div class="loader-wrap">
        <div class="preloader"><div class="preloader-close">Preloader Close</div></div>
        <div class="layer layer-one"><span class="overlay"></span></div>
        <div class="layer layer-two"><span class="overlay"></span></div>        
        <div class="layer layer-three"><span class="overlay"></span></div>        
    </div>
    <!-- Main Header -->
    <header class="main-header header-style-one">
        <!-- Header Top -->
        <div class="header-top">
            <div class="auto-container">
                <div class="inner-container">
                    <div class="left-column">
                        <div class="text"># 1 Multibrand Car Workshop  of Losangle City</div>
                        <div class="office-hour">Monday - Saturday 7:00AM - 6:00PM</div>
                    </div>
                    <div class="right-column">
                        <div class="phone-number">Schedule Your Appontment Today : <strong>1800 456 7890</strong></div>
                        <div class="language-switcher">
                            <div id="polyglotLanguageSwitcher" class="">
                                <form action="#">
                                    <select id="polyglot-language-options">
                                        <option id="en" value="en" selected>English</option>
                                        <option id="fr" value="fr">French</option>
                                        <option id="de" value="de">German</option>
                                        <option id="it" value="it">Italian</option>
                                        <option id="es" value="es">Spanish</option>
                                    </select>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header Upper -->
        <div class="header-upper">
            <div class="auto-container">
                <div class="inner-container">
                    <!--Logo-->
                    <div class="logo-box">
                        <div class="logo"><a href="index.html"><img src="static/picture/logo.png" alt=""></a></div>
                    </div>
                    <div class="right-column">
                        <!--Nav Box-->
                        <div class="nav-outer">
                            <!--Mobile Navigation Toggler-->
                            <div class="mobile-nav-toggler"><img src="static/picture/icon-bar.png" alt=""></div>
                            <!-- Main Menu -->
                            <nav class="main-menu navbar-expand-md navbar-light">
                                <div class="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                                    <ul class="navigation">
                                        <li class="dropdown"><a href="index.html">Home</a>
                                            <ul>
                                                <li><a href="index.html">Home Page 1</a></li>
                                                <li><a href="index-2.html">Home Page 2</a></li>
                                                <li><a href="index-3.html">Home Page 3</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown"><a href="about.html">About Us</a>
                                            <ul>
                                                <li><a href="about.html">About Us</a></li>
                                                <li><a href="history.html">Company History</a></li>
                                                <li><a href="team.html">Our Team</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown"><a href="service-1.html">Services</a>
                                            <ul>
                                                <li><a href="service-1.html">Services 1</a></li>
                                                <li><a href="service-2.html">Services 2</a></li>
                                                <li><a href="service-details.html">Single Service</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown"><a href="gallery-1.html">Gallery</a>
                                            <ul>
                                                <li><a href="gallery-1.html">Gallery 1</a></li>
                                                <li><a href="gallery-2.html">Gallery 2</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown"><a href="blog.html">Pages</a>
                                            <ul>
                                                <li><a href="projects.html">Projects</a></li>
                                                <li><a href="project-details.html">Project Details</a></li>
                                                <li><a href="testimonials.html">Testimonials</a></li>
                                                <li><a href="faq.html">Faq</a></li>
                                                <li><a href="error.html">404 Error Page</a></li>
                                                <li><a href="comming-soon.html">Coming Soon Page</a></li>
                                            </ul>
                                        </li>
                                        <li class="dropdown"><a href="#">News</a>
                                            <ul>
                                                <li><a href="blog.html">Blog With Side bar</a></li>
                                                <li><a href="blog-2.html">Blog 2 Column</a></li>
                                                <li><a href="blog-details.html">Blog Details</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="contact.html">Contact Us</a></li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                        <div class="search-btn"><button type="button" class="theme-btn search-toggler"><span class="stroke-gap-icon icon-Search"></span></button></div>
                        <div class="link-btn"><a href="#" class="theme-btn btn-style-one">Book a Schedule </a></div>
                    </div>                        
                </div>
            </div>
        </div>
        <!--End Header Upper-->
        <!-- Sticky Header  -->
        <div class="sticky-header">
            <!-- Header Upper -->
            <div class="header-upper">
                <div class="auto-container">
                    <div class="inner-container">
                        <!--Logo-->
                        <div class="logo-box">
                            <div class="logo"><a href="index.html"><img src="static/picture/logo.png" alt=""></a></div>
                        </div>
                        <div class="right-column">
                            <!--Nav Box-->
                            <div class="nav-outer">
                                <!--Mobile Navigation Toggler-->
                                <div class="mobile-nav-toggler"><img src="static/picture/icon-bar.png" alt=""></div>
                                <!-- Main Menu -->
                                <nav class="main-menu navbar-expand-md navbar-light">
                                </nav>
                            </div>
                            <div class="search-btn"><button type="button" class="theme-btn search-toggler"><span class="stroke-gap-icon icon-Search"></span></button></div>
                            <div class="link-btn"><a href="#" class="theme-btn btn-style-one">Book a Schedule </a></div>
                        </div>                        
                    </div>
                </div>
            </div>
            <!--End Header Upper-->
        </div><!-- End Sticky Menu -->
        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><span class="icon flaticon-remove"></span></div>
            <nav class="menu-box">
                <div class="nav-logo"><a href="index.html"><img src="static/picture/logo-two.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
				<!--Social Links-->
				<div class="social-links">
					<ul class="clearfix">
						<li><a href="#"><span class="fab fa-twitter"></span></a></li>
						<li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
						<li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
						<li><a href="#"><span class="fab fa-instagram"></span></a></li>
						<li><a href="#"><span class="fab fa-youtube"></span></a></li>
					</ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->
        <div class="nav-overlay">
            <div class="cursor"></div>
            <div class="cursor-follower"></div>
        </div>
    </header>
    <!-- End Main Header -->
    <!--Search Popup-->
    <div id="search-popup" class="search-popup">
        <div class="close-search theme-btn"><span class="flaticon-remove"></span></div>
        <div class="popup-inner">
            <div class="overlay-layer"></div>
            <div class="search-form">
                <form method="post" action="index.html">
                    <div class="form-group">
                        <fieldset>
                            <input type="search" class="form-control" name="search-input" value="" placeholder="Search Here" required >
                            <input type="submit" value="Search Now!" class="theme-btn">
                        </fieldset>
                    </div>
                </form>
                <br>
                <h3>Recent Search Keywords</h3>
                <ul class="recent-searches">
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Idea</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Growth</a></li>
                    <li><a href="#">Plan</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Bnner Section -->
    <section class="banner-section">
        <div class="swiper-container banner-slider">
            <div class="swiper-wrapper">
                <!-- Slide Item -->
                <div class="swiper-slide" style="background-image: url(static/images/image-1.jpg);">
                    <div class="content-outer">
                        <div class="content-box">
                            <div class="inner">
                                <h1>Tuneup Your Car <br> to Next Level</h1>
                                <div class="text">We believe in providing top quality workmanship and are <br>so confident in our level of service that we back it up <br> with a good quality.</div>
                                <div class="link-box">
                                    <a href="service-1.html" class="theme-btn btn-style-one"><span>view all services <i class="flaticon-right"></i></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Slide Item -->
                <div class="swiper-slide" style="background-image: url(static/images/image-2.jpg);">
                    <div class="content-outer">
                        <div class="content-box">
                            <div class="inner">
                                <h1>Highly Skilled <br> Cretified Engineers</h1>
                                <div class="text">We believe in providing top quality workmanship and are <br>so confident in our level of service that we back it up <br> with a good quality.</div>
                                <div class="link-box">
                                    <a href="service-1.html" class="theme-btn btn-style-one"><span>view all services <i class="flaticon-right"></i></span></a>
                                </div>
                            </div>                                
                        </div>
                    </div>
                </div>
                <!-- Slide Item -->
                <div class="swiper-slide" style="background-image: url(static/images/image-3.jpg);">
                    <div class="content-outer">
                        <div class="content-box">
                            <div class="inner">
                                <h1>Modern Workshop <br> For Car Repair</h1>
                                <div class="text">We believe in providing top quality workmanship and are <br>so confident in our level of service that we back it up <br> with a good quality.</div>
                                <div class="link-box">
                                    <a href="service-1.html" class="theme-btn btn-style-one"><span>view all services <i class="flaticon-right"></i></span></a>
                                </div>
                            </div>                                
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="banner-slider-nav">
            <div class="banner-slider-control banner-slider-button-prev"><span><i class="far fa-angle-left"></i></span></div>
            <div class="banner-slider-control banner-slider-button-next"><span><i class="far fa-angle-right"></i></span> </div>
        </div>
    </section>
    <!-- End Bnner Section -->
    <!-- About Us -->
    <section class="about-section">
        <div class="auto-container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="image-box">
                        <img src="static/picture/image-1.jpg" alt="">
                        <img src="static/picture/image-2.jpg" alt="">
                        <div class="year-experience" data-parallax='{"y": 30}'><strong>24</strong> years <br> Experience </div>
                    </div>
                </div>
                <div class="col-lg-7 pl-lg-5">
                    <div class="sec-title">
                        <h5>Welcome to Our workshop</h5>
                        <h2>We have 24 years experience</h2>
                        <div class="text">
                            <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</p> 
                            <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing.</p>
                        </div>
                        <div class="link-btn mt-40"><a href="about.html" class="theme-btn btn-style-one style-two"><span>About Us <i class="flaticon-right"></i></span></a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Services Section -->
    <section class="services-section">
        <div class="auto-container">
            <div class="sec-title style-two">
                <h2>Our Featured Services</h2>
                <div class="text">Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. </div>
            </div>
            <div class="row">
                <div class="col-lg-4 service-block-one">
                    <div class="inner-box hvr-float-shadow">
                        <h5>Service and Repairs</h5>
                        <h2>Performance Upgrade</h2>
                        <a href="#" class="read-more">read more  +</a>
                        <div class="icon"><span class="flaticon-power"></span></div>
                    </div>
                </div>
                <div class="col-lg-4 service-block-one">
                    <div class="inner-box hvr-float-shadow">
                        <h5>Service and Repairs</h5>
                        <h2>Transmission Services</h2>
                        <a href="#" class="read-more">read more  +</a>
                        <div class="icon"><span class="flaticon-gearbox"></span></div>
                    </div>
                </div>
                <div class="col-lg-4 service-block-one">
                    <div class="inner-box hvr-float-shadow">
                        <h5>Service and Repairs</h5>
                        <h2>Break Repair & Service</h2>
                        <a href="#" class="read-more">read more  +</a>
                        <div class="icon"><span class="flaticon-brake-disc"></span></div>
                    </div>
                </div>
                <div class="col-lg-4 service-block-one">
                    <div class="inner-box hvr-float-shadow">
                        <h5>Service and Repairs</h5>
                        <h2>Engine Service & Repair</h2>
                        <a href="#" class="read-more">read more  +</a>
                        <div class="icon"><span class="flaticon-car-engine"></span></div>
                    </div>
                </div>
                <div class="col-lg-4 service-block-one">
                    <div class="inner-box hvr-float-shadow">
                        <h5>Service and Repairs</h5>
                        <h2>Tyre & Wheels</h2>
                        <a href="#" class="read-more">read more  +</a>
                        <div class="icon"><span class="flaticon-tire"></span></div>
                    </div>
                </div>
                <div class="col-lg-4 service-block-one">
                    <div class="inner-box hvr-float-shadow">
                        <h5>Service and Repairs</h5>
                        <h2>Denting & Painting</h2>
                        <a href="#" class="read-more">read more  +</a>
                        <div class="icon"><span class="flaticon-spray-gun"></span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Features Section -->
    <section class="features-section">
        <div class="auto-container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="inner-container">
                        <h2>Quality Service And <br> Customer Satisfaction !!</h2>
                        <div class="text">We utilize the most recent symptomatic gear to ensure your vehicle is fixed or adjusted appropriately and in an opportune manner. We are an individual from Professional Auto Service, a first class execution arrange, where free assistance offices share shared objectives of being world-class car administration focuses.</div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="image"><img src="static/picture/image-3.jpg" alt=""></div>
                </div>
            </div>
        </div>
    </section>
    <!-- Why Choose Us -->
    <section class="why-choose-us">
        <div class="auto-container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="sec-title style-two">
                        <h2>Why Choose Us</h2>
                        <div class="text">Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation heading towards.</div>
                    </div>
                    <div class="icon-box">
                        <div class="icon"><span class="flaticon-mechanic"></span></div>
                        <h4>Certified Expert Mechanics</h4>
                    </div>
                    <div class="icon-box">
                        <div class="icon"><span class="flaticon-wrench"></span></div>
                        <h4>Fast And Quality Service</h4>
                    </div>
                    <div class="icon-box">
                        <div class="icon"><span class="flaticon-price-tag-1"></span></div>
                        <h4>Best Prices in Town</h4>
                    </div>
                    <div class="icon-box">
                        <div class="icon"><span class="flaticon-trophy"></span></div>
                        <h4>Awarded Workshop</h4>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="sec-title style-two">
                        <h2>Addtional Services</h2>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="image"><img src="static/picture/image-4.jpg" alt=""></div>
                        </div>
                        <div class="col-md-7">
                            <ul class="list">
                                <li>General Auto Repair & Maintenance</li>
                                <li>Transmission Repair & Replacement</li>
                                <li>Tire Repair and Replacement</li>
                                <li>State Emissions Inspection</li>
                                <li>Break Job / Break Services</li>
                                <li>Electrical Diagnostics</li>
                                <li>Fuel System Repairs</li>
                                <li>Starting and Charging Repair</li>
                                <li>Steering and Suspension Work</li>
                                <li>Emission Repair Facility</li>
                                <li>Wheel Alignment</li>
                                <li>Computer Diagaonstic Testing</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Video Section -->
    <section class="video-section">
        <div data-parallax='{"y": 50}' class="sec-bg" style="background-image: url(static/images/bg-1.jpg);"></div>
        <div class="auto-container">
            <h5>Working since 1992</h5>
            <h2>We are leader <br> in Car Mechanical Work</h2>
            <div class="video-box">
                <div class="video-btn"><a href="" class="overlay-link lightbox-image video-fancybox ripple"><i class="flaticon-play"></i></a></div>
                <div class="text">Watch intro video <br> about us</div>
            </div>
        </div>
    </section>
    <!-- Our Team -->
    <section class="team-section">
        <div class="auto-container">
            <div class="top-content">
                <div class="row m-0 justify-content-between">
                    <div class="sec-title">
                        <h2>Our Team</h2>
                    </div>
                    <div class="text">
                        Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a <br>new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User <br>generated content in real-time will have multiple touchpoints for offshoring.
                    </div>
                </div>
            </div> 
            <div class="row">
                <div class="col-lg-3 col-md-6 team-block-one">
                    <div class="inner-box wow fadeInUp" data-wow-duration="1500ms">
                        <div class="image">
                            <img src="static/picture/team-1.jpg" alt="">
                            <div class="overlay-box">
                                <ul class="social-links">
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-google-plus-g"></span></a></li>
                                </ul>
                            </div>                                
                        </div>
                        <div class="content">
                            <h4>Michale Joe</h4>
                            <div class="designation">Main Supervisor</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 team-block-one">
                    <div class="inner-box wow fadeInDown" data-wow-duration="1500ms">
                        <div class="image">
                            <img src="static/picture/team-2.jpg" alt="">
                            <div class="overlay-box">
                                <ul class="social-links">
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-google-plus-g"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="content">
                            <h4>Mark John</h4>
                            <div class="designation">Main Mechanic</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 team-block-one">
                    <div class="inner-box wow fadeInUp" data-wow-duration="1500ms">
                        <div class="image">
                            <img src="static/picture/team-3.jpg" alt="">
                            <div class="overlay-box">
                                <ul class="social-links">
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-google-plus-g"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="content">
                            <h4>Merry Desulva</h4>
                            <div class="designation">Main Supervisor</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 team-block-one">
                    <div class="inner-box wow fadeInDown" data-wow-duration="1500ms">
                        <div class="image">
                            <img src="static/picture/team-4.jpg" alt="">
                            <div class="overlay-box">
                                <ul class="social-links">
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-google-plus-g"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="content">
                            <h4>John michale</h4>
                            <div class="designation">Junior Helper</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Testimonial Section -->
    <section class="testimonial-section" style="background-image: url(static/images/bg-3.png);">
        <div class="shape"><img src="static/picture/shape-1.png" alt=""></div>
        <div class="auto-container">
            <div class="row">
                <div class="col-lg-8 offset-lg-4">
                    <div class="theme_carousel owl-theme owl-carousel" data-options='{"loop": true, "margin": 40, "autoheight":true, "lazyload":true, "nav": true, "dots": true, "autoplay": true, "autoplayTimeout": 6000, "smartSpeed": 1000, "responsive":{ "0" :{ "items": "1" }, "600" :{ "items" : "1" }, "768" :{ "items" : "1" } , "992":{ "items" : "1" }, "1200":{ "items" : "1" }}}'>
                        <div class="testimonial-block">
                            <div class="inner-box">
                                <div class="image-wrapper">
                                    <div class="image">
                                        <img src="static/picture/author-1.jpg" alt="">
                                    </div>
                                    <div class="quote">“</div>
                                </div>                                    
                                <div class="content">
                                    <div class="text">Lorem ipsum dolor sit amet, cons ectetur elit. Vestibulum nec odios Suspe ndisse cursus mal suada faci lisis. Lorem ipsum dolor sit ametion consectetur elit. Vesti bulum nec odio ipsum. Lorem ipsum dolor sit amet, cons ectetur elit. </div>
                                    <div class="author-info">
                                        <h4>Michale John</h4>
                                        <div class="designation">Ceo of Minda</div>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                        <div class="testimonial-block">
                            <div class="inner-box">
                                <div class="image-wrapper">
                                    <div class="image">
                                        <img src="static/picture/author-1.jpg" alt="">
                                    </div>
                                    <div class="quote">“</div>
                                </div>
                                <div class="content">
                                    <div class="text">Lorem ipsum dolor sit amet, cons ectetur elit. Vestibulum nec odios Suspe ndisse cursus mal suada faci lisis. Lorem ipsum dolor sit ametion consectetur elit. Vesti bulum nec odio ipsum. Lorem ipsum dolor sit amet, cons ectetur elit. </div>
                                    <div class="author-info">
                                        <h4>Michale John</h4>
                                        <div class="designation">Ceo of Minda</div>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                        <div class="testimonial-block">
                            <div class="inner-box">
                                <div class="image-wrapper">
                                    <div class="image">
                                        <img src="static/picture/author-1.jpg" alt="">
                                    </div>
                                    <div class="quote">“</div>
                                </div>
                                <div class="content">
                                    <div class="text">Lorem ipsum dolor sit amet, cons ectetur elit. Vestibulum nec odios Suspe ndisse cursus mal suada faci lisis. Lorem ipsum dolor sit ametion consectetur elit. Vesti bulum nec odio ipsum. Lorem ipsum dolor sit amet, cons ectetur elit. </div>
                                    <div class="author-info">
                                        <h4>Michale John</h4>
                                        <div class="designation">Ceo of Minda</div>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Estimate Section  -->
    <div class="estimate-section">
        <div class="auto-container">
            <div class="wrapper-box">
                <div class="row align-items-center">
                    <div class="col-lg-4">
                        <div class="content">
                            <h2>Car Repair Estimator</h2>
                            <div class="text">Get a estimate according your car condition</div>                    
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="estimate-form">
                            <form action="#" class="">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select class="selectpicker" name="make">
                                                <option value="*">Make</option>
                                                <option value=".category-1">Hyundai</option>
                                                <option value=".category-3">Jeep</option>
                                                <option value=".category-4">Toyota</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select class="selectpicker" name="model">
                                                <option value="*">Model</option>
                                                <option value=".category-1">Cherokee</option>
                                                <option value=".category-2">Compass</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select class="selectpicker" name="year">
                                                <option value="*">Year</option>
                                                <option value=".category-1">2020</option>
                                                <option value=".category-3">2018</option>
                                                <option value=".category-4">2015</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select class="selectpicker" name="service">
                                                <option value="*">Repair Needed</option>
                                                <option value=".category-1">Performance Upgrade</option>
                                                <option value=".category-2">Transmission Service</option>
                                                <option value=".category-2">Break Repair & Service</option>
                                                <option value=".category-2">Engine Service & Repair</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <button type="submit" class="theme-btn btn-style-one w-100"><span>GET ESTIMATE</span></button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>                    
            </div>                
        </div>
    </div>
    <!-- facts Section -->
    <section class="facts-section">
        <div class="auto-container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <h2><span>100%</span> Satisfaction <br> Guarantee</h2>
                </div>
                <div class="col-lg-9">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="facts-block">
                                <div class="icon"><span class="flaticon-customer-service-1"></span></div>
                                <h4>Quality Support</h4>
                                <div class="text">Our Repair Services offers quality help programs for any vehicles that permit them to consistently.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="facts-block">
                                <div class="icon"><span class="flaticon-car-1"></span></div>
                                <h4>All Car Makes</h4>
                                <div class="text">Our Repair Services offers quality help programs for any vehicles that permit them to consistently.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="facts-block">
                                <div class="icon"><span class="flaticon-maintenance"></span></div>
                                <h4>Variety Services</h4>
                                <div class="text">Our Repair Services offers quality help programs for any vehicles that permit them to consistently.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Blog Section -->
    <section class="blog-section">
        <div class="auto-container">
            <div class="top-content">
                <div class="m-0 row justify-content-between align-items-center">
                    <div class="sec-title style-two">
                        <h2>Latest Blog & Articles</h2>
                    </div>
                    <div class="link-btn">
                        <a href="#" class="theme-btn">View All Blogs</a>
                    </div>
                </div>
            </div>                
            <div class="row">
                <div class="col-lg-4 news-block-one">
                    <div class="inner-box">
                        <div class="image"><a href="blog-details.html"><img src="static/picture/news-1.jpg" alt=""></a></div>
                        <div class="lower-content">
                            <div class="meta-info">
                                <a href="#">April 18, 2020 </a>
                                <a href="#">Car Repairing</a>
                            </div>
                            <h3><a href="blog-details.html">Sixteen tips for fix and repairs <br>for starting problem</a></h3>
                            <div class="link-btn"><a href="blog-details.html" class="theme-btn"><i class="flaticon-right"></i></a></div>
                        </div>                            
                    </div>
                </div>
                <div class="col-lg-4 news-block-one">
                    <div class="inner-box">
                        <div class="image"><a href="blog-details.html"><img src="static/picture/news-2.jpg" alt=""></a></div>
                        <div class="lower-content">
                            <div class="meta-info">
                                <a href="#">April 18, 2020 </a>
                                <a href="#">Car Repairing</a>
                            </div>
                            <h3><a href="blog-details.html">What Soap Should Use <br> for Washing</a></h3>
                            <div class="link-btn"><a href="blog-details.html" class="theme-btn"><i class="flaticon-right"></i></a></div>
                        </div>                            
                    </div>
                </div>
                <div class="col-lg-4 news-block-one">
                    <div class="inner-box">
                        <div class="image"><a href="blog-details.html"><img src="static/picture/news-3.jpg" alt=""></a></div>
                        <div class="lower-content">
                            <div class="meta-info">
                                <a href="#">April 18, 2020 </a>
                                <a href="#">Car Repairing</a>
                            </div>
                            <h3><a href="blog-details.html">Low Hanging Fruit Two A  <br>Identify A Ballpark</a></h3>
                            <div class="link-btn"><a href="blog-details.html" class="theme-btn"><i class="flaticon-right"></i></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CTA Section -->
    <section class="cta-section">
        <div class="auto-container">
            <div class="wrapper-box">
                <div class="left-column">
                    <h3>Schedule Your Appointment Today</h3>
                    <div class="text">Your Automotive Repair & Maintenance Service Specialist</div>
                </div>
                <div class="right-column">
                    <div class="phone">1800.456.7890</div>
                    <div class="btn"><a href="#" class="theme-btn btn-style-one"><span>Appointment</span><i class="flaticon-right"></i></a></div>
                </div>
            </div>
        </div>
    </section>
    <!--Main Footer-->
    <footer class="main-footer">
        <!--Upper Box-->
        <div class="upper-box">
            <div class="auto-container">
                <div class="row no-gutters">
                    <!--Footer Info Box-->
                    <div class="footer-info-box col-md-4 col-sm-6 col-xs-12">
                        <div class="info-inner">
                            <div class="content">
                                <div class="icon">
                                    <span class="flaticon-pin"></span>
                                </div>
                                <div class="text">54B, Tailstoi Town 5238 MT, <br> La city, IA 522364</div>
                            </div>
                        </div>
                    </div>
                    <!--Footer Info Box-->
                    <div class="footer-info-box col-md-4 col-sm-6 col-xs-12">
                        <div class="info-inner">
                            <div class="content">
                                <div class="icon">
                                    <span class="flaticon-email"></span>
                                </div>
                                <div class="text">Email us : <br> <a href="https://www.51qianduan.com/" target="_blank">51前端</a></div>
                            </div>
                        </div>
                    </div>
                    <!--Footer Info Box-->
                    <div class="footer-info-box col-md-4 col-sm-6 col-xs-12">
                        <div class="info-inner">
                            <div class="content">
                                <div class="icon">
                                    <span class="flaticon-phone"></span>
                                </div>
                                <div class="text">Call us on : <br><strong>+ 1800 456 7890</strong></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Widgets Section-->
        <div class="widgets-section">
            <div class="auto-container">
                <div class="widgets-inner-container">
                    <div class="row clearfix">
                        <!--Footer Column-->
                        <div class="footer-column col-lg-4">
                            <div class="widget widget_about">
                                <div class="logo">
                                    <a href="index.html"><img src="static/picture/logo-two.png" alt="" /></a>
                                </div>
                                <div class="text">Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide additional clickthroughs.</div>
                            </div>
                        </div>
                        <!--Footer Column-->
                        <div class="footer-column col-lg-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="widget widget_links">
                                        <h4 class="widget_title">Usefull Links</h4>
                                        <div class="widget-content">
                                            <ul class="list">
                                                <li><a href="index.html">Home</a></li>
                                                <li><a href="about.html">About Us</a></li>
                                                <li><a href="#">Appointment</a></li>
                                                <li><a href="testimonial.html">Testimonials</a></li>
                                                <li><a href="contact.html">Contact Us</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="widget widget_links">
                                        <h4 class="widget_title">Our Services</h4>
                                        <div class="widget-content">
                                            <ul class="list">
                                                <li><a href="#">Performance Upgrade</a></li>
                                                <li><a href="#">Transmission Service</a></li>
                                                <li><a href="#">Break Repair & Service</a></li>
                                                <li><a href="#">Engine Service & Repair</a></li>
                                                <li><a href="#">Trye & Wheels</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>                                    
                        </div>
                        <!--Footer Column-->
                        <div class="footer-column col-lg-4">
                            <div class="widget widget_newsletter">
                                <h4 class="widget_title">Newsletter</h4>
                                <div class="text">Get latest updates and offers.</div>
                                <div class="newsletter-form">
                                    <form class="ajax-sub-form" method="post">
                                        <div class="form-group">
                                            <input type="email" placeholder="Enter your email" id="subscription-email">
                                            <button class="theme-btn" type="submit"><span class="fas fa-paper-plane"></span></button>
                                            <label class="subscription-label" for="subscription-email"></label>
                                        </div>
                                    </form>
                                </div>
                                <ul class="social-links">
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-google-plus-g"></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer Bottom-->
        <div class="auto-container">
            <div class="footer-bottom">
                <div class="copyright-text">更多模板 请关注模板之家<a target="_blank" href="http://www.51qianduan.com/">模板之家</a></div>
            </div>
        </div>
    </footer>
    <!--End Main Footer-->
</div>
<!--End pagewrapper-->
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="flaticon-right-arrow"></span></div>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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