Documentaion- Car Dealer - The Best Car Dealer Automotive Responsive HTML5 Template

Car Dealer Introduction

This documentation will give you an understanding of how Car Dealer template is structured and guide you in performing common functions.

NOTE: we will not respond to any support questions on Item comment section or through e-mail. If this document doesn't answer your questions feel free to open up a private ticket in our support forum

If you want to customize, please contact us here: our support forum

Author: Potenza Global Solutions

Installation

Follow the steps below to get started with your Site Template:

Open the ... /Template Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- Template/css - Stylesheets Folder
- Template/fonts - Fonts Folder
- Template/images - Images Folder
- Template/js - Javacripts Folder
- Template/php - php Folder
- Template/revolution - Revolution slider all files
- Template/index.html - (and All HTML files)
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V5 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.

HTML Structure

The general HTML structure is the same throughout the template. Here is the general HTML structure of the template:

<!DOCTYPE html>
<html lang="en">

<head>
    [Page meta, page css, page title etc...]
</head>

<body>

<!-- preloader -->
<div id="loading"> [LOADER CONTENT] </div>
<!--preloader -->

<!--header -->
<header id="header" class="defualt">
<div class="topbar">
    [TOP BAR CONTENT]
</div>

<div class="menu">
  <nav id="menu" class="mega-menu">
      [MENU CONTENT]
  </nav>
</div>
</header>
<!--header -->

<!--Slider- -->
<section class="slider">
    [SLIDER CONTENT]
</section>
<!--Slider -->

<!--Section 1 -->
<section>
    [SECTION 1 CONTENT]
</section>
<!--Section 1 -->

<!--Section 2 -->
<section>
    [SECTION 2 CONTENT]
</section>
<!--Section 2 -->

<!--footer -->
<footer class="footer">
    [FOOTER_CONTENT]
</footer>
<!--footer -->

<div class="car-top">
    [BACK TO TOP CONTENT]
</div>

[PAGE JAVASCRIPTS HERE]

</body>
</html>

CSS Structure

The general CSS structure is the same throughout the template. Here is the general CSS structure of the template:

<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!-- flaticon -->
<link rel="stylesheet" type="text/css" href="css/flaticon.css" />
<!-- mega menu -->
<link rel="stylesheet" type="text/css" href="css/mega-menu/mega_menu.css" />
<!-- font awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- owl-carousel -->
<link rel="stylesheet" type="text/css" href="css/owl-carousel/owl.carousel.css" />
<!-- magnific-popup -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup/magnific-popup.css" />
<!-- revolution -->
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css" />
<!-- main style -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css" />

Javascript Structure

The general Javascript structure is the same throughout the template. Here is the general Javascript structure of the template:

<!-- jquery  -->
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<!-- popper  -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- mega-menu -->
<script type="text/javascript" src="js/mega-menu/mega_menu.js"></script>
<!-- appear -->
<script type="text/javascript" src="js/jquery.appear.js"></script>
<!-- counter -->
<script type="text/javascript" src="js/counter/jquery.countTo.js"></script>
<!-- owl-carousel -->
<script type="text/javascript" src="js/owl-carousel/owl.carousel.min.js"></script>
<!-- select -->
<script type="text/javascript" src="js/select/jquery-select.js"></script>
<!-- magnific popup -->
<script type="text/javascript" src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- revolution -->
<script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
<!-- custom -->
<script type="text/javascript" src="js/custom.js"></script>

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico"/>

Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section.

<div id="loading">
  <div id="loading-center">
    <img src="images/loader.gif" alt="">
  </div>
</div>

You can update loading animation by replacing loader.gif with your loader.gif file in the images folder.

Logo Settings

The Logo Container can be found in the Header Container - #header. Replace "logo-light.png" with your own logo image URL.

<ul class="menu-logo">
  <li>
    <a href="index.html"><img id="logo_img" src="images/logo-light.png" alt="logo"> </a>
  </li>
</ul>

Note Default height of logo is 36px. you can set height according to your logo type and your requirement.

Color Schemes

You can change your Website's Color Scheme in an instant. There are 2 super easy options to change your website color.

Option 1: You simply need to include an existing color scheme from (css/skins/skin-yourcolor.css) and include inside head See example below:

<link href="css/skins/skin-blue.css" rel="stylesheet" type="text/css" />

Option 2: Change the Color Code in the css/skins/skin-defult.css and include inside head See example below:

