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

  1. css — folder with CSS and SCSS files.
  2. fonts — folder with fonts files.
  3. images — folder with images files.
  4. js — folder with Javascript files.
HTML Files:
  1. about-1.html — About page
  2. after-login.html — After login page
  3. blog.html — Blog page
  4. blog-grid.html — Blog grid page
  5. blog-grid-2.html — Blog grid style 2 page
  6. blog-list.html — Blog list page
  7. blog-single.html — Blog single page
  8. candidate-detail.html — Candidate detail page
  9. candidate-detail-v2.html — Candidate detail-2 page
  10. candidate-grid.html — Candidate grid page
  11. candidate-list.html — Candidate list Page
  12. candidate-change-password.html — Candidate change password
  13. candidate-cv-manager.html — Candidate cv manager
  14. candidate-job-alert.html — Candidate job alerts
  15. candidate-jobs-applied.html — Candidate jobs applied
  16. candidate-my-resume.html — Candidate resume
  17. candidate-profile.html — Candidate profile page
  18. candidate-saved-jobs.html — Candidate saved jobs
  19. contact.html — Contact page
  20. Comingsoon.html — Coming Soon Page
  21. dashboard.html — dashboard page
  22. dash-bookmark.html — dashboard bookmark page
  23. dash-candidates.html — dashboard candidates page
  24. dash-change-password.html — dashboard change password page
  25. dash-company-profile.html — dashboard company profile page
  26. dash-manage-jobs.html — dashboard manage jobs page
  27. dash-messages.html — dashboard messages page
  28. dash-messages_2.html— dashboard messages 2 page
  29. dash-my-profile.html — dashboard my profile Page
  30. dash-package.html — dashboard package page
  31. dash-post-job.html — dashboard post job page
  32. dash-resume-alert.html — dashboard resume alert page
  33. employer-detail.html — employer detail page
  34. employer-detail-v2.html — employer detail-2 page
  35. employer-grid.html — employer grid page
  36. employer-list.html — employer list page
  37. employer-account-fresher.html — employer account fresher page
  38. employer-account-professional.html — employer account professional page
  39. employer-change-password.html — employer change-password page
  40. employer-manage-jobs.html — employer manage-jobs page
  41. employer-post-jobs.html — employer post-jobs page
  42. employer-profile.html — employer profile page
  43. employer-resume.html — employer resume page
  44. employer-transaction.html — employer transaction page
  45. error-404.html — error 404 page
  46. faq.html — Faq page
  47. index.html — Home page 1
  48. index-2.html — Home page 2
  49. index-3.html — Home page 3
  50. index-4.html — Home page 4
  51. index-5.html — Home page 5
  52. index-6.html — Home page 6
  53. index-7.html — Home page 7
  54. index-8.html — Home page 8
  55. index-9.html — Home page 9
  56. index-10.html — Home page 10
  57. index-11.html — Home page 11
  58. index-12.html — Home page 12
  59. index-13.html — Home page 13
  60. index-14.html — Home page 14
  61. index-15.html — Home page 15
  62. index-16.html — Home page 16
  63. index-17.html — Home page 17
  64. index-18.html — Home page 18
  65. job-detail.html — Job detail page
  66. job-detail-v2.html — Job detail-2 page
  67. job-grid.html — Job Grid page
  68. job-list.html — Job List page
  69. login.html — Login page
  70. pricing.html — Pricing page
  71. register.html — Register page
  72. under-maintenance.html — Under Maintenance Page
  73. job-grid-with-map.html — Job Grid With Map
  74. apply-job.html — Job Apply
  75. icons.html — Icons
  76. candidate-dashboard.html — Candidate Dashboard
  77. 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/

Google Fonts:
  ———  Rubik
  ———  Poppins