If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/thewebmax ).
This documentation is November 2020
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
- FlatIcons and Fontawesome 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.
- plugins — folder with Revolution slider files.
HTML Files:
- about-1.html — About 1 page
- about-2.html — About 2 page
- blog-grid.html — Blog grid page
- blog-list.html — Blog list page
- blog-single.html — Blog post right sidebar page
- contact.html — Contact page
- error-404.html — Error Page
- faq.html — FAQ Page
- gallery-1.html — Gallery style 1 Page
- gallery-2.html — Gallery style 2 Page
- gallery-single.html — Gallery single style Page
- gallery-carousel.html — Gallery carousel Page
- icon-font.html — Icons Page
- index.html — Home Page
- index-2.html — Home 2 Page
- index-3.html — Home 3 Page
- index-4.html — Home 4 Page
- our-classes.html — Our classes Page
- our-classes-detail.html — Our classes detail Page
- pricing.html — Pricing Page
- services.html — Services Page
- trainers.html — Trainers Page
HEAD CSS Structure
Followings are the css files which loaded inside the Head Section:
<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>Zemmy Template | Home Page Style 1</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<!-- BOOTSTRAP SLECT BOX STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
<!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css">
<!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/flaticon.min.css">
<!-- 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">
Color Skins
You can apply the skin you want
<!-- THEME COLOR CHANGE STYLE SHEET -->
<link rel="stylesheet" class="skin" type="text/css" href="css/skin-1.css">
Javascript Structure
Followings are the JS files which loaded before the end of HEAD or BODY Section:.
<!-- JAVASCRIPT FILES ========================================= -->
<script src="js/jquery-3.5.1.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/bootstrap-select.min.js"></script><!-- Form 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/owl.carousel.min.js"></script><!-- OWL SLIDER -->
<script src="js/theia-sticky-sidebar.js"></script><!-- STICKY SIDEBAR -->
<script src="js/jquery.bootstrap-touchspin.js"></script><!-- FORM JS -->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/jquery.bgscroll.js"></script><!-- BACKGROUND SCROLL -->
<!-- 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
<!-- ABOUT ONE SECTION START -->
<div class="section-full p-t120 p-b90 bg-no-repeat bg-no-repeat bg-bottom-center bg-gray-light">
<div class="about-section-one">
<div class="container">
<div class="section-content">
<div class="row justify-content-center d-flex">
<div class="col-lg-6 col-md-12 m-b30">
<div class="about-gym-one">
<div class="about-gym-one-media"><img src="images/intro-pic.png" alt="" ></div>
<div class="outline-text">Strong</div>
</div>
</div>
<div class="col-lg-6 col-md-12 m-b30">
<div class="about-section-one-right">
<!-- TITLE START-->
<div class="section-head left wt-small-separator-outer">
<div class="wt-small-separator site-text-primary">
<div class="sep-leaf-left"></div>
<div>About US</div>
</div>
<h2>Give A Shape of Your Body</h2>
<p>This also meant we needed to provide a learning environment run by
experienced and successful coaches. However, our most important goal
was to create a welcoming atmosphere and community in which everyone
feels a sense of belonging.</p>
</div>
<!-- TITLE END-->
<div class="about-one">
<div class="wt-icon-box-wraper left bg-black m-b30">
<div class="wt-icon-box-sm site-bg-gray">
<span class="icon-cell site-bg-dark"><i class="flaticon-six-pack"></i></span>
</div>
<div class="icon-content">
<h5 class="wt-tilte">Full-Body Strength</h5>
<p>Train with the best experts in bodybuilding field.</p>
</div>
</div>
<div class="wt-icon-box-wraper left bg-black m-b30">
<div class="wt-icon-box-sm site-bg-gray">
<span class="icon-cell site-bg-dark"><i class="flaticon-stationary-bicycle"></i></span>
</div>
<div class="icon-content">
<h5 class="wt-tilte">Lean Machines</h5>
<p>Our personal trainers will help you find a perfect workout.</p>
</div>
</div>
<div class="wt-icon-box-wraper left bg-black m-b30">
<div class="wt-icon-box-sm site-bg-gray">
<span class="icon-cell site-bg-dark"><i class="flaticon-exercise"></i></span>
</div>
<div class="icon-content">
<h5 class="wt-tilte">Power Yoga</h5>
<p>Uniquely sequenced class work to heat and challenge the body </p>
</div>
</div>
</div>
<a href="about-1.html" class="site-button site-btn-effect">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT ONE 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
Contact Form
You will need these 2 files to make contact form working 1 — (class.simple_mail.php) , 2 — (form-handler2.php)
<div class="contact-form-outer p-a50 ">
<form class="cons-contact-form" method="post" action="form-handler2.php">
<!-- TITLE START-->
<div class="section-head left wt-small-separator-outer">
<h3 class="wt-title m-b30">Contact Form</h3>
</div>
<!-- TITLE END-->
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="form-group">
<input name="username" type="text" required class="form-control" placeholder="Name">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="form-group">
<input name="email" type="text" class="form-control" required placeholder="Email">
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="form-group">
<input name="phone" type="text" class="form-control" required placeholder="Phone">
</div>
</div>
<div class="col-lg-12 col-md-12">
<div class="form-group">
<input name="subject" type="text" class="form-control" required placeholder="Subject">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<textarea name="message" class="form-control" rows="4" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="site-button site-btn-effect">Submit Now</button>
</div>
</div>
</form>
</div>
Google Map API
To get started using the Google Maps click the button below, which guides you through the process of activating the Google Maps JavaScript API and any related services automatically.
Contact us page map
or visit
http://www.latlong.net/http://itouchmap.com/latlong.html
Find in map.script.js
Use API Key
Owl Carousel Edit Option
File path: js/custome.js
function home_client_carousel(){
jQuery('.home-client-carousel').owlCarousel({
loop:true,
nav:true,
dots: false,
margin:10,
autoplay:true,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive:{
0:{
items:2,
},
480:{
items:3,
},
767:{
items:4,
},
1000:{
items:5
}
}
});
}
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/
IconFont
FlatIcon