AutoServicing - Auto Service & Garage/Workshop Website Template

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

HTML Files:

Home page
Home page v.2
Home page v.3
Home page v.4
Testimonials page
Our Team page
Pricing Table page
Cooming Soon page
Sign up page
Sign in page
404 Not Found page
About page
Our Mission page
Services page V.1
Services page V.2
Single Service page V.1
Single Service page V.2
Gallery page V.1
Gallery page V.2
Appointment
Blog page full width
Blog page masonary
Blog page right sidebar
Blog page left sidebar
Single Blog page V.1
Single Blog page V.2
Single Blog page V.3
Contact page
Testimonials page dark
Our Team page dark
Pricing Table page dark
Cooming Soon page dark
404 Not Found page dark
About page dark
Our Mission page dark
Services page dark V.1
Services page dark V.2
Single Service page dark V.1
Single Service page dark V.2
Gallery page dark V.1
Gallery page dark V.2
Appointment page dark
Blog page Full width dark
Blog page masonary dark
Blog page right sidebar dark
Blog page left sidebar dark
Single Blog page dark V.1
Single Blog page dark V.2
Single Blog page dark V.3
Contact page dark

Template Features:

Multi Page Demos
Easy to customize
HTML5 & CSS3
Clean & Simple Design
Fully Responsive Layout
Crossbrowser Compatible with Edge, IE9+, Firefox, Safari, Opera, Chrome
W3 Valid
Retina ready
Font Awesome 400+ icons
Ionicons
Flaticon
Powered with Bootstrap
Smooth animation
Working contact form ajax form submission with validation
Google Maps easy to setup via data attributes
Responsive video
Well documented

Item Name : AutoServicing | Auto Service & Workshop HTML5 Website Template
Created: October 10, 2017
Version 0.1
By: EnvyTheme
Email: support@envytheme.com

Unzip the archive and find out the folder AutoServicing_Files_0.1. There are all the template files in this folder.

The file and folder structure is something like this:

assets/css — folder with css files.
assets/fonts — folder with icon fonts.
assets/img — folder with image files.
assets/include — folder with sendmail.php files.
assets/js — folder with Javascript files.

Upload the template files to server with the help of one of the FTP-clients like FileZilla.

These are the css files which are loaded into the template in Head Section.

                    
                        <!-- Favicon -->
                        <link rel="icon" sizes="16x16" href="assets/img/favicon-icon.png">
                        <!-- Bootstrap CSS -->
                        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
                        <!-- Font-awesome CSS -->
                        <link rel="stylesheet" href="assets/css/font-awesome.css">
                        <!-- Flaticon CSS -->
                        <link rel="stylesheet" href="assets/css/flaticon.css">
                        <!-- Ionicons CSS -->
                        <link rel="stylesheet" href="assets/css/ionicons.min.css">
                        <!-- Owl Carousel CSS -->
                        <link rel="stylesheet" href="assets/css/owl.carousel.css">
                        <!-- Magnific Popup CSS -->
                        <link rel="stylesheet" href="assets/css/magnific-popup.css">
                        <!-- Swiper CSS -->
                        <link rel="stylesheet" href="assets/css/swiper.min.css">
                        <!-- Datepicker CSS -->
                        <link rel="stylesheet" href="assets/css/datepicker.css">
                        <!-- Animate CSS -->
                        <link rel="stylesheet" href="assets/css/animate.css">
                        <!-- Style CSS -->
                        <link rel="stylesheet" href="assets/css/style.css">
                        <!-- Responsive CSS -->
                        <link rel="stylesheet" href="assets/css/responsive.css">

