Basic template Structure
The template has a responsive layout and is based on the Bootstrap 4 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Click Here to know more about Bootstrap.
HTML Structure
Here is the general HTML structure of the template:
<!DOCTYPE html>
<html lang="en">
<head>
[Page meta, page css, page title etc...]
</head>
<body>
<!--header -->
<header class="header">
<div class="topbar">
[TOP BAR CONTENT]
</div>
<nav class="navbar navbar-light bg-white navbar-static-top navbar-expand-lg">
[MENU CONTENT]
</nav>
</header>
<!--header -->
<!--Modal login -->
<div class="modal login fade" id="loginModal">
[Modal CONTENT]
</div>
<!--Modal login -->
<!-- Banner -->
<section class="banner bg-holder bg-overlay-black-30" style="background-image: url(images/banner-01.jpg);">
[BANNER CONTENT]
</section>
<!-- Banner -->
<!--Section 1 -->
<section class="space-ptb">
[SECTION 1 CONTENT]
</section>
<!--Section 1 -->
<!--Section 2 -->
<section class="space-pb">
[SECTION 2 CONTENT]
</section>
<!--Section 2 -->
<!--footer -->
<footer class="footer bg-dark space-pt">
[FOOTER CONTENT]
</footer>
<!--footer -->
[PAGE JAVASCRIPTS HERE]
</body>
</html>
CSS Structure
Here is the general CSS structure of the template:
<!-- CSS Global Compulsory (Do not remove)--> <link rel="stylesheet" href="css/font-awesome/all.min.css" /> <link rel="stylesheet" href="css/flaticon/flaticon.css" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <!-- Page CSS Implementing Plugins (Remove the plugin CSS here if site does not use that feature)--> <link rel="stylesheet" href="css/select2/select2.css" /> <link rel="stylesheet" href="css/range-slider/ion.rangeSlider.css" /> <link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css" /> <link rel="stylesheet" href="css/magnific-popup/magnific-popup.css" /> <!-- Template Style --> <link rel="stylesheet" href="css/style.css" />
- all.min.css: This is a Font-awesome CSS.
- flaticon.css: This is a Flaticon font icon CSS.
- bootstrap.min.css: This is a Bootstrap 4 CSS file. You must need this file. Do not remove this.
- select2.css: This is a Select 2 plugins CSS.
- rangeSlider.css: This is an ion range slider plugins CSS.
- owl.carousel.min.css: This is an owl carousel plugins CSS.
- magnific-popup.css: This is a magnific popup plugins CSS.
- style.css: This is a main stylesheet of the template, This file contains the styling for the actual Template.
Javascript Structure
Here is the general Javascript structure of the template:
<!-- JS Global Compulsory (Do not remove)--> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper/popper.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> <!-- Page JS Implementing Plugins (Remove the plugin script here if site does not use that feature)--> <script src="js/jquery.appear.js"></script> <script src="js/counter/jquery.countTo.js"></script> <script src="js/select2/select2.full.js"></script> <script src="js/range-slider/ion.rangeSlider.min.js"></script> <script src="js/owl-carousel/owl-carousel.min.js"></script> <script src="js/jarallax/jarallax.min.js"></script> <script src="js/jarallax/jarallax-video.min.js"></script> <script src="js/magnific-popup/jquery.magnific-popup.min.js"></script> <!-- Template Scripts (Do not remove)--> <script src="js/custom.js"></script>
- jquery.js: This is a JavaScript library file. You must need this file to run any javascript. Do not change or edit this file.
- popper.min.js: This is popper plugins file. Use to Tooltip. Do not change or edit this file.
- bootstrap.min.js: This is a bootstrap plugins file. Use to Bootstrap Library JavaScript. Do not change or edit this file.
- jquery.appear.js: This is appear plugins file. Do not change or edit this file.
- jquery.countTo.js: This is the countTo plugins file. Use to Count Number Do not change or edit this file.
- select2.full.js: This is a select2 plugins file. Use to convert select tag to ul tag. Do not change or edit this file.
- ion.rangeSlider.min.js: This is the ion.rangeSlider plugins file. Use to price filter. Do not change or edit this file.
- owl-carousel.min.js: This is owl-carousel plugins file. Use to Banner slider. Do not change or edit this file.
- jarallax.min.js: This is a jarallax plugins file. Use to parallax background-images. Do not change or edit this file.
- jarallax-video.js: This is a jarallax-video plugins file. Use to parallax background-video. Do not change or edit this file.
- jquery.magnific-popup.min.js: This is a magnific-popup plugins file. Use to images popup and popup slider. Do not change or edit this file.
- custom.js: This File includes all small scripts from the template. All script has commented code so you can easily remove unnecessary code from this file. Make sure you remove/add proper files before you remove or add anything in this file.