Rota Auto Service — Mechanic Workshop HTML – createIT support – the place to get all the help for your WordPress Themes

Support

Outsourcing

Rota Auto Service — Mechanic Workshop HTML Template – Responsive HTML5 Template

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

Scope of free support

We can help you with:

Responding to questions or problems regarding the item and its features

Fixing any discovered item’s bugs

Providing updates to ensure compatibility with new software versions

Was this article helpful ?

HTML Structure

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

<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-8">.col-md-8</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-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</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>

</div>

</div>

</div>

Page structure

Below you will find default page structure :

<!DOCTYPE html>
   <html>
   <head>
 
   [css]
 
   </head>
   <body>
 
   [header]
   [main menu]
 
   <!-- main container -->
   <div id="wrapper">
 
     [component 1]
 
     <!-- fullwidth element -->
       </div>
         [fullwidth parallax]
       <div class="container">
     <!-- / fullwidth element -->
 
     [component 6]
 
 
   </div>
   <!-- / main container -->
 
 
   [footer]
 
   [javascripts]
 
   </body>
   </html>

<!DOCTYPE html>

<html>

<head>

[css]

</head>

<body>

[header]

[main menu]

[component 1]

</div>

[fullwidth parallax]

[component 6]

</div>

[footer]

[javascripts]

</body>

</html>

Was this article helpful ?

CSS files and structure

If you would like to edit the color, font, or style of any elements, you would do the following:

#primaryContent a {color: #someColor;}

1	#primaryContent a {color: #someColor;}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

#wrap #primaryContent a {color: #someColor;}

1	#wrap #primaryContent a {color: #someColor;}

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

<head>
    (..)
    <link rel="stylesheet" type="text/css" href="css/motive.css">
    (..)
    </head>

<head>

(..)

(..)

</head>

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

<!-- Awesome Icons -->
        <i class="fa fa-cog"></i>

1 2	<!-- Awesome Icons --> <i class="fa fa-cog"></i>

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

style.less
1. Font Awesome
2. Typography
3. Buttons
4. Form
5. Menu
6. Widget
7. Footer
8. Slick
9. Icon BOx
10. Price table
11. Testimonials
12. Warning section
13. Coupons
14. Careers section
15. About Us
16. Light Gallery
17. Date picker
18. Utilities

Was this article helpful ?

Javascript Components

JavaScript files:

jQuery
slick carousel http://kenwheeler.github.io/slick/
light gallery http://sachinchoolur.github.io/lightGallery/
datapicker bootstrap https://bootstrap-datepicker.readthedocs.org/en/latest/
isotope http://isotope.metafizzy.co/
browser js
device js

Screenshot

Was this article helpful ?

Navigation

Navigation is really important part of the theme. In Rota Auto Service — Mechanic Workshop HTML Template we have one version of the navigation bar. The menu markup also contains search bar.

Default Navigation

HTML markup

<nav class="navbar ct-u-backgroundLightGray hidden-xs">
    <div class="container ct-navbar-container">

        <div class="row">

            <ul class="navbar-left ct-u-paddingBoth20 col-lg-9">
                <li class="active"><a href="index.html"><span>Home</span></a></li>
                <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>About us</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="about-us.html">Who we are</a></li>
                        <li><a href="history.html">Our history</a></li>
                        <li><a href="team.html">Meet the team</a></li>
                        <li><a href="reviews.html">Reviews</a></li>
                        <li><a href="careers.html">Careers</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Services</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="services_overview.html">Services overview</a></li>
                        <li><a href="preventive_maintenance.html">Preventive Maintenance</a></li>
                        <li><a href="oil_change.html">Oil Change</a></li>
                        <li><a href="tires.html">Tires &amp; Tire Repair</a></li>
                        <li><a href="brakes.html">Brakes &amp; Brake Repair</a></li>
                        <li><a href="mufflers.html">Mufflers &amp; Exhaust</a></li>
                        <li><a href="steering.html">Steering &amp; Suspension</a></li>
                        <li><a href="batteries.html">Batteries, Starters &amp; Charging</a></li>
                        <li><a href="climate.html">Climate Control</a></li>
                        <li><a href="belts.html">Belts &amp; Hoses</a></li>
                        <li><a href="engine.html">Engine Cooling</a></li>
                        <li><a href="check_engine.html">Check Engine Light</a></li>
                        <li><a href="lights.html">Lights, Wipers &amp; Accessories</a></li>
                    </ul>
                </li>
                <li><a href="appointments.html"><span>Appointments</span></a></li>
                <li><a href="coupons.html"><span>Coupons</span></a></li>
                <li><a href="faq.html"><span>Faq</span></a></li>
                <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Blog</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="blog-post.html">Single post</a></li>
                    </ul>
                </li>
                <li><a href="contact.html"><span>Contact us</span></a></li>
            </ul>

            <button class="btn-search ct-tablet-searcher"><i class="fa fa-search"></i></button>

            <div class="col-lg-3 ct-parent ct-desktop-searcher">
                <div class="ct-navSearcher ct-child" style="width: 491px;">
                    <form class="navbar-form navbar-form--default pull-left" role="search">
                        <div class="form-group">
                            <button class="btn-search"><i class="fa fa-search"></i></button>
                            <input type="text" class="form-control empty ct-u-backgroundDarkGray" id="iconified" placeholder="Search">
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    </nav>

<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>About us</span><span class="caret"></span></a>

<li><a href="history.html">Our history</a></li>

<li><a href="reviews.html">Reviews</a></li>

<li><a href="careers.html">Careers</a></li>

</ul>

</li>

<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><span>Services</span><span class="caret"></span></a>

<li><a href="services_overview.html">Services overview</a></li>

<li><a href="preventive_maintenance.html">Preventive Maintenance</a></li>

<li><a href="oil_change.html">Oil Change</a></li>

<li><a href="tires.html">Tires & Tire Repair</a></li>

<li><a href="brakes.html">Brakes & Brake Repair</a></li>

<li><a href="mufflers.html">Mufflers & Exhaust</a></li>

<li><a href="steering.html">Steering & Suspension</a></li>

<li><a href="batteries.html">Batteries, Starters & Charging</a></li>

<li><a href="climate.html">Climate Control</a></li>

<li><a href="belts.html">Belts & Hoses</a></li>

<li><a href="engine.html">Engine Cooling</a></li>

<li><a href="check_engine.html">Check Engine Light</a></li>

<li><a href="lights.html">Lights, Wipers & Accessories</a></li>

</ul>

</li>

<li><a href="appointments.html"><span>Appointments</span></a></li>

<li><a href="coupons.html"><span>Coupons</span></a></li>

<li><a href="blog-post.html">Single post</a></li>

