If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/thewebmax ).
This documentation is February 2024
Thank you for purchasing this HTML template.
If you like this template, Please support us by rating this template with 5 stars
We hope you found this document helpful. Thank you!
Template Features
- Unique Home Pages
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible
- W3 Valid
- Fontawesome Icons
- Powered with Bootstrap Version
- Working Contact Form
Folders in Zip File
- css — folder with CSS and SCSS files.
- fonts — folder with fonts files.
- images — folder with images files.
- js — folder with Javascript files.
- Media — folder with images files.
- Plugins — folder with Javascript files.
- phpmailer — folder with phpmailer
HTML Files:
- about-1.html — About page
- our-team.html — Our Team Page
- faq-1.html — FAQ'S Page
- icon-font.html — icon font Page
- contact-1.html — contact us
- index.html — Homepage-1 page
- index-2.html — Homepage-2 page
- index-3.html — Homepage-3 page
- index-4.html — Homepage-4 page
- blog-grid.html — blog grid page
- blog-listing.html — blog listing page
- blog-masonry.html — blog masonry page
- blog-right-sidebar.html — blog with right sidebar page
- project-detail.html — project detail page
- portfolio-1.html — Portfolio-1 page
- portfolio-2.html — Portfolio-2 page
- portfolio-3.html — Portfolio-3 page
- services-all.html — Services Page
HEAD CSS Structure
Followings are the css files which loaded inside the Head Section:
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="robots" content="" />
<meta name="description" content="" />
<!-- FAVICONS ICON -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<!-- PAGE TITLE HERE -->
<title>Carservx Template | Home Page Style 1</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" href="css/animate.min.css"><!-- WOW ANIMATION STYLE SHEET -->
<link rel="stylesheet" href="css/fontawesome/css/font-awesome.min.css" /><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" href="css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" href="css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" href="css/loader.min.css"><!-- LOADER STYLE SHEET -->
<link rel="stylesheet" href="css/style.css"><!-- MAIN STYLE SHEET -->
<link rel="stylesheet" href="css/flaticon.min.css"><!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" class="skin" href="css/skin/skin-1.css"><!-- THEME COLOR CHANGE STYLE SHEET -->
<link rel="stylesheet" href="css/switcher.css"><!-- SIDE SWITCHER STYLE SHEET -->
<!-- REVOLUTION SLIDER CSS -->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/settings.css">
<!-- REVOLUTION NAVIGATION STYLE -->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/navigation.css">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,800,800i,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
</head>
Javascript Structure
Followings are the JS files which loaded before the end of HEAD or BODY Section:.
<!-- JAVASCRIPT FILES ========================================= -->
<script src="js/jquery-3.7.1.min.js"></script><!-- JQUERY.MIN JS -->
<script src="js/popper.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="js/magnific-popup.min.js"></script><!-- MAGNIFIC-POPUP JS -->
<script src="js/waypoints.min.js"></script><!-- WAYPOINTS JS -->
<script src="js/counterup.min.js"></script><!-- COUNTERUP JS -->
<script src="js/waypoints-sticky.min.js"></script><!-- COUNTERUP JS -->
<script src="js/isotope.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/imagesloaded.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/owl.carousel.min.js"></script><!-- OWL SLIDER -->
<script src="js/jquery.owl-filter.js"></script>
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/shortcode.js"></script><!-- SHORTCODE FUCTIONS -->
<script src="js/switcher.js"></script><!-- SWITCHER FUCTIONS -->
<script src="js/wow.min.js"></script><!--WoW animation JS-->
<!-- REVOLUTION JS FILES -->
<script src="plugins/revolution/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="plugins/revolution/revolution/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION 5.0 EXTENSIONS (Load Extensions only on Local File Systems ! The following part can be removed on Server for On Demand Loading) -->
<script src="plugins/revolution/revolution/js/extensions/revolution-plugin.js"></script>
<!-- REVOLUTION SLIDER SCRIPT FILES -->
<script src="js/rev-script-1.js"></script>
HTML Structure
<!-- WELCOME SECTION START -->
<div class="section-full p-t80 p-b50">
<div class="section-content">
<div class="container">
<!-- TITLE START -->
<div class="section-head text-center">
<h5 class="site-text-primary text-uppercase wt-title-small">Welcome Carservx</h5>
<h2 class="m-b5 left ">We're a company of talented engineers & mechanics</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
</div>
<!-- TITLE END -->
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="wt-icon-box-wraper p-a30 m-b30 bdr-1 bdr-solid bdr-gray bounce-right-animation">
<div class="relative icon-count-1">
<span class="icon-count-number">01</span>
<div class="icon-content text-black">
<h4 class="wt-tilte m-b25">International Standards</h4>
<p>It is a long established fact that a reader will be distracted by the readable contentof a page.</p>
</div>
<div class="icon-xl inline-icon m-b25">
<span class="icon-cell"><i class="flaticon-certificate "></i></span>
</div>
<div>
<a href="#" class="site-button site-btn-effect" data-hover="Read More">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="wt-icon-box-wraper p-a30 m-b30 bdr-1 bdr-solid bdr-gray bounce-right-animation">
<div class="relative icon-count-1">
<span class="icon-count-number">02</span>
<div class="icon-content text-black">
<h4 class="wt-tilte m-b25">We love our client</h4>
<p>It is a long established fact that a reader will be distracted by the readable contentof a page.</p>
</div>
<div class="icon-xl inline-icon m-b25">
<span class="icon-cell"><i class="flaticon-employee "></i></span>
</div>
<div>
<a href="#" class="site-button site-btn-effect" data-hover="Read More">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="wt-icon-box-wraper p-a30 m-b30 bdr-1 bdr-solid bdr-gray bounce-right-animation">
<div class="relative icon-count-1">
<span class="icon-count-number">03</span>
<div class="icon-content text-black">
<h4 class="wt-tilte m-b25">Only original parts</h4>
<p>It is a long established fact that a reader will be distracted by the readable contentof a page.</p>
</div>
<div class="icon-xl inline-icon m-b25">
<span class="icon-cell"><i class="flaticon-car-parts "></i></span>
</div>
<div>
<a href="#" class="site-button site-btn-effect" data-hover="Read More">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- WELCOME SECTION END -->
Color Skins
<link rel="stylesheet" class="skin" href="css/skin/skin-1.css">
<link rel="stylesheet" class="skin" href="css/skin/skin-2.css">
<link rel="stylesheet" class="skin" href="css/skin/skin-3.css">
<link rel="stylesheet" class="skin" href="css/skin/skin-4.css">
<link rel="stylesheet" class="skin" href="css/skin/skin-5.css">
<link rel="stylesheet" class="skin" href="css/skin/skin-6.css">
Features
Click this button
Contact Form
You will need these 2 files to make contact form working 1 — (mail.php) , 2 — (custom.js)
<form class="contact-form cons-contact-form p-b50" method="post" action="form-handler.php">
<div class="contact-one">
<!-- TITLE START -->
<div class="section-head text-left">
<h2 class="m-b5">Get In Touch</h2>
</div>
<!-- TITLE END -->
<div class="form-group">
<input name="username" type="text" required class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" required placeholder="Email">
</div>
<div class="form-group">
<textarea name="message" rows="4" class="form-control " required placeholder="Message"></textarea>
</div>
<div class="text-left">
<button name="submit" type="submit" value="Submit" class="site-button site-btn-effect button-lg">
Submit
</button>
</div>
</div>
</form>
Owl Carousel Edit Option
File path: js/custom.js
// > Home Page Blog Full Screen with no margin function by = owl.carousel.js ========================== //
function blog_carousel_3(){
jQuery('.blog-carousel-3').owlCarousel({
loop:true,
margin:30,
autoplay:false,
center: false,
nav:true,
dots: false,
navText: ['<i class="flaticon-back"></i> Prev', 'Next <i class="flaticon-next"></i>'],
responsive:{
0:{
items:1
},
480:{
items:1
},
767:{
items:1
},
1000:{
items:3
}
}
});
}
More Info please browser the link: Owl Carousel Docs Options
How to edit/off Preloader
Please remove or comment the below code file path: js/custome.js
// > page loader function by = custom.js ========================= //
function page_loader() {
$('.loading-area').fadeOut(1000);
}
Also, please remove or comment the below code all HTML files
<!-- LOADING AREA START ===== -->
<div class="loading-area">
<div class="loading-box"></div>
<div class="loading-pic">
<div class="cssload-container">
<ul class="cssload-flex-container">
<li>
<span class="cssload-loading"></span>
</li>
</ul>
</div>
</div>
</div>
<!-- LOADING AREA END ====== -->
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
——— https://www.shutterstock.com
——— https://www.freepik.com/
——— https://pixabay.com/
——— https://unsplash.com/