If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/thewebmax ).
This documentation is August 2023
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!
RTL Version Available Click Now
Template Features
- Unique Home Pages
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible
- W3 Valid
- Fontawesome Icons & Feather Icons
- Powered with Bootstrap latest 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.
HTML Files:
- about-1.html — About page
- after-login.html — After login page
- blog.html — Blog page
- blog-grid.html — Blog grid page
- blog-grid-2.html — Blog grid style 2 page
- blog-list.html — Blog list page
- blog-single.html — Blog single page
- candidate-detail.html — Candidate detail page
- candidate-detail-v2.html — Candidate detail-2 page
- candidate-grid.html — Candidate grid page
- candidate-list.html — Candidate list Page
- candidate-change-password.html — Candidate change password
- candidate-cv-manager.html — Candidate cv manager
- candidate-job-alert.html — Candidate job alerts
- candidate-jobs-applied.html — Candidate jobs applied
- candidate-my-resume.html — Candidate resume
- candidate-profile.html — Candidate profile page
- candidate-saved-jobs.html — Candidate saved jobs
- contact.html — Contact page
- Comingsoon.html — Coming Soon Page
- dashboard.html — dashboard page
- dash-bookmark.html — dashboard bookmark page
- dash-candidates.html — dashboard candidates page
- dash-change-password.html — dashboard change password page
- dash-company-profile.html — dashboard company profile page
- dash-manage-jobs.html — dashboard manage jobs page
- dash-messages.html — dashboard messages page
- dash-messages_2.html— dashboard messages 2 page
- dash-my-profile.html — dashboard my profile Page
- dash-package.html — dashboard package page
- dash-post-job.html — dashboard post job page
- dash-resume-alert.html — dashboard resume alert page
- employer-detail.html — employer detail page
- employer-detail-v2.html — employer detail-2 page
- employer-grid.html — employer grid page
- employer-list.html — employer list page
- employer-account-fresher.html — employer account fresher page
- employer-account-professional.html — employer account professional page
- employer-change-password.html — employer change-password page
- employer-manage-jobs.html — employer manage-jobs page
- employer-post-jobs.html — employer post-jobs page
- employer-profile.html — employer profile page
- employer-resume.html — employer resume page
- employer-transaction.html — employer transaction page
- error-404.html — error 404 page
- faq.html — Faq page
- index.html — Home page 1
- index-2.html — Home page 2
- index-3.html — Home page 3
- index-4.html — Home page 4
- index-5.html — Home page 5
- index-6.html — Home page 6
- index-7.html — Home page 7
- index-8.html — Home page 8
- index-9.html — Home page 9
- index-10.html — Home page 10
- index-11.html — Home page 11
- index-12.html — Home page 12
- index-13.html — Home page 13
- index-14.html — Home page 14
- index-15.html — Home page 15
- index-16.html — Home page 16
- index-17.html — Home page 17
- index-18.html — Home page 18
- job-detail.html — Job detail page
- job-detail-v2.html — Job detail-2 page
- job-grid.html — Job Grid page
- job-list.html — Job List page
- login.html — Login page
- pricing.html — Pricing page
- register.html — Register page
- under-maintenance.html — Under Maintenance Page
- job-grid-with-map.html — Job Grid With Map
- apply-job.html — Job Apply
- icons.html — Icons
- candidate-dashboard.html — Candidate Dashboard
- candidate-chat.html — Candidate Chat
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>Jobzilla Template | Home Page Style 1</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/feather.css"><!-- FEATHER ICON SHEET -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/lc_lightbox.css"><!-- Lc light box popup -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css"><!-- BOOTSTRAP SLECT BOX STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap5.min.css"><!-- DATA table STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/select.bootstrap5.min.css"><!-- DASHBOARD select bootstrap STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/dropzone.css"><!-- DROPZONE STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/scrollbar.css"><!-- CUSTOM SCROLL BAR STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/datepicker.css"><!-- DATEPICKER STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- MAIN STYLE SHEET -->
</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.6.0.min.js"></script><!-- JQUERY.MIN JS -->
<script src="js/popper.min.js"></script><!-- POPPER.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><!-- STICKY HEADER -->
<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/theia-sticky-sidebar.js"></script><!-- STICKY SIDEBAR -->
<script src="js/lc_lightbox.lite.js" ></script><!-- IMAGE POPUP -->
<script src="js/bootstrap-select.min.js"></script><!-- Form js -->
<script src="js/dropzone.js"></script><!-- IMAGE UPLOAD -->
<script src="js/jquery.scrollbar.js"></script><!-- scroller -->
<script src="js/bootstrap-datepicker.js"></script><!-- scroller -->
<script src="js/jquery.dataTables.min.js"></script><!-- Datatable -->
<script src="js/dataTables.bootstrap5.min.js"></script><!-- Datatable -->
<script src="js/chart.js"></script><!-- Chart -->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
HTML Structure
<!-- HOW IT WORK SECTION START -->
<div class="section-full p-t120 p-b90 site-bg-white twm-how-it-work-area">
<div class="container">
<!-- TITLE START-->
<div class="section-head center wt-small-separator-outer">
<div class="wt-small-separator site-text-primary">
<div>Working Process</div>
</div>
<h2 class="wt-title">How It Works</h2>
</div>
<!-- TITLE END-->
<div class="twm-how-it-work-section">
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="twm-w-process-steps">
<span class="twm-large-number">01</span>
<div class="twm-w-pro-top bg-clr-sky">
<div class="twm-media">
<span><img src="images/work-process/icon1.png" alt="icon1"></span>
</div>
<h4 class="twm-title">Register<br>Your Account</h4>
</div>
<p>You need to create an account to find the best and preferred job.</p>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="twm-w-process-steps">
<span class="twm-large-number">02</span>
<div class="twm-w-pro-top bg-clr-pink">
<div class="twm-media">
<span><img src="images/work-process/icon2.png" alt="icon1"></span>
</div>
<h4 class="twm-title">Apply <br>
For Dream Job</h4>
</div>
<p>You need to create an account to find the best and preferred job.</p>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6">
<div class="twm-w-process-steps">
<span class="twm-large-number">03</span>
<div class="twm-w-pro-top bg-clr-green">
<div class="twm-media">
<span><img src="images/work-process/icon3.png" alt="icon1"></span>
</div>
<h4 class="twm-title">Upload <br>Your Resume</h4>
</div>
<p>You need to create an account to find the best and preferred job.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- HOW IT WORK SECTION END -->
How to Run SCSS File
And following the video tutorial.
Here the Link: https://www.youtube.com/watch?v=0MWmv1Gvv5w
Features
Click this button
Color Skin
skin 1
skin 2
skin 3
skin 4
skin 5
skin 6
skin 7
skin 8
skin 9
<!-- THEME COLOR CHANGE STYLE SHEET -->
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-1.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-2.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-3.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-4.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-5.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-6.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-7.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-8.css">
<link rel="stylesheet" class="skin" type="text/css" href="css/skins-type/skin-9.css">
Contact Form
You will need these 2 files to make contact form working 1 — (mail.php) , 2 — (custom.js)
<div class="contact-form-outer">
<!-- TITLE START-->
<div class="section-head left wt-small-separator-outer">
<h2 class="wt-title">Send Us a Message</h2>
<p>Feel free to contact us and we will get back to you as soon as we can.</p>
</div>
<!-- TITLE END-->
<form class="cons-contact-form" method="post" action="form-handler2.php">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group mb-3">
<input name="username" type="text" required class="form-control" placeholder="Name">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group mb-3">
<input name="email" type="text" class="form-control" required placeholder="Email">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group mb-3">
<input name="phone" type="text" class="form-control" required placeholder="Phone">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group mb-3">
<input name="subject" type="text" class="form-control" required placeholder="Subject">
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-3">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="site-button">Submit Now</button>
</div>
</div>
</form>
</div>
Owl Carousel Edit Option
File path: js/custome.js
// Job Categories Carousel function by = owl.carousel.js ========================== //
function job_categories_carousel(){
jQuery('.job-categories-carousel').owlCarousel({
loop:true,
nav:true,
dots: false,
center:false,
margin:30,
autoplay:true,
navText: ['<i class="feather-chevron-left"></i>', '<i class="feather-chevron-right"></i>'],
responsive:{
0:{
items:1,
},
480:{
items:1,
},
767:{
items:2,
margin:0,
},
991:{
items:2,
},
1024:{
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="wrapper">
<div class="cssload-loader"></div>
</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/