Auto Club

Thank you for purchasing this item. We provide support for all of our Items at http://templines.com/, but please make sure you read this documentation first. Thank you so much!

If you are not familiar with HTML and CSS, I highly recommend that you to hire a specialist. It will save your time and you will get only positive emotions while using our product.

Home Page

Let's look at the structure of Landing Page. It includes its own sections with content. On request you can add or remove sections of the site. Please, be careful when removing unwanted sections. It can cause errors in theme.js. All tags have to be closed properly.

Tools to help work:

slides section

<div id="carousel-small" class="owl-carousel enable-owl-carousel" data-items="4" data-navigation="true" data-auto-play="true" 
data-stop-on-hover="true" data-items-desktop="4" data-items-desktop-small="4" data-items-tablet="3" data-items-tablet-small="2">
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  ...
</div>
$(document).ready(function() {
  $(".enable-owl-carousel").each(function(i) {
    $(this).owlCarousel({
      // Here optins
    });
  });
});

Each section has its own class, which affects imaging of the content.

For some sections we use additional scripts which are located in the folder PLUGINS.

All scripts are connected in the basement of the site.

Color switcher settings

Install data attribute data-default-color="true" for change default color

assets/switcher/

<link rel="alternate stylesheet" type="text/css" href="assets/switcher/css/color1.css" title="color1" media="all"
data-default-color="true" />

PAGE PRELOADING EFFECT

It makes waiting process while page loading less boring for the user. It is relevant for large pages with large amount of information just like in our case.

assets/loader/

<!-- Loader -->
<div id="page-preloader"><span class="spinner"></span></div>
<!-- Loader end -->

You can move this code to another page or delete it.

Animated

Developer website (CSS animations)

Developer website (Reveal Animations When You Scroll)

css/animate.css

js/wow.min.js

To add animations in elements

<h2 class="wow zoomIn" data-wow-delay="0.3s">GET IT FOR FREE</h2>

To global disable animations set data-scrolling-animations attribute false for body

<body data-scrolling-animations="false">

responsive carousel slider

Developer website

assets/owl-carousel/

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Contact Form

js/contact_me.js

Email Settings

mail/contact_me.php

Main Styles and Scripts

css/master.css

Global Theme Styles

css/theme.css

Theme Colors

css/color.css

Responsive Styles

css/responsive.css

Theme js

js/theme.js

Icons Fonts

fonts/font-awesome

Debugging

Please for your own changes use custom.css file. It will help you to avoid problems after updating.

css/custom.css