<link href="css/skins/skin-defult.css" rel="stylesheet" type="text/css" />

Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font code in top of the style.css file in the CSS folder:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700,700italic,800,800italic,300italic|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i);

To include new font you can simply add another line like this:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,300italic,400italic,600italic,700italic,800italic); 
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900,900italic);

Or add an | separator and paste Roboto:400,300,800,700,600 after default website fonts link.

In order to change the fonts, you will need to edit the above links with your custom font, if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

Changing New Typography

You can add/change the site New Modern Demo Typography, from all fonts used from Google Web Font Services, with the one that suits you the best. You can add below code in head tag:

<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">

To include new Typography you can simply attech style-new.css New Typography CSS file after style.css : See below example.

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style-new.css" />

We have added New Latest Typography with Color Variable CSS in style-new.css file.

Mega menu

CSS3 Responsive Mega Menu is a premium plugin; very easy to implement and customize. Here is the super easy setting you can customize in custom.js:

jQuery('#menu').megaMenu({
      // DESKTOP MODE SETTINGS
      logo_align          : 'left',         // align the logo left or right. options (left) or (right)
      links_align         : 'left',         // align the links left or right. options (left) or (right)
      socialBar_align     : 'left',         // align the socialBar left or right. options (left) or (right)
      searchBar_align     : 'right',        // align the search bar left or right. options (left) or (right)
      trigger             : 'hover',        // show drop down using click or hover. options (hover) or (click)
      effect              : 'fade',         // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
      effect_speed        : 400,            // drop down show speed in milliseconds
      sibling             : true,           // hide the others showing drop downs if this option true. this option works on if the trigger option is "click". options (true) or (false)
      outside_click_close : true,           // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
      top_fixed           : false,          // fixed the menu top of the screen. options (true) or (false)
      sticky_header       : true,           // menu fixed on top when scroll down down. options (true) or (false)
      sticky_header_height: 250,            // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
      menu_position       : 'horizontal',   // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
      full_width          : false,          // make menu full width. options (true) or (false)
      // MOBILE MODE SETTINGS
      mobile_settings     : {
        collapse            : true,         // collapse the menu on click. options (true) or (false)
        sibling             : true,         // hide the others showing drop downs when click on current drop down. options (true) or (false)
        scrollBar           : true,         // enable the scroll bar. options (true) or (false)
        scrollBar_height    : 400,          // scroll bar height in px value. this option works if the scrollBar option true.
        top_fixed           : false,        // fixed menu top of the screen. options (true) or (false)
        sticky_header       : false,        // menu fixed on top when scroll down down. options (true) or (false)
        sticky_header_height: 200           // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
}
});

NoteThere are a lot features and styles (horizontal menu, vertical menu left, vertical menu right, 6 drop down animations, multilevel drop down and much more...). For mega menu please see mega menu documentation in documentation/mega menu for more.

Sticky menu

When you scroll down, the Sticky Header “sticks” to the top of the window and is an exact replica of the main header and menu.

To enable/Disable sticky header follow this simple method:

Just simply by true and false values you can enable or disable sticky menu in mega menu block script in custom.js.

To enable sticky menu use true value. See example below:

sticky_header: true,       // menu fixed on top when scroll down down. options (true) or (false)

To disable sticky menu use false value. See example below:

sticky_header: false,       // menu fixed on top when scroll down down. options (true) or (false)

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Page section padding

You can add this helper class to set section padding top 80px and padding bottom 80px.
Add page-section-ptb class in section tag. See example below:

<section class="... page-section-ptb">
     [YOUR CONTENT]

</section>

Note Use this helper class to maintain all page section spacing. You can also use page-section-pt for only padding top and page-section-pb for only padding bottom.

Section title

You can use this code for your page section title to maintain title style.

<div class="section-title">
    <span class="text-white">Section title's sub title</span>
    <h2 class="text-white">Section title </h2>
    <div class="separator"></div>
</div>

Text color

You can use color in the Text. simply add .text-red ( or any color you want) class where you want to use. See example below:

<div class="text-red">    [YOUR TEXT CONTENT]
</div>

Note We include 4 color helper class in our template text-red, text-white, text-black and text-gray. you can add unlimited color class according to your needs.

Background color

You can use color in the background. simply add .red-bg (or any color you want) class where you want to use. See example below:

<div class="red-bg">    [YOUR CONTENT]
</div>

