# Installation

Follow the steps below to get started with your Site Template:

1. Unzip the downloaded zip file `themeforest-xxxxx.zip` folder
2. Open folder named `main-file`
3. Here you will find `assets` folders of all files
4. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
5. Make sure you upload the required files/folders listed below:
   - Followings are files and sub-folders saved in this folder
   - `css` - Extra Stylesheets Folder plus Main Stylesheet File
   - `images` - Images Folder
   - `jquery` - Javacripts Folder
   - `video` - Videos Folder
   - `.html` extension files - main page template File
6. You will need to Upload these files to your Web Server using FTP in order to use it on your Website and give the paths of files in `.html` extension files.
7. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

# HTML Structure

### Index Screen Structure

Index Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Index Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- All Content Section -->
                        <section id="splashscreen">
                        ...
                        </section>
                        </div>
                        <!-- Index Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### OnBoarding Screen Structure

OnBoarding Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- OnBoarding Screen Details Start -->
                        <div class="site_content">
                        <!-- OnBoarding Screen slider -->
                        <div id="carouselExampleIndicators" class="carousel slide">
                        <div class="carousel-inner">
                        <div class="carousel-item">
                        ...
                        </div>
                        <div class="carousel-item">
                        ...
                        </div>
                        <div class="carousel-item">
                        ...
                        </div>
                        </div>
                        </div>
                        </div>
                        <!-- OnBoarding Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Sign In Screen Structure

Sign In Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Sign In Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- All Content Section -->
                        <section id="sign-in-screen">
                        ...
                        </section>
                        </div>
                        <!-- Sign In Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Sign Up Screen Structure

Sign Up Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Sign Up Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- All Content Section -->
                        <section id="sign-up-screen">
                        ...
                        </section>
                        </div>
                        <!-- Sign Up Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Forget Password Screen Structure

Forget Password Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Forget Password Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="forget-screen-sec">
                        ...
                        </section>
                        </div>
                        <!-- Forget Password Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Verify Screen Structure

Verify Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Verify Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="verify-screen-sec">
                        ...
                        </section>
                        </div>
                        <!-- Verify Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### New Password Screen Structure

New Password Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- New Password Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="new-password-sec">
                        ...
                        </section>
                        </div>
                        <!-- Verify Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Select Language Screen Structure

Select Language Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Select Language Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="select-language-page">
                        ...
                        </section>
                        </div>
                        <!-- Select Language Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Interest Screen Structure

Interest Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Interest Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="interest-sec-page">
                        ...
                        </section>
                        </div>
                        <!-- Interest Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Homepage1 Screen Structure

Homepage1 Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Homepage1 Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="homepage1-sec">
                        ...
                        </section>
                        <!-- SideMenu Details -->
                        <div class="menu-sidebar details">
                        <div class="offcanvas offcanvas-start">
                        <div class="offcanvas-header">
                        ...
                        </div>
                        <div class="offcanvas-body">
                        ...
                        </div>
                        </div>
                        </div>
                        <!--  pwa install app popup start-->
                        <div class="offcanvas offcanvas-bottom addtohome-popup theme-offcanvas" id="offcanvas">
                        ...
                        </div>
                        <!-- Bottom Navigation Section -->
                        <div class="bottom-navigation">
                        ...
                        </div>
                        </div>
                        <!-- Homepage1 Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Homepage2 Screen Structure

Homepage2 Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Homepage2 Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="homepage2-sec">
                        ...
                        </section>
                        <!-- SideMenu Details -->
                        <div class="menu-sidebar details">
                        <div class="offcanvas offcanvas-start">
                        <div class="offcanvas-header">
                        ...
                        </div>
                        <div class="offcanvas-body">
                        ...
                        </div>
                        </div>
                        </div>
                        <!-- Bottom Navigation Section -->
                        <div class="bottom-navigation">
                        ...
                        </div>
                        </div>
                        <!-- Homepage2 Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Category Screen Structure

Category Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Category Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="category-page-sec">
                        ...
                        </section>
                        </div>
                        <!-- Category Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Single Category Screen Structure

Single Category Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Single Category Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="single-category-page">
                        ...
                        </section>
                        </div>
                        <!-- Single Category Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Search Page Screen Structure

Search Page Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Search Page Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="search-page-sec">
                        ...
                        </section>
                        </div>
                        <!-- Search Page Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Filter Page Screen Structure

Filter Page Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Filter Page Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="filter-page">
                        ...
                        </section>
                        </div>
                        <!-- Filter Page Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Single Prodcut Page Screen Structure

