Basic Template Structure
The template has a responsive layout and is based on the Bootstrap 5 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 header-sticky">
<div class="topbar d-none d-md-block">
[TOPBAR CONTENT]
</div>
<nav class="navbar navbar-expand-lg">
[MENU CONTENT]
</nav>
</header>
<!-- header -->
<!-- Side Menu -->
<div class="offcanvas offcanvas-start">
[SIDE MENU CONTENT]
</div>
<!-- Side Menu -->
<!-- Search -->
<div id="search">
[SEARCH CONTENT]
</div>
<!-- Search -->
<!-- Breaking News -->
<section class="breaking-news">
[BREAKING NEWS CONTENT]
</section>
<!-- Breaking News -->
<!-- News Latest Posts -->
<section class="news-latest-posts">
[NEWS LATEST POSTS CONTENT]
</section>
<!-- News Latest Posts -->
<!-- Section -->
<section class="space-sm-ptb">
[SECTION CONTENT]
</section>
<!-- Section -->
<!-- Explore Products -->
<section class="space-lg-pb explore-products">
[EXPLORE PRODUCTS CONTENT]
</section>
<!-- Explore Products -->
<!-- Live Videos -->
<section class="space-lg-ptb bg-holder video-section">
[LIVE VIDEOS CONTENT]
</section>
<!-- Live Videos -->
<!-- footer -->
<footer class="footer">
[FOOTER_CONTENT]
</footer>
<!-- footer -->
<!-- Back To Top -->
<div class="back-to-top">
[BACK TO TOP_CONTENT]
</div>
<!-- Back To Top -->
<!-- Modal -->
<div class="modal modal-xl fade news-popup" id="promo-popup" role="dialog">
[MODAL CONTENT]
</div>
<!-- Modal -->
<!-- Javascript -->
[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/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/owl-carousel/owl.carousel.min.css" /> <link rel="stylesheet" href="css/magnific-popup/magnific-popup.css" /> <link rel="stylesheet" href="css/range-slider/ion.rangeSlider.css" /> <link rel="stylesheet" href="css/slick/slick-theme.css" /> <link rel="stylesheet" href="css/select2/select2.css" /> <!-- Template Style --> <link rel="stylesheet" href="css/style.css" />
- all.min.css: This is a Font-awesome CSS.
- bootstrap.min.css: This is a Bootstrap 5 CSS file. You must need this file. Do not remove this.
- owl.carousel.min.css: This is an owl carousel plugins CSS.
- magnific-popup.css: This is a magnific popup plugins CSS.
- range-slider.min.css: This is a range slider plugins CSS.
- slick.css: This is a slick slider plugins CSS.
- select2.min.css: This is a select2 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.6.0.min.js"></script> <script src="js/jquery.appear.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/select2/select2.full.js"></script> <script src="js/owl-carousel/owl.carousel.min.js"></script> <script src="js/magnific-popup/jquery.magnific-popup.min.js"></script> <script src="js/slick/slick.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.
- select2.full.js: This is the select2 plugins file. Use to select dropdown 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.
- jquery.magnific-popup.min.js: This is Magnific popup plugins file. 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.