Thank you very much for purchasing.
CarForYou - Responsive Car Dealer HTML5 Template.
HTML Structure
This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!
The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length. For example, the '#about_car' element has a class of 'col-sm-8' and the '#car_images' element has a class of 'col-sm-4'. The total columns equals 12 columns.
<section class="section-padding">
<div class="container">
<div class="row">
<div id="about_car" class="col-sm-8"></div>
<div id="car_images" class="col-sm-4"></div>
</div>
</div>
</section>
Note: If you want to add padding in section use class="section-padding" 110px padding top & 110px padding bottom added in section. You don't need padding remove class="section-padding".
Site Logo
You can change the main site logo with change this code:
<div class="logo">
<a href="index.html"><img src="assets/images/logo.png" alt="Logo" /></a>
</div>
You can change the main site navigation with change this code:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
....
<li ><a href="#">Contact Us</a></li>
</ul>
Section Heading
Use this code for section heading.
<section class="section-padding">
<div class="container">
<div class="section-header text-center">
<h2>Our Services</h2>
<p>Lorem Ipsum is simply dummy text.</p>
</div>
</div>
</section>
Section Background Color
<section class="primary-bg">
<div class="container">
......
</div>
</section>
Note: If you want to red background color in section use class="primary-bg"
<section class="secondary-bg">
<div class="container">
......
</div>
</section>
Note: If you want to black background color in section use class="secondary-bg"
<section class="dark-bg">
<div class="container">
......
</div>
</section>
Note: If you want to black background color in section use class="dark-bg"
<section class="gray-bg">
<div class="container">
......
</div>
</section>
Note: If you want to black background color in section use class="gray-bg"
In this section you can change your social media links and copyright text with your own name or Footer Categores Links and App URL.
Note: You can see the complete list of font icons here!
Countdown
You can change the event countdown time with change this code in (assets/js/countdown_date.js):
/*------------------------------------------------------------------
Countdown
-------------------------------------------------------------------*/
$(function(e) {
var endDate = "march 22, 2017";
$('.countdown.styled').countdown({
date: endDate,
render: function(data) {
$(this.el).html("" + this.leadingZeros(data.days, 2) + " Days" + this.leadingZeros(data.hours, 2) + " Hours" + this.leadingZeros(data.min, 2) + " Minutes" + this.leadingZeros(data.sec, 2) + " Seconds");
}
});
});
Note: Change date time automatically set.
FontAwesome Icon Packs
You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!
How to Set the Template Color
It's easy to set the color which you want for your template, you just need to change the below line code:
- Open any template .html file which you want to set the color(example index.html).
- Find below line of code in <head> section:
<!-- Custom Colors --> <!----> <!----> <!----> <!----> <!----> <!----> - SET your favorite color (example: ORANGE) and make HTML comment all the other colors line like this:
<!-- Custom Colors --> <!----> <!----> <!----> <!----> <!----> - Just Save the template (CTRL+S) and see the result in browser!
CSS Structure
I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 4 additional CSS files:
- bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
- font-awesome.min.css - CSS stylesheets for font icon packs.
- owl.carousel.css - This stylesheet used for styling the Banner slideshow.
- owl.transitions.css - This stylesheet used for styling the Banner transitions.
The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:
/*===========================
Table of CSS
1.1. Typography
1.2. Button
1.3. dark-overlay
1.4. Space margins and padding
1.5. Form
1.6. Table
1.7. Section-background-color & sectino-heading
1.8 Tabs
1.9. parallex-background
1.10. Modal
2. Header
2.1 Navigation & Dropdown Menu
3. Home-Page
3.1. Banner
3.2. Filter-Form
3.3. About-Us-Section
3.4. Recently-Listed-Cars
3.5. Fun-Facts
3.6. Featured-Cars
3.7. Trending-Cars
3.8 Testimonial-Section
3.9. Blog-Section
3.10. Popular-Brands
3.11. Login / Register / Forgot password
3.12. Footer
4. Home-Page-2
4.1. Header
4.2. Banner
4.13. Filter-Form
4.4. About-us
4.5. Fan-Facts
4.6. Our-Services
4.7. Testimonial
4.8. Help
5. Inner-Page-Heading-Section
6. Breadcrumb
7. Listing-Page
8. Listing-grid-Style
9. Listing-Detail
10. Contact-Us-Page
11. FAQ-Page
12. About-Us-Page
12.1. Why-Choose-Us-Section
12.2. Meet-the-Team-Section
13. 404-Page
14. Our-Services-Page
15. Our-Blog-Page
15.1. Aritcle
15.2. Comment-List
15.3. Page-Pagination
15.4. Side-Bar-Widgets
15.5. Popular-Posts
15.6. Blog-Categories
15.7. Blog-Tag
16. Profile-page
16.1. Post-a-vehicle
16.2. my-vehicles
17. Dealer-profile
18. Dealers-list
19. Compare-Page
20. Coming-Soon-Page
21. Responsive CSS
===========================*/
CSS styles for support all kinds of different screen sizes
If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.
Scripts
This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.