Single Prodcut Page Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Single Prodcut Page Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="single-prduct-page">
                        ...
                        </section>
                         <!-- Product Video Modal -->
                        <div id="product-video-modal" class="modal" >
                        ...
                        </div>
                        </div>
                        <!-- Single Prodcut Page Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Single Prodcut Page2 Screen Structure

Single Prodcut Page2 Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Single Prodcut Page2 Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="product-page2-sec">
                        ...
                        </section>
                        </div>
                        <!-- Single Prodcut Page2 Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Shopping Cart Screen Structure

Shopping Cart Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Shopping Cart Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="shopping-page">
                        ...
                        </section>
                        </div>
                        <!-- Shopping Cart Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Checkout Screen Structure

Checkout Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Checkout Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="checkout-page">
                        ...
                        </section>
                        </div>
                        <!-- Checkout Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Paypal Screen Structure

Paypal Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Paypal Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <form id="payment-form-deatils">
                        ...
                        </form>
                        </div>
                        <!-- Paypal Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Payment Success Screen Structure

Payment Success Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Payment Success Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- All Content Section -->
                        <section id="payment-success-first">
                        ...
                        </section>
                        </div>
                        <!-- Payment Success Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Track Order Screen Structure

Track Order Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Track Order Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="track-order-page" >
                        ...
                        </section>
                        </div>
                        <!-- Track Order Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Product Rate Screen Structure

Product Rate Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Product Rate Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="product-rate-page" >
                        ...
                        </section>
                        </div>
                        <!-- Product Rate Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Reviews Screen Structure

Reviews Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Reviews Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="review-sec-page1" >
                        ...
                        </section>
                        <!-- Review Video Modal -->
                        <div id="review-video-modal" class="modal" >
                        ...
                        </div>
                        </div>
                        <!-- Reviews Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Parterner Page Screen Structure

Parterner Page Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Parterner Page Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="partner-page" >
                        ...
                        </section>
                        </div>
                        <!-- Parterner Page Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Tranding Page Screen Structure

Tranding Page Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Tranding Page Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="tranding-page" >
                        ...
                        </section>
                        </div>
                        <!-- Tranding Page Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Favourite Page Screen Structure

Favourite Page Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Favourite Page Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="favourite-page">
                        ...
                        </section>
                        <!-- SideMenu Details -->
                        <div class="menu-sidebar details">
                        <div class="offcanvas offcanvas-start">
                        <div class="offcanvas-header">
                        ...
                        </div>
                        <div class="offcanvas-body">
                        ...
                        </div>
                        </div>
                        </div>
                        <!-- Bottom Navigation Section -->
                        <div class="bottom-navigation">
                        ...
                        </div>
                        </div>
                        <!-- Favourite Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Notification Screen Structure

Notification Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Notification Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="notification-page">
                        ...
                        </section>
                        <!-- SideMenu Details -->
                        <div class="menu-sidebar details">
                        <div class="offcanvas offcanvas-start">
                        <div class="offcanvas-header">
                        ...
                        </div>
                        <div class="offcanvas-body">
                        ...
                        </div>
                        </div>
                        </div>
                        <!-- Bottom Navigation Section -->
                        <div class="bottom-navigation">
                        ...
                        </div>
                        </div>
                        <!-- Notification Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Profile Screen Structure

Profile Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Profile Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="profile-page-sec">
                        ...
                        </section>
                        <!-- SideMenu Details -->
                        <div class="menu-sidebar details">
                        <div class="offcanvas offcanvas-start">
                        <div class="offcanvas-header">
                        ...
                        </div>
                        <div class="offcanvas-body">
                        ...
                        </div>
                        </div>
                        </div>
                        <!-- Bottom Navigation Section -->
                        <div class="bottom-navigation">
                        ...
                        </div>
                        </div>
                        <!-- Profile Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Wallet Screen Structure

Wallet Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Wallet Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="wallet-page-sec">
                        ...
                        </section>
                        </div>
                        <!-- Wallet Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### App Setting Screen Structure

App Setting Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- App Setting Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="app-setting-page">
                        ...
                        </section>
                        </div>
                        <!-- App Setting Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Currency Screen Structure

Currency Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Currency Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="currency-sec">
                        ...
                        </section>
                        </div>
                        <!-- Currency Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Change Language Screen Structure

Change Language Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Change Language Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="change-language-page">
                        ...
                        </section>
                        </div>
                        <!-- Change Language Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### About Us Screen Structure

About Us Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- About Us Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="about-deatils">
                        ...
                        </section>
                        </div>
                        <!-- About Us Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Term&Services Screen Structure

Term&Services follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- Term&Services Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="term-services-deatils">
                        ...
                        </section>
                        </div>
                        <!-- Term&Services Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### FAQ Screen Structure