This is the basic structure of Nav Menu:

         
            <!-- Start Main Menu Area -->
            <div class="main-menu-area" data-spy="affix" data-offset-top="55">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="logo">
                                <a href="index.html"><img src="assets/img/logo.png" alt="Logo"></a>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <nav class="navbar navbar-default">
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar top-bar"></span>
                                        <span class="icon-bar middle-bar"></span>
                                        <span class="icon-bar bottom-bar"></span>
                                    </button>
                                </div>

                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <div class="main-menu">
                                        <ul class="nav navbar-nav navbar-right">
                                            <li class="dropdown active">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                    Home <i class="fa fa-angle-down"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li class="active"><a href="index.html">Home default</a></li>
                                                    <li><a href="index2.html">Home V.1</a></li>
                                                    <li><a href="index-video-bg.html">Home V.2</a></li>
                                                    <li><a href="index3.html">Home V.3</a></li>
                                                </ul>
                                            </li>
                                            
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                    Pages <i class="fa fa-angle-down"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="testimonials.html">testimonials</a></li>
                                                    <li><a href="our-team.html">our team</a></li>
                                                    <li><a href="pricing.html">Pricing Table</a></li>
                                                    <li><a href="cooming-soon.html">Cooming Soon</a></li>
                                                    <li><a href="signup.html">Sign up</a></li>
                                                    <li><a href="signin.html">Sign in</a></li>
                                                    <li><a href="404.html">404 Not Found</a></li>
                                                    <li class="dropdown-menu right-top">
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                            Page Two <i class="fa fa-angle-right"></i>
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a href="#">Sub Page</a></li>
                                                            <li><a href="#">Sub Two</a></li>
                                                        </ul>
                                                    </li>
                                            
                                                    <li><a href="#">Page Three</a></li>
                                                    <li><a href="#">Page Four</a></li>
                                                </ul>
                                            </li>
                                            
                                            <li><a href="about-us.html">About</a></li>
                                            <li><a href="our-mission.html">Our Mission</a></li>
                                            
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                    Services <i class="fa fa-angle-down"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="services.html">Services V.1</a></li>
                                                    <li><a href="services-v2.html">Services V.2</a></li>
                                                    <li><a href="single-service.html">Single Service V.1</a></li>
                                                    <li><a href="single-service-v2.html">Single Service V.2</a></li>
                                                </ul>
                                            </li>
                                            
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                    Gallery <i class="fa fa-angle-down"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="gallery-v1.html">Gallery V.1</a></li>
                                                    <li><a href="gallery-v2.html">Gallery V.2</a></li>
                                                </ul>
                                            </li>
                                            
                                            <li><a href="appointment.html">Appointment</a></li>
                                            
                                            <li class="dropdown">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                    Blog <i class="fa fa-angle-down"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="blog.html">Blog Full width</a></li>
                                                    <li><a href="blog-masonary.html">Blog masonary</a></li>
                                                    <li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
                                                    <li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
                                                    <li><a href="single-blog.html">Single Blog V.1</a></li>
                                                    <li><a href="single-blog-style2.html">Single Blog V.2</a></li>
                                                    <li><a href="single-blog-left-sidebar.html">Single Blog V.3</a></li>
                                                </ul>
                                            </li>
                                            
                                            <li><a href="contact-us.html">Contact</a></li>
                                            <li><a href="#search"><i class="fa fa-search"></i></a></li>
                                        </ul>
                                    </div>
                                </div><!-- /.navbar-collapse -->
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Main Menu Area -->

These are the JS files which are loaded into the template before the end of the HEAD and BODY Section.

                        
								<!-- jQuery min js -->
							<script src="assets/js/jquery-1.12.4.min.js"></script>
                            <!-- Bootstrap JS file -->
                            <script src="assets/js/bootstrap.min.js"></script>
                            <!-- Owl-Carousel JS file -->
                            <script src="assets/js/owl.carousel.min.js"></script>
                            <!-- Magnific Popup JS file -->
                            <script src="assets/js/jquery.magnific-popup.min.js"></script>
                            <!-- Mixitup JS file -->
                            <script src="assets/js/mixitup.min.js"></script>
                            <!-- Swiper JS file -->
                            <script src="assets/js/swiper.jquery.min.js"></script>
                            <!-- Datepicker JS file -->
                            <script src="assets/js/datepicker.js"></script>
                            <!-- WOW JS file -->
                            <script src="assets/js/wow.min.js"></script>
                            <!-- Isotop JS JS file -->
                            <script src="assets/js/isotope.pkgd.min.js"></script>
                            <!-- Waypoints JS file -->
                            <script src="assets/js/waypoints.min.js"></script>
                            <!-- Counter JS file -->
                            <script src="assets/js/jquery.counterup.min.js"></script>
                            <!-- RipplesJS -->
                            <script src="assets/js/jquery.ripples-min.js"></script>
                            <!-- YTPlayer JS -->
                            <script src="assets/js/jquery.mb.YTPlayer.min.js"></script>
                            <!-- Jarallax JS -->
                            <script src="assets/js/jarallax.min.js"></script>
                            <!-- Parsley JS -->
                            <script src="assets/js/parsley.min.js"></script>
							<!-- jQuery Google Map JS file -->
                            <script src="assets/js/jquery.googlemap.js"></script>
							<!-- Google Map api -->
                            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0jIY1DdGJ7yWZrPDmhCiupu_K2En_4HY"></script>
                            <!-- Custom JS file -->
                            <script src="assets/js/active.js"></script>

