“Appzoc - Multipurpose Bootstrap 5 HTML Template ”

Welcome to Appzoc Multipurpose Template! We would like to thank you for purchasing our theme. It is built using HTML5, CSS3, and the Bootstrap 5 Framework. Appzoc Multipurpose Theme consists of 18 demos and dozens of inner pages. Additionally, there are over 100 reusable blocks to fit all your needs. Each file of the theme is W3C validated, ensuring code quality, compatibility, and adherence to best practices.

VS code editor - For Editing The Code That's It.

Let's understand the folder structure to facilitate template customization.

1. Assets:

In Assets Folder You Will Find Folders Such as css,js and img

1. Img:

Also You Will Notice Images In The Asset Folder that are used in The Theme. Image Source : https://unsplash.com/ , https://www.freepik.com/ and https://www.flaticon.com/

2. CSS:

In css folder you will find one folder as "inner-pages-css" and several css files inside this folder. "inner-pages-css" folder consist of the css file that are used In the inner pages of the theme. Also there are various css files directly under the root "css" folder.These files are used to design the Main Demos Of The Theme.

Inner Pages Css: we have separtely managed css as per the specific page so that you can efficiently customize the Theme as per your requirement. Eg: to design inner page "https://appzoc.vercel.app/inner-pages/blog_detail.html" there is separate css file used to design this inner page as "blog-detail.css" under the "inner-pages-css" folder.

Root Css Files Under Css Folder: Similar to inner pages css we have separately managed each css files for the efficient Customization of the theme. Eg: to design "https://appzoc.vercel.app/index-app-landing-1.html" we have css file as "style-app-landing-1.css".

Similarly, you can search the keyword "<!-- External CSS -->" by clicking "ctrl + f" in VS Code to know the CSS file used for each page of the theme. For example, for the app landing theme, you will notice this line by searching "<!-- External CSS -->" in the "index-app-landing-1.html" file:

                    <link rel="stylesheet" href="assets/css/style-app-landing-1.css">
                    

Each Section Of The Css Files Is Well Commented for your easiness in customizing the theme.

You Can Visit This Site : "https://www.w3schools.com/css/default.asp" for Undestanding each properties used in the css folders.

Similarly, CSS for other pages is organized in a similar manner. You can refer to the example for the App landing demo below:

Example CSS Code For app landing demo : assets/css/style-app-landing-1.css

								
    /* ==== Main CSS ==== */


    /* ====== Whole HTML Document ======= */

    * {
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Outfit', sans-serif;
    }
    
    ...
    ... 
    ...
    
    /* ======= Preloader Section ======== */


    .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 0%);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    }

    ...
    ... 
    ...

    /* ====== Navbar Section ====== */

    ...
    ... 
    ...
								  
							

3. JS:

In the "JS" folder, you will find a file named "script.js" that is responsible for handling the logic used throughout the theme.

Each section of the JS code is well-commented, providing explanations and descriptions of the code's functionality.

JS Code : assets/js/script.js

								
							  
									
    $(document).ready(function(){

        // Ensures that the navbar is closed when a navbar item is clicked

	    $(".nav-item").click(function () {
                ...
                ... 
                ...
            });	

        // end
        
        // Faq section accordian tabs

        $('.accordian-content').not(':eq(0)').hide();
        $('.accordian-button').click(function () {
            ...
            ... 
            ... 
        });

        // end

         		
    });

								
						

2. Documentation:

In the "documentation" folder, you will notice an "asset" folder that contains the dependencies required for the documentation.

Additionally, there is a file named "index-documentation.html" that serves as the main documentation file. It contains the usage guide and other relevant information.

3. inner-pages:

In the "inner-pages" folder, you will find several HTML files. These files contain the HTML code for the inner pages of the theme. For example, you will find files such as "blog_detail.html" and "login.html" among others.

4. HTML FILES(root folder)

In this folder, you will find all the HTML files for the main pages of the theme. For example, you will find files such as "index-single-course.html," "index-blog.html," "index-app-landing-1.html," and so on.

Lets Understand How To Change Content Of The Theme