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
- Working Contact Form
Folders in Zip File
- css — folder with CSS files.
- fonts — folder with fonts files.
- images — folder with images files.
- js — folder with Javascript files.
- plugins — folder with Revolution slider files.
- phpmailer — folder for contact form.
HTML Files:
- about-1.html — About 1 page
- blog-grid.html — Blog grid page
- blog-list.html — Blog list page
- blog-post.html — Blog Detail page
- blog-list.html — Blog post right sidebar page
- contact.html — Contact page
- error-404.html — Error Page
- faq-1.html — FAQ Page
- icon-font.html — Icons page
- index.html — Home page 1
- index-2.html — Home page 2
- index-3.html — Home page 3
- index-4.html — Home page 4
- There are many other html pages...
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>inteshape 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">
<!-- BOOTSTRAP SLECT BOX STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
<!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/font-awesome.min.css" />
<!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css">
<!-- LOADER STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/loader.min.css">
<!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/flaticon.min.css">
<!-- MAIN STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Price Range Slider -->
<link rel="stylesheet" href="css/bootstrap-slider.min.css" />
<!-- Color Theme Change Css -->
<link rel="stylesheet" class="skin" type="text/css" href="css/skin/skin-1.css">
<!-- Side Switcher Css-->
<link rel="stylesheet" type="text/css" href="css/switcher.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">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" 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-1.12.4.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 JS -->
<script src="js/isotope.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/owl.carousel.min.js"></script><!-- OWL SLIDER -->
<script src="js/jquery.owl-filter.js"></script>
<script src="js/stellar.min.js"></script><!-- PARALLAX BG IMAGE -->
<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 -->
<script src="js/theia-sticky-sidebar.js"></script><!--sticky content-->
<script src="js/switcher.js"></script><!-- SWITCHER FUCTIONS -->
<script src="js/bootstrap-slider.min.js"></script><!-- Price range slider -->
<!-- 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 COMPANY START -->
<div class="section-full mobile-page-padding p-t80 p-b80 bg-white bg-no-repeat bg-bottom-left" style="background-image:url(images/background/bg-4.png)">
<div class="container">
<!-- TITLE START -->
<div class="section-head">
<div class="sx-separator-outer separator-left">
<div class="sx-separator bg-white bg-moving bg-repeat-x" style="background-image:url(images/background/cross-line2.png)">
<h3 class="sep-line-one">About us</h3>
</div>
</div>
</div>
<!-- TITLE END -->
<div class="section-content">
<div class="row">
<div class="col-lg-5 col-md-12 col-sm-12">
<div class="about-home-left">
<h3 class="m-t0 sx-tilte">We are competitive in architecture solutions</h3>
<p>Landscape design is a process of developing practical and pleasing outdoor living space. there are six principles of design that have been used by artists for centuries throughout all art forms, painting and floral design.</p>
<div class="text-left">
<a href="javascript:;" class="site-button-secondry btn-half"><span>Read More</span></a>
</div>
</div>
</div>
<div class="col-lg-7 col-md-12 col-sm-12">
<div class="about-home-right">
<div class="owl-carousel about-home number-slider owl-btn-vertical-center">
<!-- COLUMNS 1 -->
<div class="item ">
<div class="sx-img-effect zoom-slow">
<a href="javascript:void(0);"><img src="images/about-slider/1.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 2 -->
<div class="item ">
<div class="sx-img-effect zoom-slow">
<a href="javascript:void(0);"><img src="images/about-slider/2.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 3 -->
<div class="item ">
<div class="sx-img-effect zoom-slow">
<a href="javascript:void(0);"><img src="images/about-slider/3.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 4 -->
<div class="item ">
<div class="sx-img-effect zoom-slow">
<a href="javascript:void(0);"><img src="images/about-slider/4.jpg" alt=""></a>
</div>
</div>
<!-- COLUMNS 5 -->
<div class="item ">
<div class="sx-img-effect zoom-slow">
<a href="javascript:void(0);"><img src="images/about-slider/5.jpg" alt=""></a>
</div>
</div>
</div>
<div class="about-home-before">
<img src="images/about-slider/1-ab.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT COMPANY END -->
Features
Click this button
Color Skin
For Contact form
1.You have to put smtp detail inside mail.php file for contact form to run
2.You will also need to make some changes inside the custom.js file
Owl Carousel Edit Option
File path: js/custome.js
//________home_client_carouse function by = owl.carousel.js ________//
function home_client_carousel(){
jQuery('.home-client-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots: false,
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 page_loader() {
jQuery('.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-spinner">
<div class="cssload-cube cssload-cube0"></div>
<div class="cssload-cube cssload-cube1"></div>
<div class="cssload-cube cssload-cube2"></div>
<div class="cssload-cube cssload-cube3"></div>
<div class="cssload-cube cssload-cube4"></div>
<div class="cssload-cube cssload-cube5"></div>
<div class="cssload-cube cssload-cube6"></div>
<div class="cssload-cube cssload-cube7"></div>
<div class="cssload-cube cssload-cube8"></div>
<div class="cssload-cube cssload-cube9"></div>
<div class="cssload-cube cssload-cube10"></div>
<div class="cssload-cube cssload-cube11"></div>
<div class="cssload-cube cssload-cube12"></div>
<div class="cssload-cube cssload-cube13"></div>
<div class="cssload-cube cssload-cube14"></div>
<div class="cssload-cube cssload-cube15"></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
IconFont
FlatIcon
If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/7xtheme ).
This documentation is March 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!