Note We include 4 background color helper class in our template red-bg, white-bg, dark-gray-bg and gray-bg You can add unlimited background color class according to your needs

Background Images

You can use an image in the background with parallax effect. simply add .bg-1 class where you want to use. you can create your own bg. See example below:

You can use an image in the background with parallax effect. Simply add .bg-1 class where you want to use. You can create your own background image with parallax effect. See example below:

<div class="bg-1">    [YOUR CONTENT]
</div>

Note Use class bg-overlay-... with a bg-1 class if you want to add overly color on the background.

Background overlay

You can add this .bg-overlay-black-10 class to any element in your HTML code to apply overly color on any image or any section. See example below:

<div class="bg-overlay-black-10">
    [YOUR CONTENT]
</div>

Here are some predefined overlay classes you can use:

Class	Description	Class	Description
.bg-overlay-black-10	which means apply black color overlay with 0.10 overlay	.bg-overlay-black-20	which means apply black color overlay with 0.20 overlay
.bg-overlay-black-30	which means apply black color overlay with 0.30 overlay	.bg-overlay-black-40	which means apply black color overlay with 0.40 overlay
.bg-overlay-black-50	which means apply black color overlay with 0.50 overlay	.bg-overlay-black-60	which means apply black color overlay with 0.60 overlay
.bg-overlay-black-70	which means apply black color overlay with 0.70 overlay	.bg-overlay-black-80	which means apply black color overlay with 0.80 overlay
.bg-overlay-black-90	which means apply black color overlay with 0.90 overlay
.bg-overlay-white-10	which means apply white color overlay with 0.10 overlay	.bg-overlay-white-20	which means apply white color overlay with 0.20 overlay
.bg-overlay-white-30	which means apply white color overlay with 0.30 overlay	.bg-overlay-white-40	which means apply white color overlay with 0.40 overlay
.bg-overlay-white-50	which means apply white color overlay with 0.50 overlay	.bg-overlay-white-60	which means apply white color overlay with 0.60 overlay
.bg-overlay-white-70	which means apply white color overlay with 0.70 overlay	.bg-overlay-white-80	which means apply white color overlay with 0.80 overlay
.bg-overlay-white-90	which means apply white color overlay with 0.90 overlay

Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only support RGBA color values.

Text align

You can add this helper class to any element in your HTML code to set text-align

Class	Description
.text-start	which means text-align: left;
.text-end	which means text-align: right;
.text-center	which means text-align: center;

Separator

You can add this helper class to any element in your HTML code to add Separator line. Simply add hr tag where you want to add the line. See example below:

...
 [SECTION 1 CONTENT]
...
</section> <!--Section 1 End-->
  <hr/>
<section> <!--Section 2 Start-->
...
 [SECTION 2 CONTENT]
...

badge

You can add this helper class to any element in your HTML code to make a badge. Simply add badge and bg-danger (or any given below) class where you want to add a badge. See example below:

 <span class="badge bg-danger">badge name</span>

Here are some default badges you can use or you can make your own badge as per your requirement.

Class	Description	Result
badge bg-primary	Primary badge	Primary
badge bg-secondary	Secondary badge	Secondary
badge bg-success	Success badge	Success
badge bg-info	Info badge	Info
badge bg-warning	Warning badge	Warning
badge bg-danger	Danger badge	Danger
badge bg-light	Light badge	Light
badge bg-dark	Dark badge	Dark

Sliders

We include 3 different sliders for you to be used on any Page with 100s of Options. List of the Sliders included are mentioned as follows:

Revolution
Owl carousel
Slick carousel

Revolution

Revolution Slider is a premium plugin, an awesome animated slider that creates eye-catching sliders.

Please find the full online Revolution Slider documentation.

Note The Visual Editor plugin is discontinued by the Slider Revolution, so the Visual Editor plugin is no longer part of the theme. We have Provided Rev Slider only for Demo Purpose.

Note To load Revolution slider locally we include below js in all home pages. You can remove it when you upload the files to your web server. You don't need these js files to load slider on live server. If you remove these js your slider will not work locally.

<!-- SLIDER REVOLUTION 5.0 EXTENSIONS
(Load Extensions only on Local File Systems !
The following part can be removed on Server for On Demand Loading) -->
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.video.min.js"></script>

Owl carousel

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online owl carousel Slider documentation.

Slick carousel

Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

For more information about Slick carousel Click Here.

Shortcodes

