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
- accordian.html — Accordian Page
- buttom.html — Buttom Style Page
- contact-1.html — Contact Page
- icon_box.html — Icon Box Styles Page
- icon-font.html — Css Fonts Page
- index.html — Homepage-1 Page
- index-2.html — Homepage-2 Page
- index-3.html — Homepage-3 Page
- list_group.html — list group Page
- modal_popup.html — Modal Popup Page
- news-grid.html — News Grid Page
- news-listing.html — News Listing Page
- news-masonry.html — News Masonry Page
- post-gallery.html — Post Gallery Page
- post-image.html — Post Image Page
- post-right-sidebar.html — Post Right Sidebar Page
- post-video.html — Post Video Page
- project-detail.html — Project Detail Page
- room-detail.html — Room Detail Page
- table.html — Table Style Page
- tabs.html — Tabs Style Page
- video.html — Video Style Page
- work-carousel.html — Work Carousel Page
- work-grid.html — Work Grid Page
- work-masonry.html — Work Masonry 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>sharan 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/t-datepicker.min.css" ><!-- BOOTSTRAP DATEPICKER STYLE SHEET -->
<link rel="stylesheet" href="css/t-datepicker-blue.css" ><!-- BOOTSTRAP DATEPICKER 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" class="skin" href="css/skin/skin-1.css"><!-- THEME COLOR CHANGE STYLE SHEET -->
<link rel="stylesheet" href="css/flaticon.min.css"><!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" href="css/switcher.css"><!-- SIDE SWITCHER STYLE SHEET -->
<!-- REVOLUTION SLIDER CSS -->
<link rel="stylesheet" href="plugins/revolution/revolution/css/settings.css">
<!-- REVOLUTION NAVIGATION STYLE -->
<link rel="stylesheet" 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=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=DM+Serif+Text:400,400i&display=swap&subset=latin-ext" 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><!-- OWL SLIDER FIlter -->
<script src="js/t-datepicker.min.js"></script>
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/switcher.js"></script><!-- SHORTCODE FUCTIONS -->
<!-- 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>
<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-tb90 bg-white overflow-hide">
<div class="container">
<div class="section-content">
<div class="row d-flex align-items-center">
<div class="col-lg-6 col-md-12 text-black">
<!-- TITLE START -->
<div class="section-head text-left">
<h2 class=" m-b5" data-title="About">About sharan</h2>
<div class="wt-separator-outer">
<div class="wt-separator site-bg-primary"></div>
</div>
</div>
<!-- TITLE END -->
<h4 class=" m-t0">
We will be so proud to be our guest.Lorem Ipsum is simply dummy text of the printing.
</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the typesetting industry's standard dummy text ever since the when.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="row equal-wraper">
<div class="col-md-6 m-b30">
<div class="wt-icon-box-wraper left bg-gray p-a20 hover-box-effect v-icon-effect equal-col">
<div class="icon-md m-b20">
<span class="icon-cell"><i class="flaticon-room-service v-icon"></i></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte">Restaurants</h4>
<p>Lorem ipsum dolor sit piscing sed nonmy</p>
</div>
</div>
</div>
<div class="col-md-6 m-b30">
<div class="wt-icon-box-wraper left bg-gray p-a20 hover-box-effect v-icon-effect equal-col">
<div class="icon-md m-b20">
<span class="icon-cell"><i class="flaticon-stones v-icon"></i></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte ">Wellness & Spa</h4>
<p>Lorem ipsum dolor sit piscing sed nonmy</p>
</div>
</div>
</div>
<div class="col-md-6 m-b30">
<div class="wt-icon-box-wraper left bg-gray p-a20 hover-box-effect v-icon-effect equal-col">
<div class="icon-md m-b20">
<span class="icon-cell"><i class="flaticon-wifi v-icon"></i></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte ">Free Wifi</h4>
<p>Lorem ipsum dolor sit piscing sed nonmy</p>
</div>
</div>
</div>
<div class="col-md-6 m-b30">
<div class="wt-icon-box-wraper left bg-gray p-a20 hover-box-effect v-icon-effect equal-col">
<div class="icon-md m-b20">
<span class="icon-cell"><i class="flaticon-cards v-icon"></i></span>
</div>
<div class="icon-content">
<h4 class="wt-tilte ">Game Zone</h4>
<p>Lorem ipsum dolor sit piscing sed nonmy</p>
</div>
</div>
</div>
</div>
<a href="project-detail.html" class="btn-half site-button button-lg m-b30"><span>More About</span><em></em></a>
</div>
<div class="col-lg-6 col-md-12">
<div class="home-about-block-outer bg-repeat bg-white" style="background-image:url(images/background/bg-dot.jpg);">
<div class="home-about-block-inner">
<div class="home-about-slider owl-carousel owl-btn-vertical-center">
<div class="item">
<div class="home-about-slider-pic">
<img src="images/about/pic1.jpg" alt="">
</div>
</div>
<div class="item">
<div class="home-about-slider-pic">
<img src="images/about/pic2.jpg" alt="">
</div>
</div>
<div class="item">
<div class="home-about-slider-pic">
<img src="images/about/pic3.jpg" alt="">
</div>
</div>
<div class="item">
<div class="home-about-slider-pic">
<img src="images/about/pic4.jpg" alt="">
</div>
</div>
<div class="item">
<div class="home-about-slider-pic">
<img src="images/about/pic5.jpg" alt="">
</div>
</div>
</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" method="post" action="form-handler.php">
<div class="contact-one m-b30">
<!-- 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-right">
<button name="submit" type="submit" value="Submit" class="btn-half site-button button-lg m-b15">
<span>Submit</span><em></em>
</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-thecube">
<div class="cssload-cube cssload-c1"></div>
<div class="cssload-cube cssload-c2"></div>
<div class="cssload-cube cssload-c4"></div>
<div class="cssload-cube cssload-c3"></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:
——— Poppins
——— Roboto
——— DM Serif Text