</ul>

</li>

<li><a href="contact.html"><span>Contact us</span></a></li>

</ul>

</div>

</form>

</div>

</nav>

Screenshots

Default navigation

Was this article helpful ?

Accordion

Accordions are useful when you want to hide and show large amount of content

HTML markup

   <div id="accordion" class="panel-group">
       <div class="panel panel-default">
           <div class="panel-heading">
               <h4 class="panel-title">
                   <a class="" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">How do I know which auto service to trust?</a>
               </h4>
           </div>
           <div id="collapseTwo" class="panel-collapse collapse in">
               <div class="panel-body">
                   <p>Praesent auctor velit nec libero volutpat, vel pellentesque arcu tincidunt. Phasellus nec nisi imperdiet, tincidunt mi et, rhoncus nisl. Nullam sed leo ut lacus aliquam venenatis ut vestibulum felis. Nulla bibendum diam eu tortor faucibus molestie. Pellentesque venenatis rhoncus volutpat. Fusce ut sodales est, turpis. Donec eget feugiat est lacus tincidunt gravida quis felis rhoncus.</p>
               </div>
           </div>
       </div>
    </div>

<a class="" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">How do I know which auto service to trust?</a>

</h4>

</div>

<p>Praesent auctor velit nec libero volutpat, vel pellentesque arcu tincidunt. Phasellus nec nisi imperdiet, tincidunt mi et, rhoncus nisl. Nullam sed leo ut lacus aliquam venenatis ut vestibulum felis. Nulla bibendum diam eu tortor faucibus molestie. Pellentesque venenatis rhoncus volutpat. Fusce ut sodales est, turpis. Donec eget feugiat est lacus tincidunt gravida quis felis rhoncus.</p>

</div>

Screenshot

Accordion

Was this article helpful ?

Isotope

To create a isotope item please used the HTML markup from below

HTML markup

<figure class="grid-sizer grid-item ct-isotope-item" style="position: absolute; left: 0%; top: 0px;">
    <div class="ct-isotope-item-inner">
        <div class="ct-isotope-item__media">
            <a href="preventive_maintenance.html"><img src="assets/images/gallery-01.jpg" alt="Gallery Item"></a>
            <div class="ct-isotope-item__inner">
                <a href="preventive_maintenance.html"><h3 class="ct-services-header">
                    Preventive maintenance
                </h3></a>
            </div>
        </div>
    </div>
</figure>

Preventive maintenance

</h3></a>

</div>

</figure>

Screenshot

Isotope item

JavaScript

$(window).on('load', function() {


    /* Isotope */

    var isotope_gallery = function() {
        var isotope_filter, isotope_load;
        if ($().isotope) {
            isotope_gallery = $('.ct-isotope-gallery');
            isotope_filter = $('.ct-isotope-filtering button');
            isotope_load = $('#load-more');
            isotope_gallery.isotope({
                itemSelector: '.ct-isotope-item',
                percentPosition: true,
                masonry: {
                    columnWidth: '.grid-sizer'
                }
            });
            isotope_filter.on(clickEvent, function() {
                var filter_value, that;
                that = $(this);
                isotope_filter.removeClass('is-active');
                that.addClass('is-active');
                filter_value = that.attr('data-filter');
                return isotope_gallery.isotope({
                    filter: filter_value
                });
            });
            return isotope_load.on(clickEvent, function() {
                var load_name, load_page, response, that;
                that = $(this);
                load_name = that.attr('data-load-name');
                load_page = parseInt(that.attr('data-load-page'));
                response = '';
                $.ajax({
                    type: 'GET',
                    url: load_name + load_page + '.html',
                    async: false,
                    success: function(value) {
                        response = value;
                        return isotope_gallery.isotope('insert', $(response));
                    },
                    complete: function() {
                        return $.ajax({
                            type: 'GET',
                            url: load_name + (load_page + 1) + '.html',
                            async: false,
                            error: function() {
                                return that.parent().remove();
                            }
                        });
                    }
                });
                return that.attr('data-load-page', load_page + 1);
            });
        }
    };

    isotope_gallery();
});