FAQ Screen follows a simple coding structure. here is the sample:

                        <!DOCTYPE html>
                        <html lang="zxx" dir="ltr">
                        <!-- All your metas will be here -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <head>
                        <!-- Your Stylesheets, Title -->
                        ...
                        </head>
                        <body>
                        <!-- FAQ Screen Details Start -->
                        <div class="site_content">
                        <!-- Prelaoder Section -->
                        <div class="loader-mask">
                        ...
                        </div>
                        <!-- Header Section -->
                        <Header id="top-navbar" class="top-navbar">
                        ...
                        </header>
                        <!-- All Content Section -->
                        <section id="faq-sec">
                        ...
                        </section>
                        </div>
                        <!-- FAQ Screen Details End -->
                        <!-- Your All Scripts will be here ->
                        ...
                        </body>
                        </html>

### Favicons

You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:

    <link href="assets/images/favicon/icon.png" rel="icon">

# Logo Settings

The Logo Container can be found in the - `index.html`file

    <div class="logo_sec"><a href="javascript:void(0)"><img src="assets/images/splashscreen/logo.png" alt="logo"></a></div>

# Changing Fonts

Change your Fonts from Google Fonts Library directly if you plan to use a Google Font. You can find the Linking to the Font Files in the `head` tag

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

# Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

- #### Image Compression & Optimization

  We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

  - Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's `<img>` Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of `1200px` x `800px` in a Content Size of `300px` x `200px` as this is unnecessary. Resize it to `300px` x `200px`
  - Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
  - Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
    For MAC use ImageOptim
    For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.

- #### CSS & jQuery Minifications

  It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
  For CSS use CSS Minifier and For Javascript use Javascript Minifier.

- #### Fast Web Hosting Servers

  A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

# Header

You can choose the headers while creating your Pages. Default Header with a Transparent Background while turns Stickey after a little scrolling &,you can make header without stickey effect for this just remove the `.fixed` from the `header` tag. Simply follow the structure below to create the header:

                              <!-- Header Start -->
                              <header id="top-navbar" class="top-navbar fixed">
                              <div class="container">
                              ...
                              </div>
                              </header>
                              <!-- Header End -->

## Bottom Navigation Menu Structure

If you want to edit the menu from the bottom navigation menu, for that you have to visit the home-page there you can easily find out the code for the bottom navigation menu. You may also discover the bottom navigation menu in notification page ,profile page and many more respectively.

                              <!-- Bottom Navigation Menu start here -->
                              <div class="bottom-panel nagivation-menu-wrap">
                              <ul class="sc-bottom-bar furniture-bottom-nav" id="furniture_navbar">
                              <li class="nav-menu-icon">
                              ...
                              </li>
                              <li class="nav-menu-icon">
                              ...
                              </li>
                              </ul>
                              </div>
                              <!-- Bottom Navigation menu end here -->

# Components

### Bootstrape Slider Structure

Brookwood refer a simple Bootstrape Slider structure.

                            <!-- Slider Structure -->
                            <div id="carouselExampleIndicators" class="carousel slide">
                            <div class="carousel-inner">
                            <div class="carousel-item">
                            ...
                            </div>
                            <div class="carousel-item">
                            ...
                            </div>
                            </div>
                            </div>

### Bootstrape Accordian Structure

Brookwood refer a simple Bootstrape Accordian structure.

                            <!-- Slider Structure -->
                            <div id="accordionPanelsStayOpenExample" class="accordion custom-acc">
                            <div class="accordion-item">
                            ...
                            </div>
                            <div class="accordion-item">
                            ...
                            </div>
                            </div>

### Bootstrape TabBar Structure

Brookwood refer a simple Bootstrape TabBar structure.

                            <!-- TabBar Structure -->
                            <div class="searchpage-second-sec">
                            <ul class="nav nav-pills search-tab" id="pills-tab">

                            <li class="nav-item">
                            <button class="nav-link search-btn" id="chair-tab" data-bs-toggle="pill" data-bs-target="#pills-chair">
                            ...
                            </button>
                            </li>

                            <li class="nav-item">
                            <button class="nav-link search-btn" id="table-tab" data-bs-toggle="pill" data-bs-target="#pills-table">
                            ...
                            </button>
                            </li>

                            </ul>
                            </div>

                            <div class="tab-content" id="pills-furnitureContent">
                            <div class="tab-pane" id="pills-chair" >
                            ...
                            </div>
                            <div class="tab-pane" id="pills-table" >
                            ...
                            </div>
                            </div>