This template has a responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap CSS.

The general template structure is the same throughout the template, each of the part is under a section with a section id name. Here is the general structure:

                    
                        <!-- Start Count-Down Area -->
                        <div class="count-down-area count-bg jarallax">
                            <div class="container">
                                <div class="row">
                                    <div class="col-sm-6 col-md-3">
                                        <div class="count-down-boxed text-center">
                                            <span class="count-icon"><i class="ion-ios-people-outline"></i> <span class="count-number counter">12,500</span></span>
                                            <h3 class="count-info">Happy Clients</h3>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <div class="count-down-boxed text-center">
                                            <span class="count-icon"><i class="ion-ios-partlysunny-outline"></i> <span class="count-number counter">17,500</span></span>
                                            <h3 class="count-info">Completed Projects</h3>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <div class="count-down-boxed text-center">
                                            <span class="count-icon"><i class="ion-ios-paperplane-outline"></i> <span class="count-number counter">15,500</span></span>
                                            <h3 class="count-info">WINNING AWARD</h3>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <div class="count-down-boxed text-center">
                                            <span class="count-icon"><i class="ion-ios-thunderstorm-outline"></i> <span class="count-number counter">14,500</span></span>
                                            <h3 class="count-info">Hours Worked</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Count-Down Area -->

We have added some utility classes with media queries for different screen sizes. All of the custom responsive css code are under the responsive.css file at the bottom showing, how many screen size we truck for media query:

Display Size: Details

(min-width: 992px) and (max-width: 1200px)

Display Size:	Details
(min-width: 992px) and (max-width: 1200px)	`/* Here is the css code for (min-width: 992px) and (max-width: 1200px) / / Large size tablet and tablet landscape screen */ @media only screen and (min-width: 992px) and (max-width: 1200px) { }`
(min-width: 768px) and (max-width: 991px)	`/* Here is the css code for (min-width: 768px) and (max-width: 991px) / / medium Devices, Tablets and tablet portrait screen */ @media only screen and (min-width: 768px) and (max-width: 991px) { }`
max-width : 767px	`/* Here is the css code for max-width : 767px: / / Small Devices, Mobile, SmartPhone, Iphone */ @media only screen and (max-width: 767px) { }`

                                
                                    /* Here is the css code for (min-width: 992px) and (max-width: 1200px) */

                                    /* Large size tablet and tablet landscape screen */
                                    @media only screen and (min-width: 992px) and (max-width: 1200px) {
                                    
                                    }

(min-width: 768px) and (max-width: 991px)

                                
                                /* Here is the css code for (min-width: 768px) and (max-width: 991px) */

                                /* medium Devices, Tablets and tablet portrait screen */
                                @media only screen and (min-width: 768px) and (max-width: 991px) {

                                }

max-width : 767px

                                
                                /* Here is the css code for max-width : 767px: */

                                /* Small Devices, Mobile, SmartPhone, Iphone */
                                @media only screen and (max-width: 767px) { 

                                }

There are use Swiper Slider for different part of the slide in the template the all of the settings of Swiper Slider in active.js file, here are a settings example:

Number of Col: jQuery Settings

6 Column

Number of Col:	jQuery Settings
6 Column	`// Default Slider var swiper1 = new Swiper('.swiper1', { pagination: '.swiper-pagination1', paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 0, effect: 'coverflow', speed: 700, });`

                
                    // Default Slider
					var swiper1 = new Swiper('.swiper1', {
					pagination: '.swiper-pagination1',
					paginationClickable: true,
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					spaceBetween: 0,
					effect: 'coverflow',
					speed: 700,
					});

There are use Owl Carousel for different part of the slide in the template the all of the settings of owl Carousel in active.js file, here are a settings example:

Number of Col: jQuery Settings

6 Column

Number of Col:	jQuery Settings
6 Column	`// Client Slides $(document).ready(function(){ $(".partner-slides").owlCarousel({ dots: false, autoplay: true, loop: true, margin:20, autoplayHoverPause: true, nav:false, smartSpeed: 500, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:6 } } }); });`

                
                    // Client Slides
                    $(document).ready(function(){
                        $(".partner-slides").owlCarousel({
                            dots: false,
                            autoplay: true,
                            loop: true,
                            margin:20,
                            autoplayHoverPause: true,
                            nav:false,
                            smartSpeed: 500,
                            responsive:{
                                0:{
                                    items:1
                                },
                                600:{
                                    items:3
                                },
                                1000:{
                                    items:6
                                }
                            }
                        });
                    });