$(window).on('load', function() {

/* Isotope */

var isotope_gallery = function() {

var isotope_filter, isotope_load;

if ($().isotope) {

isotope_gallery = $('.ct-isotope-gallery');

isotope_filter = $('.ct-isotope-filtering button');

isotope_load = $('#load-more');

isotope_gallery.isotope({

itemSelector: '.ct-isotope-item',

percentPosition: true,

masonry: {

columnWidth: '.grid-sizer'

}

});

isotope_filter.on(clickEvent, function() {

var filter_value, that;

that = $(this);

isotope_filter.removeClass('is-active');

that.addClass('is-active');

filter_value = that.attr('data-filter');

return isotope_gallery.isotope({

filter: filter_value

});

return isotope_load.on(clickEvent, function() {

var load_name, load_page, response, that;

that = $(this);

load_name = that.attr('data-load-name');

load_page = parseInt(that.attr('data-load-page'));

response = '';

$.ajax({

type: 'GET',

url: load_name + load_page + '.html',

async: false,

success: function(value) {

response = value;

return isotope_gallery.isotope('insert', $(response));

complete: function() {

return $.ajax({

type: 'GET',

url: load_name + (load_page + 1) + '.html',

async: false,

error: function() {

return that.parent().remove();

}

});

}

});

return that.attr('data-load-page', load_page + 1);

});

}

};

isotope_gallery();

});

Isotope Documentation can be found here Files are bundled inside main.js & style.css

Was this article helpful ?

Sliders

— Basic slider markup

HTML markup

<div class="ct-slick ct-js-slick">
  <div class="item">...</div>
  ...
  <div class="item">...</div>
</div>

...

</div>

–Main Slider

HTML markup

<div class="ct-slick ct-js-slick">

    <div class="ct-slick ct-js-slick ct-mainSlider ct-slick-arrow--type1 ct-slick-dots--type1" data-autoplay="false"
         data-arrows="true" data-dots="true" data-items="1" data-height="550">
        <div class="item" data-background="assets/images/background-1.jpg" data-height="550">
            <div class="item-inner container">
                <div class="row">
                    <div class="col-lg-5 col-md-6 col-sm-8 col-xs-10 slider-header">
                        <h1 class="ct-fw-700">We’ll have you up and running in no time</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-5 col-md-6  ct-u-marginTop10">
                        <a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a>
                        <span>or</span>
                        <a href="appointments.html" class="btn btn-white">Make appointment</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item" data-background="assets/images/background-1.jpg ">
            <div class="item-inner container">
                <div class="row">
                    <div class="col-lg-5 col-md-6 col-sm-8 col-xs-10 slider-header">
                        <h1 class="ct-fw-700">We’ll have you up and running in no time</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-5 col-md-6 ct-u-marginTop10">
                        <a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a>
                        <span>or</span>
                        <a href="appointments.html" class="btn btn-white">Make appointment</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item" data-background="assets/images/background-1.jpg">
            <div class="item-inner container">
                <div class="row">
                    <div class="col-lg-5 col-md-6 col-sm-8 col-xs-10 slider-header">
                        <h1 class="ct-fw-700">We’ll have you up and running in no time</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-5 col-md-6 ct-u-marginTop10">
                        <a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a>
                        <span>or</span>
                        <a href="appointments.html" class="btn btn-white">Make appointment</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
  ...

</div>

<div class="ct-slick ct-js-slick ct-mainSlider ct-slick-arrow--type1 ct-slick-dots--type1" data-autoplay="false"

data-arrows="true" data-dots="true" data-items="1" data-height="550">

<h1 class="ct-fw-700">We’ll have you up and running in no time</h1>

</div>

<a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a>

<a href="appointments.html" class="btn btn-white">Make appointment</a>

</div>

<h1 class="ct-fw-700">We’ll have you up and running in no time</h1>

</div>

<a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a>

<a href="appointments.html" class="btn btn-white">Make appointment</a>

</div>

<h1 class="ct-fw-700">We’ll have you up and running in no time</h1>

</div>

<a href="about-us.html" class="btn btn-white btn-slider--motive">Learn how</a>

<a href="appointments.html" class="btn btn-white">Make appointment</a>

</div>

...

</div>

Screenshot

Main slider

Slick Documentation can be found here Files are bundled inside style.css and main.js

Was this article helpful ?

Buttons

In Rota Auto Service — Mechanic Workshop HTML Template you will find several variations of sizes and types of buttons

Size
- btn-sm
- btn (only)
- btn-lg
types
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-primary
- btn-default
- btn-motive

HTML markup example

&lt;a href="#" class="btn btn-motive"&gt;Button&lt;/a&gt;

1	<a href="#" class="btn btn-motive">Button</a>

Screenshot

Buttons

Was this article helpful ?

Map with single marker

HTML markup

<div data-address="Tattersalls Ln, Melbourne" class="ct-googleMap ct-js-googleMap ct-u-backgroundLightBlack"></div>

1	<div data-address="Tattersalls Ln, Melbourne" class="ct-googleMap ct-js-googleMap ct-u-backgroundLightBlack"></div>

JavaScrip

<script id="googleMap" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>


    and inside main.js

  // Google map // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

        var mapSelector = $(".ct-js-googleMap");

        if(mapSelector.length) {
            var marker_address = mapSelector.attr("data-address");
            var map, bounds, marker, mapStyle, marker_icon;
            mapStyle = [{
                "featureType": "administrative",
                "elementType": "labels.text.fill",
                "stylers": [{"color": "#444444"}]
            }, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [{"visibility": "off"}]
            }, {
                "featureType": "road",
                "elementType": "all",
                "stylers": [{"saturation": -100}, {"lightness": 45}]
            }, {
                "featureType": "road.highway",
                "elementType": "all",
                "stylers": [{"visibility": "simplified"}]
            }, {
                "featureType": "road.arterial",
                "elementType": "labels.icon",
                "stylers": [{"visibility": "off"}]
            }, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "off"}]}, {
                "featureType": "water",
                "elementType": "all",
                "stylers": [{"color": "#425a68"}, {"visibility": "on"}]
            }]
            map = new google.maps.Map(mapSelector[0], {
                center: new google.maps.LatLng(0, 0),
                mapTypeId: google.maps.MapTypeId.ROADMAP, //MapTypeId.ROADMAP, MapTypeId.SATELLITE, MapTypeId.HYBRID, MapTypeId.TERRAIN
                styles: mapStyle,
                scrollwheel: false,
                draggable: true,
                zoom: 16
            });
            bounds = new google.maps.LatLngBounds();
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'address': marker_address}, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    var image = 'assets/images/marker_icon.png';
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                        map: map,
                        icon: image
                    });

                    bounds.extend(marker.position);
                    map.setCenter(results[0].geometry.location);
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

and inside main.js

// Google map // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

var mapSelector = $(".ct-js-googleMap");

if(mapSelector.length) {

var marker_address = mapSelector.attr("data-address");

var map, bounds, marker, mapStyle, marker_icon;

mapStyle = [{

"featureType": "administrative",

"elementType": "labels.text.fill",

"stylers": [{"color": "#444444"}]

}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {

"featureType": "poi",

"elementType": "all",

"stylers": [{"visibility": "off"}]

}, {

"featureType": "road",

"elementType": "all",

"stylers": [{"saturation": -100}, {"lightness": 45}]

}, {

"featureType": "road.highway",

"elementType": "all",

"stylers": [{"visibility": "simplified"}]

}, {

"featureType": "road.arterial",

"elementType": "labels.icon",

"stylers": [{"visibility": "off"}]

}, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "off"}]}, {

"featureType": "water",

"elementType": "all",

"stylers": [{"color": "#425a68"}, {"visibility": "on"}]

}]

map = new google.maps.Map(mapSelector[0], {

center: new google.maps.LatLng(0, 0),

mapTypeId: google.maps.MapTypeId.ROADMAP, //MapTypeId.ROADMAP, MapTypeId.SATELLITE, MapTypeId.HYBRID, MapTypeId.TERRAIN

styles: mapStyle,

scrollwheel: false,

draggable: true,

zoom: 16

});

bounds = new google.maps.LatLngBounds();

var geocoder = new google.maps.Geocoder();

geocoder.geocode({'address': marker_address}, function (results, status) {

if (status === google.maps.GeocoderStatus.OK) {

var image = 'assets/images/marker_icon.png';

marker = new google.maps.Marker({

position: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),

map: map,

icon: image

});

bounds.extend(marker.position);

map.setCenter(results[0].geometry.location);

} else {

alert('Geocode was not successful for the following reason: ' + status);

}

});

}

Map

Was this article helpful ?

Short Info Box

Not all of the important information need to be long! With Rota Auto Service — Mechanic Workshop HTML Template we presents you short info box !

HTML markup

<div class="about-desc">
    <h4>Skills</h4>
    <h6>Pellentesque posuere luctus . Aenean dictum mollis dignissim. Pellentesque interdum
        dictum quam, vitae finibus tortor condimentum sed. Donec egestas tincidunt
        hendrerit.</h6>
</div>

<h4>Skills</h4>

<h6>Pellentesque posuere luctus . Aenean dictum mollis dignissim. Pellentesque interdum