# Columns & Grid

### Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

# Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

- `position-relative & h-100 & w-100` - Width, height, position helper
- `d-none & d-block & d-flex` - Display helper
- `text-left & text-center & text-right` - Text align helper
- `justify-content-center & justify-content-start & justify-content-end & justify-content-between & align-items-start & align-items-center & align-items-end & flex-column & flex-wrap & flex-1` - Flex helper
- `overflow-hidden` - Overflow helper
- `text-uppercase & text-capitalize & text-normal` - Text transform helper

# Slider Types & their Options

Brookwood includes Sliders are mentioned as follows:

- Slick slider

  You can find the slick slider-related Documentation here.

  Slick Sliders Docs

- Bootstrape Carousel

  You can find the Bootstrape carousel related Documentation here.

  Bootstrape Docs

# Introduction

Brookwood boasts of a many handy features which are quite powerful, flexible, functional & easy to use. you can do changes in features very easily. Here is the List of features that uses in this website:

- `Sections`
- `Container`
- `Columns`
- `Row`
- `Animations`
- `Slick Slider`
- `Bootstrape Carousels`
- `Font Awesome 6 Icons`
- `Buttons`
- `Search Bar`
- `Header`
- `Counter`
- `Track Order Design`
- `Counter Design`
- `Switch`
- `Video Design with play`
- `FAQ`
- `Navbar`
- `Otp Section`
- `Google Map Included`
- `Tabbar`
- `Payment Method`
- `Responsive Design`

Each of the above mentioned features are easily extendable, flexible & easy to use. You can find the sample codes from stylesheet. We are explaining a few of them for your Reference.

# Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with Bistro. You can use animations on any element you want. Here is the Sample Code:

                             .fixed {
                              animation: fixedheader 600ms ease 0ms 1 forwards;
                            }

                            @keyframes fixedheader {
                              from {
                                transform: translateY(-100%);
                              }
                              to {
                                transform: translateY(0);
                              }
                            }

    <div class="" data-aos="zoom-in" ></div>

You can also use delays for your Animations:

    <div class="" data-aos-duration="3000" data-aos-delay="300"></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

- `bounce`
- `flash`
- `pulse`
- `rubberBand`
- `shake`
- `swing`
- `tada`
- `wobble`
- `bounceIn`
- `bounceInDown`
- `bounceInLeft`
- `bounceInRight`
- `bounceInUp`
- `bounceOut`
- `bounceOutDown`
- `bounceOutLeft`
- `bounceOutRight`
- `bounceOutUp`
- `fadeIn`
- `fadeInDown`
- `fadeInDownBig`
- `fadeInLeft`
- `fadeInLeftBig`
- `fadeInRight`
- `fadeInRightBig`
- `fadeInUp`
- `fadeInUpBig`
- `fadeOut`
- `fadeOutDown`
- `fadeOutDownBig`
- `fadeOutLeft`
- `fadeOutLeftBig`
- `fadeOutRight`
- `fadeOutRightBig`
- `fadeOutUp`
- `fadeOutUpBig`
- `flip`
- `flipInX`
- `flipInY`
- `flipOutX`
- `flipOutY`
- `lightSpeedIn`
- `lightSpeedOut`
- `rotateIn`
- `rotateInDownLeft`
- `rotateInDownRight`
- `rotateInUpLeft`
- `rotateInUpRight`
- `rotateOut`
- `rotateOutDownLeft`
- `rotateOutDownRight`
- `rotateOutUpLeft`
- `rotateOutUpRight`
- `hinge`
- `rollIn`
- `rollOut`
- `zoomIn`
- `zoomInDown`
- `zoomInLeft`
- `zoomInRight`
- `zoomInUp`
- `zoomOut`
- `zoomOutDown`
- `zoomOutLeft`
- `zoomOutRight`
- `zoomOutUp`

# Icons

Font Awesome 6

# Images

- The Stocks
- Unsplash
- Pixels
- Freepik
- RaumRot
- Picjumbo
- Stockphotos.io
- Imcreator FREE
- Flickr CC-Search
- Mazwai (Stock Footage)

# jQuery

- Bootstrap 5
- Slick Slider
- Bootstrape Carousel

# CSS & Fonts

- `style.css`- use style css
- `media-query.css`- responsive media query css
- Bootstrap 5
- Font awesome 6 Icons
- Slick Slider
- Google Fonts
  1. Poppins
  2. Inter