Shortcodes are reusable elements. They can be used anywhere on any page by simply copy/paste. Setting up shortcodes is very easy & self-explanatory. Here is the list of Shortcodes included with Car Dealer:

Tabs
accordion
Sections
Counter
Countdown
Contact form
Google map
Font icon
Bootstrap Grid

Tabs

Use the below code to display Tabs:

<div id="tabs">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="tabs01-tab" data-bs-toggle="tab" data-bs-target="#tabs01" type="button" role="tab" aria-controls="tabs01" aria-selected="true">Tab 1 Title</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tabs02-tab" data-bs-toggle="tab" data-bs-target="#tabs02" type="button" role="tab" aria-controls="tabs02" aria-selected="false">Tab 2 Title</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="tabs03-tab" data-bs-toggle="tab" data-bs-target="#tabs03" type="button" role="tab" aria-controls="tabs03" aria-selected="false">Tab 3 Title</button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="tabs01" role="tabpanel" aria-labelledby="tabs01-tab">[TAB 1 CONTENT]</div>
    <div class="tab-pane fade" id="tabs02" role="tabpanel" aria-labelledby="tabs02-tab">[TAB 2 CONTENT]</div>
    <div class="tab-pane fade" id="tabs03" role="tabpanel" aria-labelledby="tabs03-tab">[TAB 3 CONTENT]</div>
  </div>
</div>

NoteMake sure you use unique IDs for each tabs Items and Tab Container.

accordion

Use the below code to display accordion:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>[YOUR ACCORDION CONTENT 1]</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>[YOUR ACCORDION CONTENT 2]</p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion 3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>[YOUR ACCORDION CONTENT 3]</p>
      </div>
    </div>
  </div>
</div>

Sections

Setup your Sections outside the .container element.

<section class="your-section-title">
    <div class="container">
      <div class="row">
        [ YOUR SECTION HERE ]
      </div>
    </div>
</section>

Counter

You can add Counter on the scroll to any Page, use below code to display Counter:

<section class="counter">
<div class="container">
<div class="row">
  <div class="counter-block">
    <i class="glyph-icon flaticon-beetle"> </i>
    <b class="timer" data-to="3968" data-speed="10000"></b>
    <h5>Title 1</h5>
  </div>
  <div class="counter-block">
    <i class="glyph-icon flaticon-beetle"> </i>
    <b class="timer" data-to="5568" data-speed="10000"></b>
    <h5>Title 2/h5>
  </div>
  <div class="counter-block">
    <i class="glyph-icon flaticon-beetle"> </i>
    <b class="timer" data-to="8908" data-speed="10000"></b>
    <h5>Title 3</h5>
  </div>
  <div class="counter-block">
    <i class="glyph-icon flaticon-beetle"> </i>
    <b class="timer" data-to="9968" data-speed="10000"></b>
    <h5>Title 4</h5>
  </div>
</div>
</div>
</section>

Note You can set your counter data in data-to="1234" and set your data speed in data-speed="10000". The default data speed is 10000.

Countdown

You can add Countdown Timer to any Page. You can prefer to use Countdown Timer for "Coming Soon Page" or "Product Countdown Page". Use below code to display countdown Timer:

<div class="countdown">
<ul>
  <li>
    <p class="days_ref">days</p>
    <span class="days">00</span>
  </li>
  <li>
    <p class="hours_ref">hours</p>
    <span class="hours">00</span>
  </li>
  <li>
    <p class="minutes_ref">minutes</p>
    <span class="minutes">00</span>
  </li>
  <li>
    <p class="seconds_ref">seconds</p>
    <span class="seconds">00</span>
  </li>
</ul>
</div>

Also, add this Javascript (update it if you already have) as per your requirement:

  POTENZA.countdownTimer = function () {
      if ($countdownTimer.exists()) {
            $countdownTimer.downCount({
                date: '10/05/2022 12:00:00',
                offset: 400
            });
      }
  };

Note date: '10/05/2022 12:00:00' is default date and time, you can change it as per your requirement

Contact form

Contact form as main part of Contact section, the only thing you need to do is to setup your email address.

We provide 7 working contact form listed below:

Contact form (On contact page)
Request More Info (On product detail page)
Schedule Test Drive (On product detail page)
Make an Offer (On product detail page)
Email to a Friend (On product detail page)
Trade-In Appraisal (On product detail page)
Send Enquiry (On product detail page)

Contact Form Settings