dictum quam, vitae finibus tortor condimentum sed. Donec egestas tincidunt

hendrerit.</h6>

</div>

Screenshot

Short info box

Was this article helpful ?

Person Box

If you want to show people you are working with this is a good solution

HTML markup

<div class="media person-box">
    <a href="team.html">
        <div class="media-left">
            <img class="media-object" src="assets/images/person1.jpg" alt="person">
        </div>
        <div class="media-body ct-fw-700">
            <h3 class="media-heading">Gregory Evans</h3>
            <h6>Owner</h6>
        </div>
    </a>
</div>

</div>

<h3 class="media-heading">Gregory Evans</h3>

<h6>Owner</h6>

</div>

</a>

</div>

Screenshot

Person box

Was this article helpful ?

Team Box

If you want to show some basic information about your co-workers team box is the best solution.

HTML markup

<div class="team-box">

    <div class="caption-box">
        <div class="caption upper">
            <h4>James Strasser</h4>
            <h6>Automotive &amp; Small engine technician</h6>
        </div>
        <img src="assets/images/team.jpg" alt="">
    </div>

    <div class="caption-box">
        <div class="caption upper">
            <h4>Anne Simmons</h4>
            <h6>Office manager</h6>
        </div>
        <img src="assets/images/team.jpg" alt="">
    </div>

</div>

<h4>James Strasser</h4>

<h6>Automotive & Small engine technician</h6>

</div>

</div>

<h4>Anne Simmons</h4>

<h6>Office manager</h6>

</div>

</div>

Screenshot

Team box

Was this article helpful ?

Job Box

Present your offer with clean and simple tables by just adding this HTML markup:

HTML markup

<div class="ct-jobBox">

    <h6>Feb 9, 2015</h6>
    <h4>B-level mechanical technician</h4>
    <a class="btn btn-black btn-sm" href="job_offer.html">apply now</a>

</div>

<h4>B-level mechanical technician</h4>

<a class="btn btn-black btn-sm" href="job_offer.html">apply now</a>

</div>

Screenshot

Job box

Was this article helpful ?

Pricing table

Present your prices by just adding this simple HTML markup:

HTML markup

<article class="ct-pricingBox ct-u-backgroundWhite" data-height="555" style="min-height: 555px;">
    <div class="ct-pricingBox-header text-center ct-fw-700">
        <h3>Great savings</h3>

        <h1 class="text-uppercase ct-u-marginBoth10">15<span>%</span> off</h1>
        <h4>any service (excludes tax) with student ID</h4>
    </div>
    <div class="ct-pricingBox-desc">
        <h5>Brakes, Exhaust, Fluids, Factory maintenance service, Suspension, Wheel
            alignments,
            Belts, Hoses, Headlamps, Bulbs &amp; more.</h5>
    </div>
    <div class="ct-pricingBox-logo">
        <div class="media">
            <div class="media-left">
                <img class="media-object" src="assets/images/logo.png" alt="logo">
            </div>
            <div class="media-body">
                <h6 class="ct-fw-400">Must present coupon. Most cars. Discount off
                    regular
                    price. Consumer pays all tax. One coupon per total invoice. Not
                    valid with other
                    offers.</h6>
            </div>
        </div>
    </div>
    <div class="ct-pricingBox-btn text-center">
        <div class="btn-group ct-u-paddingBoth10">
            <button type="button" class="btn"><img src="assets/images/print.png" alt="print">
            </button>
            <button class="btn btn-accent">Print this coupon</button>
        </div>

    </div>
    <div class="ct-pricingBox-footer ct-fw-400">
        <h6 class="pull-left">Expires 11/16/2015</h6>
        <h6 class="pull-right">BD724NA</h6>
    </div>
</article>

<h3>Great savings</h3>

<h4>any service (excludes tax) with student ID</h4>

</div>

<h5>Brakes, Exhaust, Fluids, Factory maintenance service, Suspension, Wheel

alignments,

Belts, Hoses, Headlamps, Bulbs & more.</h5>

</div>

</div>

<h6 class="ct-fw-400">Must present coupon. Most cars. Discount off

regular

price. Consumer pays all tax. One coupon per total invoice. Not

valid with other

offers.</h6>

</div>

</button>

<button class="btn btn-accent">Print this coupon</button>

</div>

<h6 class="pull-left">Expires 11/16/2015</h6>

</div>

</article>

Screenshot

Pricing tables

Was this article helpful ?

Light Gallery

HTML markup

<div class="ct-js-lightGallery">
    <a href="assets/images/pic_1.jpg">
        <div class="item">
            <div class="item-inner">
                <img src="assets/images/pic_1.jpg" alt="">
            </div>
        </div>
    </a>
    <a href="assets/images/pic_2.jpg">
        <div class="item">
            <div class="item-inner">
                <img src="assets/images/pic_2.jpg" alt="">
            </div>
        </div>
    </a>
    <a href="assets/images/pic_3.jpg">
        <div class="item">
            <div class="item-inner">
                <img src="assets/images/pic_3.jpg" alt="">
            </div>
        </div>
    </a>

    <a href="assets/images/pic_4.jpg">
        <div class="item">
            <div class="item-inner">
                <img src="assets/images/pic_4.jpg" alt="">
            </div>
        </div>
    </a>
    <a href="assets/images/pic_5.jpg">
        <div class="item">
            <div class="item-inner">
                <img src="assets/images/pic_5.jpg" alt="">
            </div>
        </div>
    </a>
    <a href="assets/images/pic_6.jpg">
        <div class="item">
            <div class="item-inner">
                <img src="assets/images/pic_6.jpg" alt="">
            </div>
        </div>
    </a>
</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

Screenshot

Light gallery

LightGallery Documentation can be found here. Files are bundled inside main.js & style.css

Was this article helpful ?

Reviews with infinite scroll and isotope

HTML markup

<div class="ct-isotope-container ct-u-paddingBoth50">
    <div class="grid ct-isotope-gallery" style="position: relative; height: 1132px;">
        <figure class="grid-sizer grid-item ct-isotope-item" style="position: absolute; left: 0%; top: 0px;">
            <div class="ct-isotope-item-inner">
                <div class="ct-isotope-item__media">
                    <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70">
                        <div class="ct-testimonials-box">
                            <div class="ct-testimonials-text">
                                <h3>Julie D. <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3>
                                <h6>Feb 21, 2015</h6>
                                <h5>Cras pharetra nunc ac magna pulvinar, id porttitor leo suscipit. Gravida urna
                                    sit amet accumsan imperdiet. Aenean facilisis ut tellus ut viverra. Vestibulum
                                    magna magna, ultricies condimentum non!</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </figure>
    </div>

    <div class="text-center ct-u-paddingBoth30">
        <button id="load-more" class="btn btn-black" data-load-name="review" data-load-page="1">Load more reviews</button>
    </div>

