File Structure
After running the "npm run build" command, HTML files will be generated in the dist folder. The structure of an HTML file will be as follows:
Head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Infinia - Multi-purpose Bootstrap 5 Template</title>
<script src="assets/js/vendors/color-modes.js"></script>
<!-- Favicon icon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/imgs/template/favicon.svg">
<!-- Libs CSS -->
<link rel="stylesheet" href="assets/css/vendors/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/vendors/swiper-bundle.min.css">
<link rel="stylesheet" href="assets/css/vendors/aos.css">
<link rel="stylesheet" href="assets/css/vendors/odometer.css">
<link rel="stylesheet" href="assets/css/vendors/carouselTicker.css">
<link rel="stylesheet" href="assets/css/vendors/magnific-popup.css">
<link rel="stylesheet" href="assets/fonts/bootstrap-icons/bootstrap-icons.min.css">
<link rel="stylesheet" href="assets/fonts/boxicons/boxicons.min.css">
<link rel="stylesheet" href="assets/fonts/satoshi/satoshi.css">
<!-- Main CSS -->
<link rel="stylesheet" href="assets/css/main.css">
</head>
Preloader
<div id="preloader">
<div id="loader" class="loader">
<div class="loader-container text-centẻ">
<div class="loader-icon">
<img src="assets/imgs/template/favicon.svg" alt="Preloader">
<p>Loading...</p>
</div>
</div>
</div>
</div>
Header
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light w-100 z-999">
</nav>
<!-- offCanvas-menu -->
<div class="offCanvas__info">
</div>
<!-- Offcanvas search -->
<div class="offcanvas offcanvas-top offcanvasTop h-50" tabindex="-1">
</div>
<!-- Mobile menu -->
<div class="mobile-header-active mobile-header-wrapper-style perfect-scrollbar button-bg-2">
</div>
</header>
Main
<main>
<section class="......">
..........
</section>
<section class="......">
..........
</section>
<section class="......">
..........
</section>
<section class="......">
..........
</section>
</main>
Footer
<footer>
<div class="section-footer position-relative">
<div class="container-fluid bgft-1">
<div class="container position-relative z-2">
<div class="row py-90">
<div class="col-lg-4 pe-10" data-aos="fade-zoom-in" data-aos-delay="100">
<a href="index.html"><img src="assets/imgs/logo/logo-white.svg" alt="infinia"></a>
<p class="text-white fw-medium mt-3 mb-6 opacity-50">You may also realize cost savings from your energy efficient choices in your custom home. Federal tax credits for some green materials can allow you to deduct as much.</p>
<div class="d-flex social-icons">
<a href="https://www.facebook.com/" class=" text-white border border-end-0 border-light border-opacity-10 icon-shape icon-md">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="17" viewBox="0 0 10 17" fill="none">
<path d="M8.84863 9.20312H6.5415V16.0938H3.46533V9.20312H0.942871V6.37305H3.46533V4.18896C3.46533 1.72803 4.94189 0.34375 7.1875 0.34375C8.26416 0.34375 9.40234 0.559082 9.40234 0.559082V2.98926H8.14111C6.91064 2.98926 6.5415 3.72754 6.5415 4.52734V6.37305H9.2793L8.84863 9.20312Z" fill="white" />
</svg>
</a>
<a href="https://twitter.com/" class=" text-white border border-end-0 border-light border-opacity-10 icon-shape icon-md">
<i class="bi bi-twitter-x"></i>
</a>
<a href="https://www.linkedin.com/" class=" text-white border border-light border-opacity-10 icon-shape icon-md">
<i class="bi bi-linkedin"></i>
</a>
<a href="https://www.behance.net/" class=" text-white border border-start-0 border-light border-opacity-10 icon-shape icon-md">
<i class="bi bi-behance"></i>
</a>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-3 col-md-4 col-6" data-aos="fade-zoom-in" data-aos-delay="200">
<h3 class="text-white opacity-50 fs-6 fw-black text-uppercase pb-3 pt-5">Company</h3>
<div class="d-flex flex-column align-items-start">
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Mission & Vision</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Our Team</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Careers</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Press & Media</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Advertising</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Testimonials</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6" data-aos="fade-zoom-in" data-aos-delay="300">
<h3 class="text-white opacity-50 fs-6 fw-black text-uppercase pb-3 pt-5">Guides</h3>
<div class="d-flex flex-column align-items-start">
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Our Journeys</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Solutions</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Customers</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">News & Events</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Project management</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Help Center</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6" data-aos="fade-zoom-in" data-aos-delay="400">
<h3 class="text-white opacity-50 fs-6 fw-black text-uppercase pb-3 pt-5">Services</h3>
<div class="d-flex flex-column align-items-start">
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Project software</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Resource software</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Workflow</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Gantt chart makers</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Project dashboards</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Task software</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6" data-aos="fade-zoom-in" data-aos-delay="500">
<h3 class="text-white opacity-50 fs-6 fw-black text-uppercase pb-3 pt-5">Resource</h3>
<div class="d-flex flex-column align-items-start">
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Knowledge Base</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Documents</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">System Status</a>
<a class="hover-effect text-white mb-2 fw-medium fs-6" href="#">Security</a>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center py-4 border-top border-white border-opacity-10">
<span class="text-white opacity-50" data-aos="fade-zoom-in" data-aos-delay="200">Copyright © 2024 Infinia. All Rights Reserved</span>
</div>
</div>
</div>
<div class="position-absolute top-0 start-50 translate-middle-x z-0">
<img src="assets/imgs/footer-1/line-bg.png" alt="infinia">
</div>
<div class="position-absolute top-0 start-0 z-0">
<img src="assets/imgs/footer-1/ellipse-left.png" alt="infinia">
</div>
<div class="position-absolute top-0 end-0 z-0">
<img src="assets/imgs/footer-1/ellipse-right.png" alt="infinia">
</div>
</div>
</footer>
<!-- Scroll top -->
<div class="btn-scroll-top">
<svg class="progress-square svg-content" width="100%" height="100%" viewBox="0 0 40 40">
<path d="M8 1H32C35.866 1 39 4.13401 39 8V32C39 35.866 35.866 39 32 39H8C4.13401 39 1 35.866 1 32V8C1 4.13401 4.13401 1 8 1Z" />
</svg>
</div>
Scripts
<!-- Libs JS -->
<script src="assets/js/vendors/jquery-3.7.1.min.js"></script>
<script src="assets/js/vendors/bootstrap.bundle.min.js"></script>
<script src="assets/js/vendors/swiper-bundle.min.js"></script>
<script src="assets/js/vendors/aos.js"></script>
<script src="assets/js/vendors/wow.min.js"></script>
<script src="assets/js/vendors/headhesive.min.js"></script>
<script src="assets/js/vendors/smart-stick-nav.js"></script>
<script src="assets/js/vendors/jquery.magnific-popup.min.js"></script>
<script src="assets/js/vendors/gsap.min.js"></script>
<script src="assets/js/vendors/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/vendors/isotope.pkgd.min.js"></script>
<script src="assets/js/vendors/ScrollToPlugin.min.js"></script>
<script src="assets/js/vendors/ScrollTrigger.min.js"></script>
<script src="assets/js/vendors/jquery.carouselTicker.min.js"></script>
<script src="assets/js/vendors/jquery.odometer.min.js"></script>
<script src="assets/js/vendors/jquery.appear.js"></script>
<script src="assets/js/vendors/gsap-custom.js"></script>
<script src="assets/js/vendors/bouncing-blob.js"></script>
<!-- Theme JS -->
<script src="assets/js/main.js"></script>