To configure your contact forms, go to TEMPLATE_ROOT/php folder and open both php files contact-form.php and ajax-form.php, then replace demo@domain.com with your email and configure other mail settings. Please refer to the PHP email documentation for detailed information about mail function and parameters.

See exmple below:

// Update Email From:
$to = 'demo@domain.com';
// To:
$to = 'your-email@example.com';

Important Notes

Please find demo@domain.com in both files and replace all demo email with your email.
Make other necessary changes in the PHP files, like To (email), Subject, From (email), etc, as per your requirements.
Please refer to the PHP email documentation for detailed information about mail function and parameters.
Update/Replace Google reCAPTCHA Keys. If you don't Google reCAPTCHA key, go to Google reCAPTCHA website, and create a new key.

reCaptcha Settings

To setup reCaptcha form protection, you will need to obtain a set of Site and Secret keys from the Google reCaptcha Website. Then follow the below steps to setup the key for your form:

Open TEMPLATE_ROOT/php/ajax-form.php file and update/replace secret key.

// Update Google reCAPTCHA Secret Key From:
$secret_key = "Your Google reCAPTCHA Secret Key";
// To:
$secret_key = "6LeCjQkbXYZCBAs7RccGB8CG81p-9PVFbJKdTsgH";

Open TEMPLATE_ROOT/js/forms/recaptcha.js file and update/replace secret key. This file contains multiple site key for multiple forms, so you will have to update them all.

// Update Google reCAPTCHA Site Key From:
recaptcha1 = grecaptcha.render('recaptcha1', {
	'sitekey' : 'Your Google reCAPTCHA Secret Key', //Replace this with your Site key
	'theme' : 'light'
});
// To:
recaptcha1 = grecaptcha.render('recaptcha1', {
	'sitekey' : '6LfYqRkUABCZYBMrLp0FdD0G3j8MwP8kBbwMJMHi', //Replace this with your Site key
	'theme' : 'light'
});

Important Notes

Update/Replace Google reCAPTCHA Keys. If you don't Google reCAPTCHA key, go to Google reCAPTCHA website, and create a new key set.
For detailed information about Google reCAPTCHA integration, please refet Google reCAPTCHA Developer's Guide.

Google map

You can add Embedded Google Maps to any Page using the following setup:

1: Go to Google map and Find your location.
2: Go to Menu from left-bar and click on Share or embed map.
3: Select Embed map & then copy iframe.
4: Paste iframe into your HTML code.

Sample example of google map iframe:

<!--=============  contact-map  -->
<section class="contact-map">
  <div class="container-fluid">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8351288872545!2d144.9556518!3d-37.8173306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b349649%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sin!4v1443621171568" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen>
    </iframe>
  </div>
</section>
<!--=============  contact-map  -->

NoteRemove width, height and style from the iframe. If you want to change it you can change it in CSS from style.css as per your requirement. For more information please visit Google map documentation.

Font icon

We have included Font awesome and flat icon in our template.

1: Font awesome:

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the < i > tag for brevity, but using a < span > is more semantically correct). See example below:

<i class="fa fa-camera-retro"></i>

Note add font-awesome css in head tag after bootstrap.min.css. See example below::

<head> 
  [HEADER TAG]
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<!-- Font awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
</head>

2: Flat icon:

You can place flat Icon just about anywhere using the icon's class name. Flat icon is designed to be used with inline elements we like the < i > tag for brevity. See example below:

<i class="glyph-icon flaticon-beetle"></i>

Note Add flaticon css in head tag after bootstrap.min.css. See example below:

<head> 
  [HEADER TAG]
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<!-- flaticon -->
<link href="css/flaticon.css" rel="stylesheet" type="text/css" /> 
</head>

We have included our flat icon collection with download package under Documentation folder in "my-icon-collection" folder. If you want to update or include any flat icon font follow this two super easy steps:
1. Open flaticon.html from my-icon-collection folder in the browser (We suggest google chrome).
2. Copy class name from below font icon and past it in < i > tag. That's it! See example below:

<i class="glyph-icon flaticon-your-icon-class-name"></i>

If you want to create your own flat icon collection, then go to flat icon official site and make your collection and download collection in Iconfont formate. After download replace flaticon.css and font file with the current file. If you don't replace new files then your flat icon won't work. So replacing your new flaticon.css and font files is a must! After replacing flaticon.css you need to change font face path on top of the CSS.

