Fully responsive multi-page template built on Bootstrap 3 Framework.
Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
Carros is a high quality 3 in 1 automotive HTML5 template that is suitable for building automotive websites. If your business is tied with car servicing, workshops or you want to open online parts store, Carros would be a great solution when you decide to build your brand-new business website. The template consists of 3 large HTML packs with more than 30 HTML files. Each pack represents different website scenario: auto repair service, auto tuning service, auto parts retailer. All pages and sections are interchangeable across the template which delivers great flexibility with a lot of combination options. Carros is built on Bootstrap 1170px grid, it’s fully responsive and retina-ready which means amazing mobile user experience.
The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Carros | Repair shop</title> <!-- Disable tap highlight on IE--> <meta name="msapplication-tap-highlight" content="no"> <!-- Add to homescreen for Chrome on Android--> <meta name="mobile-web-app-capable" content="yes"> <meta name="application-name" content=""> <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png"> <!-- Add to homescreen for Safari on iOS--> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Repair shop"> <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png"> <!-- Tile icon for Win8 (144x144 + tile color)--> <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> <meta name="msapplication-TileColor" content="#2F3BA2"> <!-- Color the status bar on mobile devices--> <meta name="theme-color" content="#2F3BA2"> <!-- Google fonts--> <link href="https://fonts.googleapis.com/css?family=Raleway:400,700%7CRoboto+Slab:300,400,700" rel="stylesheet"> <!-- libs styles--> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/custom-datepicker.css"> <link rel="stylesheet" href="css/jquery.timepicker.css"> <link rel="stylesheet" href="css/nouislider.min.css"> <link rel="stylesheet" href="css/select2.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/blueimp-gallery.min.css"> <!-- Icon pack--> <link rel="stylesheet" href="css/flaticon.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/pe-icon-7-stroke.css"> <!-- Custom styles--> <link rel="stylesheet" href="style.css"> <script> // Picture element HTML5 shiv document.createElement("picture"); </script> <script src="js/vendor/picturefill.min.js" async></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="home" class="page-home">
Main template features
In the zip package you download you will find 2 folders: HTML and DOCUMENTATION.
Plugin Name | Description |
---|---|
jQuery |
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. |
Modernizr |
Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. |
Equal Heights |
Simple jQuery plugin to equalize heights of multiple elements on a page. |
Jarallax |
High-Performance JavaScript Parallax Effect |
imagesLoaded |
Detects when images have been loaded. |
Masonry |
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. |
Isotope |
Filter & sort layouts. |
blueimp Gallery |
A touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. |
Counter-Up |
Counter-Up is a jQuery plugin that animates a number from zero (counting up towards it). |
bootstrap-datepicker |
Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. |
TimePicker |
A lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar. |
noUiSlider |
noUiSlider is a lightweight JavaScript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10. |
bootstrap-validator |
A user-friendly HTML5 form validation jQuery plugin for Bootstrap. |
Select2 |
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. |
Owl Carousel |
Responsive carousel slider. |
Sly |
JavaScript library for one-directional scrolling with item based navigation support. |
jQuery Mouse Wheel Plugin |
A jQuery plugin that adds cross-browser mouse wheel support with delta normalization. |
jQuery Easing Plugin |
A jQuery plugin from GSGD to give advanced easing options. |
Waypoints |
Waypoints is the easiest way to trigger a function when you scroll to an element. |
Here's a list of the stylesheet files we are using with this template, you can find more information opening each file:
File Name | Description |
---|---|
css/bootstrap.min.css |
Bootstrap base CSS file. |
css/animate.css" |
Animate.css - library for creating animation effects. |
css/custom-datepicker.css |
Datepicker custom style |
css/jquery.timepicker.css |
|
css/nouislider.min.css |
|
css/select2.min.css |
|
css/owl.carousel.min.css |
Owl carousel - CSS styling for owl carousel slider. |
css/blueimp-gallery.min.css |
Blueimp gallery - used for styling portfolio galleries. |
css/flaticon.css |
|
css/font-awesome.min.css |
The iconic font and CSS toolkit. |
css/pe-icon-7-stroke.css |
Pixeden Stroke 7 Icon Font Set. |
css/style.css |
Main Stylesheet of the template - where you will find most of the customizable CSS. |
css/style-rtl.css |
RTL Stylesheet |
Here's a list of the javascript files we are using with this template.
Plugin Filename | Description |
---|---|
js/google-map.js |
|
js/vendor/jquery-3.1.1.min.js |
jQuery library. Latest version |
js/vendor/modernizr-2.8.3.min.js |
Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. |
js/vendor/jquery.easing.min.js |
A jQuery plugin from GSGD to give advanced easing options. |
js/rem.min.js |
A polyfill to parse CSS links and rewrite pixel equivalents into head for non supporting browsers. |
js/vendor/wNumb.js |
JavaScript Number & Money formatting |
js/picturefill.min.js |
A responsive image polyfill. |
js/jquery.mousewheel.min.js |
A jQuery plugin that adds cross-browser mouse wheel support with delta normalization. |
js/imagesloaded.pkgd.min.js |
Checks if all images are loaded or confirmed broken. That allows to build masonry grid correctly. |
js/jquery.waypoints.min.js |
Tracing user's scrolling. Used in combo with Animate.css to create onscroll animations. |
js/sly.min.js |
JavaScript library for one-directional scrolling with item based navigation support. |
js/bootstrap.min.js |
Bootstrap's javascript file. |
js/jarallax.min.js |
Creates parallax effect. |
js/jarallax-video.min.js |
|
js/masonry.pkgd.min.js |
Creates photo portfolio layout. |
js/isotope.pkgd.min.js |
Filters portfolio categories. |
js/jquery.counterup.min.js |
Animated counters in fun facts section. |
js/jquery.equalheights.min.js |
This plugin sets pricing tables to the equal heights. |
js/owl.carousel.min.js |
Carousel slider for testimonials section. |
js/blueimp-gallery.min.js |
Inits portfolio gallery. |
js/bootstrap-datepicker.min.js |
Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style. |
js/jquery.timepicker.min.js |
|
js/nouislider.min.js |
noUiSlider is a lightweight JavaScript range slider library. |
js/select2.min.js |
Custom selects |
js/select2-locate-en.js |
|
js/validator.min.js |
A user-friendly HTML5 form validation jQuery plugin for Bootstrap. |
js/main.js |
js file for initialization and customization of the plugins found above. |
navbar-default, navbar-accent, navbar-dark
<header class="page-header"> <nav class="navbar navbar-[class-theme] navbar-repair"> <div class="navbar-header">
Date formats https://bootstrap-datepicker.readthedocs.io/en/latest/options.html
$('.pick-date').datepicker({ maxViewMode: 0, autoclose: true, format: "mm/dd/yyyy" });
$('.time-pick').timepicker({ 'showDuration': true, 'timeFormat': 'H:i', 'disableTextInput': true });
if ($(".select2").length) { $(".select2").select2({ width: '100%' }); } $.fn.validator.Constructor.INPUT_SELECTOR = ':input:not([type="submit"], button):enabled'; var formsValid = $('form[data-toggle="validator"]'); formsValid.validator({ focus: false }).on('submit', function(e) { if (e.isDefaultPrevented()) { // handle the invalid form... } else { // everything looks good! } });
Documentation https://refreshless.com/nouislider/
noUiSlider.create(sliderRange, { start: [15, 2451], connect: true, range: { min: 1, max: 5000 }, format: wNumb({ decimals: 3, thousand: '.', prefix: '$ ' }) });
Open js/main.js
file with any text editor and jump to the 230 line. You can change delay and duration of the counters animation. Just set those parameters in milliseconds.
$("[data-counter]").counterUp({ delay: 10, time: 2000 });
$('.parallax').jarallax({ speed: 0.74, type: 'scroll' });
Support mouseDrag, touchDrag
For more information, please refer to Owl carousel official documentation.
// Carousels var catalogCarousel = $(".main-product__carousel"); var testimonials = $('.testimonials-carousel'); var brandsCarousel = $(".brands-carousel"); var aboutGallery = $(".section-about__carousel");
Video link '3ET1wM5qUpM'
var videoTour = '3ET1wM5qUpM';
We've used the following images, icons or other files as listed.
Note: All images you may have seen in the live preview are not included to the final purchase.
Buy license pattern https://www.shutterstock.com/pic-358467122.html
Once again, thank you so much for purchasing this item. As we said at the beginning, we'd be glad to help you if you have any questions relating to this item. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Our profile page - http://themeforest.net/user/netgon