</div>

<h3>Julie D. <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3>

<h5>Cras pharetra nunc ac magna pulvinar, id porttitor leo suscipit. Gravida urna

sit amet accumsan imperdiet. Aenean facilisis ut tellus ut viverra. Vestibulum

magna magna, ultricies condimentum non!</h5>

</div>

</figure>

</div>

<button id="load-more" class="btn btn-black" data-load-name="review" data-load-page="1">Load more reviews</button>

</div>

and other “reviews” will be loaded from other html file. Example full html file named review1.html [important]:

<figure class="grid-item ct-isotope-item">
    <div class="ct-isotope-item-inner">
        <div class="ct-isotope-item__media">
            <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70">
                <div class="ct-testimonials-box">
                    <div class="ct-testimonials-text">
                        <h3>Gerald Schwartz
                            <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3>
                        <h6>Jan 31, 2015</h6>
                        <h5>Nulla porta auctor nunc non lacinia. Aliquam tempus mauris at sem mattis, nec varius neque scelerisque. Integer ornare, massa vulputate mattis dapibus, erat metus suscipit augue, placerat fringilla arcu elit at est.</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</figure>
<figure class="grid-item ct-isotope-item">
    <div class="ct-isotope-item-inner">
        <div class="ct-isotope-item__media">
            <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70" >
                <div class="ct-testimonials-box">
                    <div class="ct-testimonials-text">
                        <h3>Edward C.
                            <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3>
                        <h6>Feb 7, 2015</h6>
                        <h5>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</figure>
<figure class="grid-item ct-isotope-item">
    <div class="ct-isotope-item-inner">
        <div class="ct-isotope-item__media">
            <div class="ct-testimonials ct-testimonials--sideMenu ct-u-paddingBottom70">
                <div class="ct-testimonials-box">
                    <div class="ct-testimonials-text">
                        <h3>Barry Balderston
                            <img src="assets/images/stars.png" alt="stars" class="pull-right"> </h3>
                        <h6>Jan 9, 2015</h6>
                        <h5>Ut ac nibh quis mauris imperdiet hendrerit. Nunc quis risus rutrum, blandit ex at, vulputate nunc. Nunc maximus feugiat porttitor. </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</figure>

<h3>Gerald Schwartz

<h5>Nulla porta auctor nunc non lacinia. Aliquam tempus mauris at sem mattis, nec varius neque scelerisque. Integer ornare, massa vulputate mattis dapibus, erat metus suscipit augue, placerat fringilla arcu elit at est.</h5>

</div>

</figure>

<h3>Edward C.

<h5>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</h5>

</div>

</figure>

<h3>Barry Balderston

<h5>Ut ac nibh quis mauris imperdiet hendrerit. Nunc quis risus rutrum, blandit ex at, vulputate nunc. Nunc maximus feugiat porttitor. </h5>

</div>

</figure>

JavaScript

$(window).on('load', function() {


        /* Isotope */

        var isotope_gallery = function() {
            var isotope_filter, isotope_load;
            if ($().isotope) {
                isotope_gallery = $('.ct-isotope-gallery');
                isotope_filter = $('.ct-isotope-filtering button');
                isotope_load = $('#load-more');
                isotope_gallery.isotope({
                    itemSelector: '.ct-isotope-item',
                    percentPosition: true,
                    masonry: {
                        columnWidth: '.grid-sizer'
                    }
                });
                isotope_filter.on(clickEvent, function() {
                    var filter_value, that;
                    that = $(this);
                    isotope_filter.removeClass('is-active');
                    that.addClass('is-active');
                    filter_value = that.attr('data-filter');
                    return isotope_gallery.isotope({
                        filter: filter_value
                    });
                });
                return isotope_load.on(clickEvent, function() {
                    var load_name, load_page, response, that;
                    that = $(this);
                    load_name = that.attr('data-load-name');
                    load_page = parseInt(that.attr('data-load-page'));
                    response = '';
                    $.ajax({
                        type: 'GET',
                        url: load_name + load_page + '.html',
                        async: false,
                        success: function(value) {
                            response = value;
                            return isotope_gallery.isotope('insert', $(response));
                        },
                        complete: function() {
                            return $.ajax({
                                type: 'GET',
                                url: load_name + (load_page + 1) + '.html',
                                async: false,
                                error: function() {
                                    return that.parent().remove();
                                }
                            });
                        }
                    });
                    return that.attr('data-load-page', load_page + 1);
                });
            }
        };

        isotope_gallery();
    });