Here are some YouTube tutorials that will help you how to use flat icon. Click here

Note You must have to place any font-icon file into fonts folder. (e.g. - If you've font-awesome font so you need to put into fonts folder.

Bootstrap Grid

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Live grid example

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

col-1	col-1	col-1	col-1	col-1	col-1	col-1	col-1	col-1	col-1	col-1	col-1
col-4				col-4				col-4
col-4				col-8
col-6						col-6
col-12

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>
</div>

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

<div class="row">
  <div class="col-md-12">.col-md-12</div>
</div>

Note For more information about bootstrap grid system please visit Bootstrap documentation.

Retina Display

The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on the screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Most of the devices use this branded concept for Retina devices like having approximately twice the pixel density of a non-retina device.

If you want to get perfect looking images on Retina screens, for example you build a website where you upload regular images into content, you must always upload 2 images in media.
Add new section which looks like below:

my_image.png - this is the name for standard image (e.g. 100px X 100px)
my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image (e.g. 200px X 200px)

Note To make your website completely retina ready, you have to download ratina.js and include retina.js in your HTML head section. See example below:

<!-- retina -->
<script type="text/javascript" src="js/retina.js"></script>

For more information about retina documentation and to download retina.js Click here.

Browser Support

Car Dealer supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

How to rate this item

If you like our theme and support, please do not forget to rate it with 5 stars in your ‘downloads’ section and write a review in comments as it will add more value to our services!

Just click http://themeforest.net/downloads and you will see this template there. Hit 5 Stars to make us happy and we will make more awesome templates for you :)

Change Log

- Version 4.0.0

08 February 2024

Added: Added 3 New Modern Home Demo
Added: Added New Demo "Electro Home"
Added: Added New Page "About Modern"
Added: Added New Page "Services Modern"
Added: Added New Page "Team Single Modern"
Added: Added New Page "Contact Modern"
Added: Added 2 New Header Styles "Defualt New, Header Fancy"
Updated: Minor code/formatting improvements and fixes.

- Version 3.0.1

22 August 2023

Fixed: Design issue on the Home page Welcome section on iPad view.
Updated: Minor code/formatting improvements and fixes.

- Version 3.0.0

20 December 2021

We have upgraded CarDealer to Bootstrap 5, and Bootstrap 5 is a major rewrite of the entire project. We recommended you to follow bootstrap Migration Guide if you are upgrading car dealer 2.2 (or lower) to car dealer 2.3

Updated: Updated popper to latest version
Updated: Bootstrap 4.1.1 to v5.0.2
Updated: jQuery 3.3.1 to v3.6.0
Updated: isotope 3.0.5 to v3.0.6
Updated: jquery-ui 1.11.4 to v1.13.0

- Version 2.3

15 May 2018

We have upgraded CarDealer to Bootstrap 4, and Bootstrap 4 is a major rewrite of the entire project. We recommended you to follow bootstrap Migration Guide if you are upgrading car dealer 2.2 (or lower) to car dealer 2.3

Added: popper.js
Updated: Bootstrap 3.3.7 to v4.1.1
Updated: jQuery 1.12.0 to v3.3.1
Updated: Updated isotope to latest version
Updated: Updated jquery magnific popup to latest version
Updated: Updated owl carousel to latest version

- Version 2.2

01 May 2018

Added: Car Service Homepage
Added: Car Directory Homepage
Added: Car Listing Homepage
Added: Landing Homepage

- Version 2.1

15 Sep 2017

Fixed: Back to top mobile device issue
Fixed: Responsive menu spacing
Fixed: Home 7 menu contact hover drop down position issue
Fixed: Home 7 sticky menu height decrease
Updated: Minor code/formatting improvements and fixes.

- Version 2.0

24 June 2017

Added: 4 new Home pages
Updated: Minor code/formatting improvements and fixes.

- Version 1.2

30 March 2017

Fixed: Contact form issue
Updated: Minor code/formatting improvements and fixes.

- Version 1.1

22 March 2017

Added: 5 new contact PHP form.
Added: 5 new GIF pre loader.
Fixed: Contact form auto fill issue
Updated: Minor code/formatting improvements and fixes.

Version 1.0

- Initial Release

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Shutterstock Shutterstock
Pexels Pexels

Scripts

CSS & Fonts

Bootstrap
Font Awesome
Flaticon
Google Fonts
--Open sans
--Roboto

Note For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit the template.