Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here: Unlockdesign on ThemeForest. Thanks so much!
“The template is worked for Auto Mechanic, Car Repair Shops, Car Wash, Garages, Automobile Mechanical's, Mechanic Workshops, Auto Painting, Auto Centers and other Auto and Car related administrations and it is reasonable for any sort of private venture action – Car Service Mot, Tyre's, Brakes Hire, Car Rental, Auto Care, Maintenance, Vehicle Diagnostics, Auto Glass, Body Shops, Auto Inspections, Handyman, Serviceman .It is appropriate for clients with zero programming abilities and in addition propelled designers.
30+ HTML Files
If you like our template, please rate it 5 stars.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Mr Fix - Car Repair Service HTML5 Template</title>
<!-- Favicon -->
<link href="images/favicon.ico" sizes="128x128" rel="shortcut icon" />
<link href="images/favicon.ico" sizes="128x128" rel="shortcut icon" type="image/x-icon" />
<!-- css file -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" href="css/responsive.css">
@import "../css/jquery-ui.min.css";
@import "../css/font-awesome.min.css";
@import "../css/font-awesome-animation.min.css";
@import "../css/flaticon.css";
@import "../css/animate.css";
@import "../css/bootsnav.css";
@import "../css/fullcalendar.css";
@import "../css/hover.css";
@import "../css/fancyBox.css";
@import "../css/jquery.flickr.css";
@import "../css/owl.css";
@import "../css/isotop.css";
@import "../css/magnific-popup.css";
@import "../css/flipclock.css";
@import "../css/timecounter.css";
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300i,400,500,700);
<!-- Our Services -->
<section class="ulockd-service-one">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-3 ulockd-srvcbg">
<div class="ulockd-service-fstcol">
<div class="ulockd-srvc-icon text-thm1"><span class="flaticon-brake-disk"></span></div>
<h3> Break Inspection</h3>
<p>In case need a brake administration and review, look no more remote than Firestone Complete Auto Care, where we offer free brake checks seven days seven days, throughout the entire year.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-3 ulockd-srvcbg">
<div class="ulockd-service-fstcol">
<div class="ulockd-srvc-icon text-thm1"><span class="flaticon-battery"></span></div>
<h3> Battery Inspection</h3>
<p>Battery testing ought to shape some portion of a customary upkeep schedule. Pre-emptive battery substitution can help wipe out a considerable lot of the expenses and issues related with a level battery.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-3 ulockd-srvcbg">
<div class="ulockd-service-fstcol">
<div class="ulockd-srvc-icon text-thm1"><span class="flaticon-car-1"></span></div>
<h3> Vehicle Inspection</h3>
<p>Vehicles must experience a security review before enlistment. Occasionally, most vehicles likewise should have their outflows tried under the Vehicle Emissions Inspection Program.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-3 ulockd-srvcbg">
<div class="ulockd-service-fstcol">
<div class="ulockd-srvc-icon text-thm1"><span class="flaticon-zero-emission-badge"></span></div>
<h3> Emissions Inspection</h3>
<p>By having your vehicle tried, you're having an essential impact in Maryland's fruitful and continuous endeavors to clean our air and water, making a more beneficial Maryland for every one of us.</p>
</div>
</div>
</div>
</div>
</section>
<form id="contact_form" name="contact_form" class="contact-form" action="includes/contact.php" method="post" novalidate="novalidate">
<div class="messages"></div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input id="form_name" name="form_name" class="form-control ulockd-form-fg required" placeholder="Your name" required="required" data-error="Name is required." type="text">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="form_email" name="form_email" class="form-control ulockd-form-fg required email" placeholder="Your email" required="required" data-error="Email is required." type="email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="form_phone" name="form_phone" class="form-control ulockd-form-fg required" placeholder="Phone" required="required" data-error="Phone Number is required." type="text">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="form_subject" name="form_subject" class="form-control ulockd-form-fg required" placeholder="Subject" required="required" data-error="Subject is required." type="text">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea id="form_message" name="form_message" class="form-control ulockd-form-tb required" rows="8" placeholder="Your massage" required="required" data-error="Message is required."></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="form-group ulockd-contact-btn">
<input id="form_botcheck" name="form_botcheck" class="form-control" value="" type="hidden">
<button type="submit" class="btn btn-default ulockd-btn-thm" data-loading-text="Getting Few Sec...">SUBMIT</button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#contact_form').validator();
$('#contact_form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "includes/contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact_form').find('.messages').html(alertBox).fadeIn('slow');
$('#contact_form')[0].reset();
setTimeout(function(){ $('.messages').fadeOut('slow') }, 6000);
}
}
});
return false;
}
})
});
</script>
<!-- Appointment Form Starts -->
<form id="appointment_form" name="appointment_form" class="appointment_form text-center" action="includes/appointment.php" method="post" novalidate="novalidate">
<div class="messages"></div>
<div class="row">
<div class="col-md-12">
<h2>Appointment with Expert</h2>
<p>Let's Appointment With our Exparts Who Try to Solved Your Problem.</p>
<div class="form-group text-left">
<label for="form_name"><i class="fa fa-user-o"></i> Name <small>*</small></label>
<input id="form_name" name="form_name" class="form-control" placeholder="enter a name" required="required" data-error="Name is required." type="text">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group text-left">
<label for="form_email"><i class="fa fa-envelope-open-o"></i> Email <small>*</small></label>
<input id="form_email" name="form_email" class="form-control required email" placeholder="enter an email" required="required" data-error="Email is required." type="email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group text-left">
<label for="form_date"><i class="fa fa-calendar-check-o"></i> Date <small>*</small></label>
<input id="form_date" name="form_date" class="form-control required datepicker" placeholder="enter a date" required="required" data-error="Subject is required." type="text">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group text-left">
<label for="form_phone"><i class="fa fa-phone"></i> Phone <small>*</small></label>
<input id="form_phone" name="form_phone" class="form-control required" placeholder="enter a phone" required="required" data-error="Phone Number is required." type="text">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group text-left">
<label for="form_name"><i class="fa fa-file-text-o"></i> Message</label>
<textarea id="form_message" name="form_message" class="form-control required" rows="5" placeholder="type in a message" required="required" data-error="Message is required."></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="form-group text-center">
<input id="form_botcheck" name="form_botcheck" class="form-control" value="" type="hidden">
<button type="submit" class="btn btn-lg ulockd-btn-thm" data-loading-text="Getting Few Sec...">Send</button>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#appointment_form').validator();
$('#appointment_form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "includes/appointment.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#appointment_form').find('.messages').html(alertBox).fadeIn('slow');
$('#appointment_form')[0].reset();
setTimeout(function(){ $('.messages').fadeOut('slow') }, 6000);
}
}
});
return false;
}
})
});
</script>
Just Change Id or Replace With Your Id It Will Work.
Flickr Feed HTML Structure:
<div class="flickr-photo"></div>
Flickr Feed Custom Script:
if($('.flickr-photo').length){
$('.flickr-photo').jflickrfeed({
limit: 9,
qstrings: {
id: '44802888@N04' // Here you can replace your flickr ID
},
itemTemplate:
'<li>' +
'<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
'</li>'
});
}
Just Change Id or Replace With Your Id It Will Work.
Googel Map HTML Structure:
<div class="" id="map-location" style="height: 312px;"></div>
Googel Map Custom Script:
if($('#map-location').length){
var map;
map = new GMaps({
el: '#map-location',
zoom: 14, // zooming option you incrase or reduce map zoom
scrollwheel:false,
//Set Latitude and Longitude Here
lat: 39.768403,
lng: -86.158068
});
}
Note: All images are just used for preview purpose only and NOT included in the final purchase files.
This is just a part of what is included in this template. There is much more in there so you should check out the screenshots. If you have any questions about customization of this template which are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.
A Product of Unlockdesign
Our product:
Mr Fix - Car Repair Service HTML5 Template
Don’t forget to rate the template if you like it. Thank you so much!