If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/thewebmax ).
This documentation is 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 & 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.
- Media — folder with images files.
- Plugins — folder with Javascript files.
HTML Files:
- about-1.html About page variation 1
- about-2.html About page variation 2
- blog-grid-2.html Two column grid layout
- blog-grid-2-sidebar.html Two column grid layout with right sidebar
- blog-grid-2-sidebar-left.html Two column grid layout with left sidebar
- blog-grid-3.html Three column grid layout
- blog-grid-3-sidebar.html Three column grid layout with right sidebar
- blog-grid-3-sidebar-left.html Three column grid layout with left sidebar
- blog-grid-4.html Four column grid layout
- blog-half-img.html Blog half image layout
- blog-half-img-left-sidebar.html Blog half image layout with left sidebar
- blog-half-img-sidebar.html Blog half image layout with right sidebar
- blog-large-img.html Blog large image layout
- blog-large-img-left-sidebar.html Blog large image layout with left sidebar
- blog-large-img-sidebar.html Blog large image layout with right sidebar
- blog-single.html Blog image layout with comment box
- blog-single-left-sidebar.html Blog image layout with left sidebar and comment box
- blog-single-sidebar.html Blog image layout with right sidebar and comment box
- career.html Company career pages
- contact-1.html Contact page variation 1
- contact-2.html Contact page variation 2
- contact-3.html Contact page variation 3
- error-403.html Error 403 page
- error-404.html Error 404 page
- error-500.html Error 500 page
- faq-1.html Frequently asked questions page variation 1
- faq-2.html Frequently asked questions page variation 2
- footer-fixed.html Footer fixed layout
- footer-dark.html Footer dark layout
- footer-light.html Footer light layout
- gallery-grid-1.html Two column grid layout
- gallery-grid-2.html Three column grid layout
- gallery-grid-3.html Four column grid layout
- header-style-1.html Header style variation 1
- header-style-2.html Header style variation 2
- header-style-3.html Header style variation 3
- header-style-4.html Header style variation 4
- header-style-5.html Header style variation 5
- header-style-6.html Header style variation 5
- header-style-7.html Header style variation 5
- header-style-8.html Header style variation 5
- header-style-9.html Header style variation 5
- header-style-10.html Header style variation 5
- index.html Home page variation 1
- index-2.html Home page variation 2
- index-3.html Home page variation 3
- index-4.html Home page variation 4
- index-5.html Home page variation 5
- our-team.html Our team page
- Our-team-detail.html Our team detail page
- portfolio-1.html Portfolio page variation 1
- portfolio-2.html Portfolio page variation 2
- portfolio-3.html Portfolio page variation 3
- portfolio-detail.html Portfolio detail page
- product.html Product page.
- product-detail.html Product detail page
- shopping-cart.html shopping cart page
- wish-list.html wish-list page
- checkout.html checkout page
- services-1.html Services page variation 1
- services-2.html Services page variation 2
- services-detail.html Services detail page
- shortcode-accordians.html Accordians page.
- shortcode-alert-box.html Alert box page.
- shortcode-all-widgets.html All widgets page.
- shortcode-animations.html Different Animation styles examples page
- shortcode-buttons.html Different buttons styles
- shortcode-carousel-sliders.html Carousel sliders page
- shortcode-client.html Clients companies logo
- shortcode-client-slider.html Clients companies logo slider
- shortcode-counters.html Counters styles page
- shortcode-dividers.html Differents dividers examples
- shortcode-google-maspan.html Google map page.
- shortcode-icon-box.html Different icon box sizes layout
- shortcode-icon-box-styles.html Different types icon boxes layout
- shortcode-icons.html Three type icons font awesome, glyphicon & outline icon
- shortcode-image-box-content.html Image box types
- shortcode-images-effects.html Image hover effects
- shortcode-list-grouspan.html Different types list styles
- shortcode-modal-spanopup.html Modal popup types
- shortcode-pagination.html Pagination types
- shortcode-spanricing-table.html Pricing tables
- shortcode-table.html Different types table design
- shortcode-tabs.html Different types tabes
- shortcode-testimonials.html Testimonials styles
- shortcode-testimonials-grid.html Grid type testimonials
- shortcode-title-sespanarators.html Different type title separators
- shortcode-toggles.html Different types toggles
- shortcode-tooltispans.html Different types tooltips
- shortcode-video.html Video 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>Build 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/fontawesome/css/font-awesome.min.css"><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/flaticon.min.css"><!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/animate.min.css"><!-- ANIMATE STYLE 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/bootstrap-select.min.css"><!-- BOOTSTRAP SELECT BOX 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/loader.min.css"><!-- LOADER STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" class="skin" href="css/skin/skin-1.css"><!-- THEME COLOR CHANGE STYLE SHEET -->
<link rel="stylesheet" type="text/css" 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='http://fonts.googleapis.com/css?family=Roboto:400,100,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800italic,800,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Crete+Round:400,400i&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.6.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/jquery.bootstrap-touchspin.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><!-- 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/scrolla.min.js"></script><!-- ON SCROLL CONTENT ANIMTE -->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/shortcode.js"></script><!-- SHORTCODE FUCTIONS -->
<script src="js/switcher.js"></script><!-- SWITCHER FUCTIONS -->
<!-- SLIDER REVOLUTION -->
<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 -->
<!-- REVOLUTION SLIDER SCRIPT FILES -->
<script src="js/rev-script-1.js"></script>
HTML Structure
<!-- ABOUT COMPANY SECTION START -->
<div class="section-full p-t80 p-b50 bg-white">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-8 m-b30">
<div class="about-com-pic">
<img src="images/about-pic.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="col-lg-7 col-md-12 m-b30">
<div class="section-head text-left">
<h2 class="text-uppercase">About Company </h2>
<div class="wt-separator-outer">
<div class="wt-separator style-square">
<span class="separator-left site-bg-primary"></span>
<span class="separator-right site-bg-primary"></span>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown galley.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. remaining essentially unchanged. It was popularised in the with the .
</p>
</div>
<div class="about-types row">
<div class="col-md-6 col-sm-6 p-tb20">
<div class="wt-icon-box-wraper left p-l20 bdr-1 bdr-gray-light">
<div class="icon-sm site-text-primary">
<a href="about-1.html" class="icon-cell p-t5 center-block"><i class="fa fa-building" aria-hidden="true"></i></a>
</div>
<div class="icon-content">
<h5 class="wt-tilte text-uppercase m-b0">Building</h5>
<p>Lorem ipsum dolor sit piscing sed diam nonmy end .</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 p-tb20 ">
<div class="wt-icon-box-wraper left p-l20 bdr-1 bdr-gray-light">
<div class="icon-sm site-text-primary">
<a href="about-1.html" class="icon-cell p-t5 center-block"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
</div>
<div class="icon-content">
<h5 class="wt-tilte text-uppercase m-b0">Renovation</h5>
<p>Lorem ipsum dolor sit piscing sed diam nonmy end .</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 p-tb20 ">
<div class="wt-icon-box-wraper left p-l20 bdr-1 bdr-gray-light">
<div class="icon-sm site-text-primary">
<a href="about-1.html" class="icon-cell p-t5 center-block"><i class="fa fa-gavel" aria-hidden="true"></i></a>
</div>
<div class="icon-content">
<h5 class="wt-tilte text-uppercase m-b0 ">Digging</h5>
<p>Lorem ipsum dolor sit piscing sed diam nonmy end .</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 p-tb20 ">
<div class="wt-icon-box-wraper left p-l20 bdr-1 bdr-gray-light">
<div class="icon-sm site-text-primary">
<a href="about-1.html" class="icon-cell p-t5 center-block"><i class="fa fa-picture-o" aria-hidden="true"></i></a>
</div>
<div class="icon-content">
<h5 class="wt-tilte text-uppercase m-b0">interior</h5>
<p>Lorem ipsum dolor sit piscing sed diam nonmy end .</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT COMPANY SECTION END -->
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="cons-contact-form" method="post" action="phpmailer/mail.php">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="username" type="text" required class="form-control" placeholder="Name">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="email" type="text" class="form-control" required placeholder="Email">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon v-align-t"><i class="fa fa-pencil"></i></span>
<textarea name="message" rows="1" class="form-control " required placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="col-md-12">
<button name="submit" type="submit" value="Submit" class="site-button m-r15">Submit <i class="fa fa-angle-double-right"></i></button>
<button name="Resat" type="reset" value="Reset" class="site-button " >Reset <i class="fa fa-angle-double-right"></i></button>
</div>
</div>
</form>
Owl Carousel Edit Option
File path: js/custom.js
function home_carousel_1(){
jQuery('.home-carousel-1').owlCarousel({
loop:true,
margin:0,
nav:true,
dots: false,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
responsive:{
0:{
items:1
},
480:{
items:2
},
767:{
items:3
},
1000:{
items:4
},
1200:{
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="loader">
<span class="block-1"></span>
<span class="block-2"></span>
<span class="block-3"></span>
<span class="block-4"></span>
<span class="block-5"></span>
<span class="block-6"></span>
<span class="block-7"></span>
<span class="block-8"></span>
<span class="block-9"></span>
<span class="block-10"></span>
<span class="block-11"></span>
<span class="block-12"></span>
<span class="block-13"></span>
<span class="block-14"></span>
<span class="block-15"></span>
<span class="block-16"></span>
</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:
——— Roboto
——— Open Sans
——— Crete Round