$(window).on('load', function() {

/* Isotope */

var isotope_gallery = function() {

var isotope_filter, isotope_load;

if ($().isotope) {

isotope_gallery = $('.ct-isotope-gallery');

isotope_filter = $('.ct-isotope-filtering button');

isotope_load = $('#load-more');

isotope_gallery.isotope({

itemSelector: '.ct-isotope-item',

percentPosition: true,

masonry: {

columnWidth: '.grid-sizer'

}

});

isotope_filter.on(clickEvent, function() {

var filter_value, that;

that = $(this);

isotope_filter.removeClass('is-active');

that.addClass('is-active');

filter_value = that.attr('data-filter');

return isotope_gallery.isotope({

filter: filter_value

});

return isotope_load.on(clickEvent, function() {

var load_name, load_page, response, that;

that = $(this);

load_name = that.attr('data-load-name');

load_page = parseInt(that.attr('data-load-page'));

response = '';

$.ajax({

type: 'GET',

url: load_name + load_page + '.html',

async: false,

success: function(value) {

response = value;

return isotope_gallery.isotope('insert', $(response));

complete: function() {

return $.ajax({

type: 'GET',

url: load_name + (load_page + 1) + '.html',

async: false,

error: function() {

return that.parent().remove();

}

});

}

});

return that.attr('data-load-page', load_page + 1);

});

}

};

isotope_gallery();

});

Screenshot

Reviews with infinite scroll and isotope

Was this article helpful ?

Pagination

To add pagination, use the simple HTML markup:

HTML markup

<div class="ct-pagination pagination-centered">
    <ul>
        <li class="pull-left"><a href="#"><i class="fa fa-caret-left"></i> prev page</a></li>
        <li class="ct-pagination--numbers"><a href="#">1</a></li>
        <li class="active ct-pagination--numbers"><a href="#">2</a></li>
        <li class="ct-pagination--numbers"><a href="#">3</a></li>
        <li class="disabled ct-pagination--numbers"><a href="#">...</a></li>
        <li class="ct-pagination--numbers"><a href="#">12</a></li>
        <li class="pull-right"><a href="#">next page <i class="fa fa-caret-right"></i></a></li>
    </ul>
</div>

<ul>

</ul>

</div>

Screenshot

Pagination

Was this article helpful ?

Blog Posts

In Rota Auto Service — Mechanic Workshop HTML Template we have 4 types of blog posts you can created using this markups:

Blog Image

HTML markup

<article class="ct-blog-post ct-blog-post--image ct-u-paddingTop40 ct-u-paddingBottom80">
      <div class="ct-blog-post--media">
        <img src="assets/images/blog_img1.jpg" alt="">
      </div>
      <div class="ct-blog-post--body">
          <div class="ct-blog-post--description"><h6>Posted by Richard on February 15, 2015 in Images,
              4
              comments</h6>
          </div>
          <div class="ct-blog-post--title"><h1><a href=""></a><a href="blog-post.html">Car hacks to instantly improve every drive</a></h1></div>
          <div class="ct-blog-post--content"><p>Aliquam dui magna, viverra sit amet lobortis id,
              fermentum dictum nisi. Nam maximus ullamcorper posuere mollis. Aliquam pharetra ante et
              velit commodo, et bibendum ante venenatis. Phasellus commodo velit nisl, non tempus
              lacus faucibus. In neque elit, mattis non purus eu, accumsan at massa id tincidunt.
              Morbi in varius mi, nec ullamcorper erat.</p>
          </div>
      </div>
      <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a>
  </article>

</div>

<div class="ct-blog-post--description"><h6>Posted by Richard on February 15, 2015 in Images,

comments</h6>

</div>

<div class="ct-blog-post--title"><h1><a href=""></a><a href="blog-post.html">Car hacks to instantly improve every drive</a></h1></div>

<div class="ct-blog-post--content"><p>Aliquam dui magna, viverra sit amet lobortis id,

fermentum dictum nisi. Nam maximus ullamcorper posuere mollis. Aliquam pharetra ante et

velit commodo, et bibendum ante venenatis. Phasellus commodo velit nisl, non tempus

lacus faucibus. In neque elit, mattis non purus eu, accumsan at massa id tincidunt.

Morbi in varius mi, nec ullamcorper erat.</p>

</div>

</article>

Screenshot

Blog image

Blog Simple

HTML markup

<article class="ct-blog-post ct-u-paddingTop40 ct-u-paddingBottom80">
        <div class="ct-blog-post--media">

        </div>
        <div class="ct-blog-post--body">
            <div class="ct-blog-post--description"><h6>Posted by Richard on February 12, 2015 in News
                and
                updates, Leave a comment</h6>
            </div>
            <div class="ct-blog-post--title"><h1><a href="blog-post.html">Spring is right around the corner: how to get your
                vehicle
                ready for warmer weather</a></h1>
            </div>
            <div class="ct-blog-post--content"><p>Aliquam interdum dolor et sapien semper scelerisque.
                Suspendisse neque turpis, venenatis eget porta cursus, cursus at justo. Nullam id ipsum
                vitae turpis pellentesque faucibus. Nulla consequat arcu vel iaculis ultricies. Cras
                bibendum maximus libero eget malesuada. Mauris pretium tellus in neque pharetra, vitae
                fermentum mi dignissim. Vivamus nulla sem, commodo at consequat nec.</p>
            </div>
        </div>
        <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a>
    </article>

</div>

<div class="ct-blog-post--description"><h6>Posted by Richard on February 12, 2015 in News

and

updates, Leave a comment</h6>

</div>

<div class="ct-blog-post--title"><h1><a href="blog-post.html">Spring is right around the corner: how to get your

vehicle

ready for warmer weather</a></h1>

</div>

<div class="ct-blog-post--content"><p>Aliquam interdum dolor et sapien semper scelerisque.

Suspendisse neque turpis, venenatis eget porta cursus, cursus at justo. Nullam id ipsum

vitae turpis pellentesque faucibus. Nulla consequat arcu vel iaculis ultricies. Cras

bibendum maximus libero eget malesuada. Mauris pretium tellus in neque pharetra, vitae

fermentum mi dignissim. Vivamus nulla sem, commodo at consequat nec.</p>

</div>

</article>

Screenshot

Blog simple

Blog Gallery

HTML markup

 <article class="ct-blog-post ct-blog-post--gallery ct-u-paddingTop40 ct-u-paddingBottom80">
        <div class="ct-blog-post--media">
            <div class="row">
                <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img2.jpg" alt=""></div>
                <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img3.jpg" alt=""></div>
                <div class="col-lg-4 text-center ct-u-paddingBottom30"> <img src="assets/images/blog_img4.jpg" alt=""></div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img5.jpg" alt=""></div>
                <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img6.jpg" alt=""></div>
                <div class="col-lg-4 text-center ct-u-paddingBottom30"><img src="assets/images/blog_img7.jpg" alt=""></div>
            </div>
        </div>
        <div class="ct-blog-post--body">
            <div class="ct-blog-post--description"><h6>Posted by Richard on February 7, 2015 in Gallery,
                Images, 2 comments</h6>
            </div>
            <div class="ct-blog-post--title"><h1><a href="blog-post.html">Buying a used vehicle? What to look for</a></h1>
            </div>
            <div class="ct-blog-post--content"><p>Fusce vel tristique nunc. Aenean tempus, diam quis
                laoreet gravida, lectus sem lobortis orci, id ultricies turpis metus in arcu. Proin
                ullamcorper diam fringilla mi volutpat convallis. Sed tortor orci, lacinia ut leo quis,
                congue varius est. In hac habitasse platea dictumst. Etiam pulvinar pellentesque lorem,
                vel tempus purus vestibulum vitae. Maecenas lorem convallis consectetur.</p>
            </div>
        </div>
        <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a>
    </article>

</div>

</div>

<div class="ct-blog-post--description"><h6>Posted by Richard on February 7, 2015 in Gallery,

Images, 2 comments</h6>

</div>

<div class="ct-blog-post--title"><h1><a href="blog-post.html">Buying a used vehicle? What to look for</a></h1>

</div>

<div class="ct-blog-post--content"><p>Fusce vel tristique nunc. Aenean tempus, diam quis

laoreet gravida, lectus sem lobortis orci, id ultricies turpis metus in arcu. Proin

ullamcorper diam fringilla mi volutpat convallis. Sed tortor orci, lacinia ut leo quis,

congue varius est. In hac habitasse platea dictumst. Etiam pulvinar pellentesque lorem,

vel tempus purus vestibulum vitae. Maecenas lorem convallis consectetur.</p>

</div>

</article>

Screenshot

Blog gallery

Blog Video

HTML markup

<article class="ct-blog-post ct-blog-post--video ct-u-paddingTop40 ct-u-paddingBottom80">
    <div class="ct-blog-post--media">

        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
        </div>

    </div>
    <div class="ct-blog-post--body">
        <div class="ct-blog-post--description"><h6>Posted by Richard on February 3, 2015 in Videos,
            1 comment</h6>
        </div>
        <div class="ct-blog-post--title"><h1><a href="blog-post.html">What is a Car Inspection?</a></h1>
        </div>
        <div class="ct-blog-post--content"><p>Aliquam dui magna, viverra sit amet lobortis id,
            fermentum dictum nisi. Nam maximus ullamcorper posuere mollis. Aliquam pharetra ante et
            velit commodo, et bibendum ante venenatis. Phasellus commodo velit nisl, non tempus
            lacus faucibus. In neque elit, mattis non purus eu, accumsan at massa id tincidunt.
            Morbi in varius mi, nec ullamcorper erat.</p>
        </div>
    </div>
    <a href="blog-post.html" class=""><h6 class="ct-fw-700 text-uppercase ct-linkHeader">Read more<i class="fa fa-caret-right"></i></h6></a>
</article>

</div>

<div class="ct-blog-post--description"><h6>Posted by Richard on February 3, 2015 in Videos,

1 comment</h6>

</div>

<div class="ct-blog-post--title"><h1><a href="blog-post.html">What is a Car Inspection?</a></h1>

</div>

<div class="ct-blog-post--content"><p>Aliquam dui magna, viverra sit amet lobortis id,

fermentum dictum nisi. Nam maximus ullamcorper posuere mollis. Aliquam pharetra ante et

velit commodo, et bibendum ante venenatis. Phasellus commodo velit nisl, non tempus

lacus faucibus. In neque elit, mattis non purus eu, accumsan at massa id tincidunt.

Morbi in varius mi, nec ullamcorper erat.</p>

</div>

</article>

Screenshot

Blog video

Was this article helpful ?

Fancy Contact Form

All needed files are in /form directory.

Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

$to = "mail@example.com";
$from = "mail@example.com";

1 2	$to = "mail@example.com"; $from = "mail@example.com";

That’s it!

HTML markup:

<form action="assets/form/send.php" method="POST" data-email-subject="My Rota" class="ct-js-validate ct-formAppointment">
    <div class="form-header"><h4 class="text-uppercase">Personal information</h4></div>


    <div class="form-group">
        <label for="full_name" class="col-sm-2 control-label short-label">Your full name
            <span>*</span></label>

        <div class="col-sm-10">
            <input type="text" class="form-control ct-input" id="full_name" placeholder="" data-placeholder="Your full name" name="field[]" required="required">
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label short-label">Email address
            <span>*</span></label>

        <div class="col-sm-10">
            <input type="email" class="form-control ct-input" id="email" placeholder="" data-placeholder="Email address" name="field[]" required="required">
        </div>
    </div>
    <div class="form-group">
        <label for="phone_number" class="col-sm-2 control-label short-label">Phone
            number<span>*</span></label>

        <div class="col-sm-10">
            <input type="text" class="form-control ct-input ct-input--short" data-placeholder="Phone number" id="phone_number" placeholder="" name="field[]" required="required">
        </div>
    </div>

    <div class="form-header"><h4 class="text-uppercase">Vehicle information</h4></div>


    <div class="form-group">
        <label for="year" class="col-sm-2 control-label short-label">Year<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input ct-input--short" id="year" data-placeholder="Year" name="field[]" required="required">
                <option>2011</option>
                <option>2012</option>
                <option>2013</option>
                <option>2014</option>
                <option>2015</option>
            </select>
        </div>

    </div>
    <div class="form-group">
        <label for="make" class="col-sm-2 control-label short-label">Make<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input" data-for="model" id="make" data-placeholder="Make" name="field[]" required="required">
                <option>Volkswagen</option>
                <option>Toyota</option>
                <option>Honda</option>
                <option>BMW</option>
                <option>Mercedes</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="model" class="col-sm-2 control-label short-label">Model<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input" data-target="model" data-for="submodel" id="model" disabled="" data-placeholder="Model" name="field[]" required="required">
                <option value="" disabled="" selected="">Select model...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="submodel" class="col-sm-2 control-label short-label">Submodel</label>

        <div class="col-sm-10">
            <select class="form-control ct-input" id="submodel" data-target="submodel" data-placeholder="Submodel" disabled="" name="field[]">
                <option value="" disabled="" selected="">Select submodel...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="mileage" class="col-sm-2 control-label short-label">Mileage</label>

        <div class="col-sm-10">
            <select class="form-control ct-input" id="mileage" data-placeholder="Mileage" name="field[]">
                <option value="" disabled="" selected="">Select mileage...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>

    <div class="form-header"><h4 class="text-uppercase">Appointment information</h4></div>


    <div class="form-group ">
        <label for="waiting" class="col-sm-2 control-label">Waiting
            or&nbsp;Drop&nbsp;off&nbsp;<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input ct-input--medium" id="waiting" data-placeholder="Waiting or Drop" name="field[]" required="required">
                <option value="" disabled="" selected="">Select an option...</option>
                <option>Waiting</option>
                <option>Drop off</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="date" class="col-sm-2 control-label short-label">Date <span>*</span></label>

        <div class="col-sm-10">
            <input type="text" class="form-control ct-input ct-input--short datepicker" data-placeholder="Date" id="date" placeholder="" name="field[]" required="required">
        </div>
    </div>

    <div class="form-group ">
        <label for="time" class="col-sm-2 control-label short-label">Time<span>*</span></label>

        <div class="col-sm-10">
            <select class="form-control ct-input ct-input--short" id="time" data-placeholder="Time" name="field[]" required="required">
                <option value="" disabled="" selected="">Select time...</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>

    <div class="form-header"><h4 class="text-uppercase">Services requested</h4></div>


    <div class="form-group">

        <div class="container">
            <div class="row">

                <div class="col-md-1 col-xs-12 label-services">
                    <label class="label-checkbox">Services <span>*</span></label>
                </div>

                <div class="col-md-3">
                    <ul>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Preventive maintenance" name="field[]">
                            Preventive maintenance
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Oil change" name="field[]">
                            Oil change
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Brakes &amp; Brake repair" name="field[]">
                            Brakes &amp; Brake repair
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Tires &amp; Tire repair" name="field[]">
                            Tires &amp; Tire repair
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Mufflers &amp; Exhaust" name="field[]">
                            Mufflers &amp; Exhaust
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Steering &amp; Suspension" name="field[]">
                            Steering &amp; Suspension
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Batteries, Starters &amp; Charging" name="field[]">
                            Batteries, Starters &amp; Charging
                        </label></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <ul>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Engine cooling" name="field[]">
                            Engine cooling
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Climate control" name="field[]">
                            Climate control
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Check engine light" name="field[]">
                            Check engine light
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Belts &amp; Hoses" name="field[]">
                            Belts &amp; Hoses
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Lights, Wipers &amp; Accessories" name="field[]">
                            Lights, Wipers &amp; Accessories
                        </label></li>
                        <li><label class="checkbox-inline">
                            <input type="checkbox" value="" data-placeholder="Other" name="field[]">
                            Other
                        </label></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>


    <div class="form-group">
        <label for="desc" class="col-lg-2 col-md-2 col-sm-12 control-label">Describe service
            request</label>

        <div class="col-lg-10 col-md-10 col-sm-12">
            <textarea class="form-control ct-input ct-input--wide" id="desc" data-placeholder="Describe service
            request" placeholder="" name="field[]">                                </textarea>
        </div>
    </div>

    <div class="btn-group ct-u-paddingBoth20">
        <button type="submit" class="btn btn-accent">schedule it now</button>
    </div>

    <div role="alert" class="successMessage alert alert-success alert-dismissible">
        <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span>
        </button>
        Your Email has been sent successfully.
    </div>
    <div role="alert" class="errorMessage alert alert-danger alert-dismissible">
        <button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span>
        </button>
        Ups, something went wrong.
    </div>

</form>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

<div class="form-header"><h4 class="text-uppercase">Personal information</h4></div>

<label for="full_name" class="col-sm-2 control-label short-label">Your full name

</div>

<label for="email" class="col-sm-2 control-label short-label">Email address

</div>

<label for="phone_number" class="col-sm-2 control-label short-label">Phone

number<span>*</span></label>

</div>

<div class="form-header"><h4 class="text-uppercase">Vehicle information</h4></div>

</select>

</div>

<option>Volkswagen</option>

<option>Toyota</option>

<option>Honda</option>

<option>Mercedes</option>

</select>

</div>

<label for="model" class="col-sm-2 control-label short-label">Model<span>*</span></label>

<option value="" disabled="" selected="">Select model...</option>

</select>

</div>

<label for="submodel" class="col-sm-2 control-label short-label">Submodel</label>

<option value="" disabled="" selected="">Select submodel...</option>

</select>

</div>

<label for="mileage" class="col-sm-2 control-label short-label">Mileage</label>

<option value="" disabled="" selected="">Select mileage...</option>

</select>

</div>

<div class="form-header"><h4 class="text-uppercase">Appointment information</h4></div>

<label for="waiting" class="col-sm-2 control-label">Waiting

or Drop off <span>*</span></label>

<option value="" disabled="" selected="">Select an option...</option>

<option>Waiting</option>

</select>

</div>

</div>

<option value="" disabled="" selected="">Select time...</option>

</select>

</div>

<div class="form-header"><h4 class="text-uppercase">Services requested</h4></div>

<label class="label-checkbox">Services <span>*</span></label>

</div>

<ul>

Preventive maintenance

</label></li>

Oil change

</label></li>

Brakes & Brake repair

</label></li>

Tires & Tire repair

</label></li>

Mufflers & Exhaust

</label></li>

Steering & Suspension

</label></li>

Batteries, Starters & Charging

</label></li>

</ul>

</div>

<ul>

Engine cooling

</label></li>

Climate control

</label></li>

Check engine light

</label></li>

Belts & Hoses

</label></li>

Lights, Wipers & Accessories

</label></li>

Other

</label></li>

</ul>

</div>

<label for="desc" class="col-lg-2 col-md-2 col-sm-12 control-label">Describe service

request</label>

<textarea class="form-control ct-input ct-input--wide" id="desc" data-placeholder="Describe service

request" placeholder="" name="field[]"> </textarea>

</div>

<button type="submit" class="btn btn-accent">schedule it now</button>

</div>

</button>

Your Email has been sent successfully.

</div>

</button>

Ups, something went wrong.

</div>

</form>

Java Script

$(document).ready(function () {

    var dfor = $('[data-for]'),
        dtarget = $('[data-target]');

    dfor.each(function(){
       var that = $(this);

        that.change(function(){
           if(that.val()) {

               var index = -1,
                   dataFor = that.attr("data-for"),
                   counter = -1;


               dtarget.each(function(){
                   var thiz = $(this),
                       target = thiz.attr("data-target"),
                       ind = target.indexOf(dataFor);

                   counter++;

                   if(ind > -1) {
                      index = counter;
                      return false;
                   }
               });

               if(index > -1) {
                   $(dtarget[index]).prop('disabled', false);
               }
           }
        });
    });


    //datapicker


    var datapicker = $('.datepicker');

    if(datapicker.length) {
        datapicker.datepicker({
            format: 'mm/dd/yyyy'
        });
    }
});

$(document).ready(function () {

var dfor = $('[data-for]'),

dtarget = $('[data-target]');

dfor.each(function(){

var that = $(this);

that.change(function(){

if(that.val()) {

var index = -1,

dataFor = that.attr("data-for"),

counter = -1;

dtarget.each(function(){

var thiz = $(this),

target = thiz.attr("data-target"),

ind = target.indexOf(dataFor);

counter++;

if(ind > -1) {

index = counter;

return false;

}

});

if(index > -1) {

$(dtarget[index]).prop('disabled', false);

}

});

//datapicker

var datapicker = $('.datepicker');

if(datapicker.length) {

datapicker.datepicker({

format: 'mm/dd/yyyy'

});

}

});

Screenshot

Fancy contact form

Options (can be changed in HTML) :

Mail Subject – just change value in :
Success Message – change successMessage div content
Error Message – change errorMessage div content

Was this article helpful ?

Sources & Credits

The following sources and files have been used to build up this theme

Twitter Bootstrap – http://twitter.github.com/bootstrap/

jQuery – http://www.jquery.com

Was this article helpful ?

Rota Auto Service — Mechanic Workshop HTML

Rota Auto Service — Mechanic Workshop HTML Template – Responsive HTML5 Template

HTML Structure

Grid System and Single row structure

Page structure

CSS files and structure

Colors

Icons

CSS Files & Structure

Javascript Components

Navigation

Accordion

Isotope

Sliders

— Basic slider markup

–Main Slider

Buttons

Map with single marker

Short Info Box

Person Box

Team Box

Job Box

Pricing table

Light Gallery

Reviews with infinite scroll and isotope

Pagination

Blog Posts

Blog Image

Blog Simple

Blog Gallery

Blog Video

Fancy Contact Form

Sources & Credits

Siver

Estato

Disrupt

We are elite