The preloader used CSS3 animation system
CSS animated preloader
It's very easy to use, it have to use top of the page under the body class start. Here are some examples:

                    
                    <!-- Preloader -->
                    <div class="site-preloader-wrap">
                        <div class="cssload-loader"></div>
                    </div>
                    <!-- End Preloader -->

The Contact form html there have include jQuery form validation with the backend and include php file for email send system, the php email system function keeps under email.php file in the main folder, code example is as follows :

                    
                        <div class="contact-form-area">
                            <h2 class="area-title">Get In Touch</h2>
                            <div class="row">
                                <div class="col-sm-5 col-md-4">
                                    <div class="contact-img-bg"></div>
                                </div>
                                
                                <div class="col-sm-7 col-md-8">
                                    <form id="contatc_form" method="POST" action="assets/include/sendmail.php" name="myform">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Name</label>
                                                <input type="text" class="form-control" id="contact_name" name="name" placeholder="Name" required="" data-parsley-minlength="4"/>
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Email</label>
                                                <input type="email" class="form-control" name="email" id="contact_email" placeholder="Email" required="">
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Subject</label>
                                                <input type="text" class="form-control" name="sub" id="contact_subject" placeholder="Subject" required="" data-parsley-minlength="4" restrict="A-Z\a-z\0-9"/>
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label>Phone Number</label>
                                                <input type="text" class="form-control" name="phone" id="contact_phone" placeholder="Phone Number" data-parsley-type="integer" data-parsley-minlength="6" data-parsley-minlength-message="minlength six number" data-parsley-type="digits" data-parsley-type-message="Only numbers" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$" required="" />
                                            </div>
                                        </div>

                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label>Message</label>
                                                <textarea id="contact_message" class="form-control" name="message" rows="6" placeholder="Message" required="" data-parsley-trigger="keyup" data-parsley-minlength="10" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 10 character comment.." data-parsley-validation-threshold="10" restrict="A-Z\a-z\0-9"></textarea>
                                        </div>
                                    
                                        <div class="g-recaptcha" data-sitekey="6LeMly8UAAAAAG8FJH-xbRYPyV825xNA3KzwWtcr"></div>
                                        <div id="contact_send_status"></div>
                                            <button type="submit" class="btn theme-btn">Send Message</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

assets/include/sendmail.php file

Go to the URL

The Google map settings is under map.scripts.js file. The Map Default code looks like this:

                    
                    <!-- Google Map Area -->
                    <div id="map"></div>
                    
                    <!-- Google Map Area -->
                    // Google Map
					$("#map").googleMap();
					$("#map").addMarker({
						coords: [40.712784, -74.005941]
					});
                    
                    
                    <!-- Google Map api -->
                    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0jIY1DdGJ7yWZrPDmhCiupu_K2En_4HY&"></script>

By default, the template loads Roboto Web font from Google Web Font Services, you can change the font with the one that suits you best.

You will find the font code in the "style.css" file in the "css" folder:

                
                @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700|Roboto:300,400,500,700');

Note: All images are used for preview purpose only and not included in the final purchase files.

http://getbootstrap.com/
https://owlcarousel2.github.io/OwlCarousel2/
http://dimsemenov.com/plugins/magnific-popup/
http://idangero.us/swiper/#.WeCINzDwG01
https://jqueryui.com/datepicker/
https://daneden.github.io/animate.css/
https://www.kunkalabs.com/mixitup/
http://mynameismatthieu.com/WOW/
https://isotope.metafizzy.co/
https://github.com/bfintal/Counter-Up
https://github.com/sirxemic/jquery.ripples
https://github.com/pupunzi/jquery.mb.YTPlayer
https://github.com/nk-o/jarallax
http://parsleyjs.org/doc/
https://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/

Images from:
http://freepik.com/
http://unsplash.com/

Video from:
http://youtube.com/

Google Fonts:
Roboto

Icon Fonts:
Font Awesome Icon Font
Flaticon
Ionicons

Again, thank you for purchasing this Template!

If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/envytheme ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.

Email: support@envytheme.com

AutoServicing Documentation