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>Magzin - Creative Magazine & Blog HTML 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/[ Google font ]/[ Google font ].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/logo/logo-gradient.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 sec-padding overflow-hidden">
                <div class="container">
                    <div class="row">
                        <div class="col-12 text-center">
                            <a class="dark-mode-invert" href="index.html"><img src="assets/imgs/template/logo/logo-big.png" alt="magzin" /></a>
                            <p class="text-dark mb-5 mt-2">Your Gateway to Global News</p>
                            <div class="d-flex flex-wrap justify-content-center align-items-center gap-lg-5 gap-md-4">
                                <a href="#" class="text-600 hover-dark d-block px-2 button-effect-1">Privacy Policy</a>
                                <a href="#" class="text-600 hover-dark d-block px-2 button-effect-1">Term of Use</a>
                                <a href="#" class="text-600 hover-dark d-block px-2 button-effect-1">Careers</a>
                                <a href="#" class="text-600 hover-dark d-block px-2 button-effect-1">Help</a>
                                <a href="#" class="text-600 hover-dark d-block px-2 button-effect-1">Become author</a>
                            </div>
                        </div>
                    </div>
                </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="M20 1a19 19 0 1 1 0 38 19 19 0 0 1 0-38" />
            </svg>
        </div>

Scripts

     
        <!-- Libs JS -->
        <script src="assets/js/vendors/jquery-3.7.1.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/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/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>
        <!-- Theme JS -->
        
        <script src="assets/js/gsap-custom.js"></script>
        <script src="assets/js/main.js"></script>