# Zubaz - Startup & SaaS HTML Template

# Zubaz - Startup & SaaS HTML Template v1.0

First of all, thank you for purchasing the `Zubaz` HTML5 Template. You can find the detailed information about the template in this document.
If there is anything you cannot find in this document, you can send an e-mail via the Profile page.

# Zubaz in a Brief

Zubaz Startup & SaaS HTML Template.
In download folder you will find Two folders:

- `Documentation` (Documentation for main template)
- `Zubaz` (Main Template)

Remember, when you want to use the shortCode/element in any pages you need to adjust the section spacing by giving `margin` or `padding`. Don't get panic if you messed up anything when you edit the template. We are always available to support our customer.

# 01Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the `Template` folder to find all the template files. You wil get `Zubaz` folder in there. You need to upload this folder to your hosting web server using FTP or cPanel in order to use it on your website.
2. Below is the folder structure you will see in your website root directory:
   - `Zubaz/assets/css` - Stylesheet files
   - `Zubaz/assets/css/icomoon.css` - Icon/fonts files
   - `Zubaz/assets/images` - Image files
   - `Zubaz/assets/js` - JS files
3. You need to upload all or specific HTML files as per your need.
4. And now you are ready to go to generate your website with this awesome template.

# 02HTML Structure

We are used Bootstrap Latest Version `v5.1.3` framework in this template.
The general template structure is the same throughout the template. Here is the general structure.

            <!doctype html>
            <html class="no-js" lang="en">
            <head>
                <meta charset="utf-8">
                <meta http-equiv="x-ua-compatible" content="ie=edge">
                <title>Zubaz - Startup & SaaS HTML Template</title>
                <meta name="description" content="">
                <meta name="viewport" content="width=device-width, initial-scale=1">

                <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
                <!-- Place favicon.ico in the root directory -->

                <!-- CSS here -->
                <link rel="stylesheet" href="assets/css/.....">
                <link rel="stylesheet" href="assets/css/.....">
                <link rel="stylesheet" href="assets/css/....">
                <link rel="stylesheet" href="assets/css/...">
            </head>
            <body>

                <!-- header-area -->
                <header id="home">

                </header>
                <!-- header-area-end -->

                <!-- main-area -->
                <main class="main-area fix">

                    <!-- All Section Here -->

                </main>
                <!-- main-area-end -->

                <!-- Footer-area -->
                <footer class="footer-area">

                </footer>
                <!-- Footer-area-end -->

                <!-- JS here -->
                <script src="assets/js/vendor/....."></script>
                <script src="assets/js/...."></script>
                <script src="assets/js/..."></script>
            </body>
            </html>

# 04All Pages

Introduce `Zubaz` All Pages

- #### `index.html` is `====>` Home One

- #### `index-02.html` is `====>` Home Two

- #### `index-03.html` is `====>` Home Three

- #### `about.html` is `====>` About Page

- #### `services.html` is `====>` Services Page

- #### `services-details.html` is `====>` Services Details Page

- #### `portfolio-01.html` is `====>` Portfolio Page One

- #### `portfolio-02.html` is `====>` Portfolio Page Two

- #### `portfolio-details.html` is `====>` Portfolio Details Page

- #### `team.html` is `====>` Team Page

- #### `team-details.html` is `====>` Team Details Page

- #### `testimonila.html` is `====>` Testimonila Page

- #### `pricing.html` is `====>` Pricing Page

- #### `blog.html` is `====>` Blog Post

- #### `blog-details.html` is `====>` Blog Details Page

- #### `sign-in.html` is `====>` Sign In Page

- #### `sign-up.html` is `====>` Sign Up Page

- #### `reset-password.html` is `====>` Reset password Post

- #### `faq.html` is `====>` Faq Post

- #### `coming-soon.html` is `====>` Coming Soon Post

- #### `errors-404.html` is `====>` 404 Post

- #### `contact.html` is `====>` Contact Us Page

# 04Favicon Settings

Favicon Will be found in `<head>` section.

        <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

# 05Logo Settings

The Logo will be found in the `<div class="brand-logo">` tag.

            <div class="brand-logo"><a href="index.html"><img src="assets/images/logo/logo-white.svg" alt="logo"></a></div>

You can replace any `.jpg` `.png` `.svg` logo. And set the `width` according to your logo size.

# 06Fonts Settings

In `Zubaz` we use `Syne` & `Inters` font.
You can change both fonts form `app.css Top`:

                    <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@600;700&family=Familjen+Grotesk:wght@600;700&family=Inter:wght@400;600&family=Libre+Baskerville:wght@700&family=Syne:wght@600;700&display=swap" rel="stylesheet">

# 07CSS Structure

The `style.css` file contains all of the specific stylings for the page. The file is separated into sections using:

- #### bootstrap.min.css

  This file includes core bootstrap styles

  Source

- #### font-awesome.css

  This file contains styles about Fontawesome icon library

  Source

  ##### Example

  `<i class="fab fa-facebook-square"></i>`

- #### magnific-popup.css

  This file contains styles about Popup Style

  Source

- #### animate.min.css

  `animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

  Source

  ##### Example

  `<div class="wow slideInLeft"> ... </div>`

- #### slick.css

  This file contains styles about slick carousel plugin

  Source

- #### style.css

  All styles about template

# 08JavaScripts

- #### jQuery 3.6.0

  jQuery is a fast, small, and feature-rich JavaScript library.

  Source

- #### bootstrap.min.js

  Core bootstrap js file

  Source

- #### slick.min.js

  jQuery carousel plugin from Slick

  Source

- #### wow.js

  A lightweight script to animate scrolling.Reveal Animations When You Scroll.

  Source

- #### aos.js

  A lightweight script to animate scrolling. Reveal Animations When You Scroll.

  Source

- #### min.js

  This file contains all script about site.

# 9Credits

- #### Bootstrap

- #### Stock Image Unsplash, Pexels

- #### Fontawesome

- #### Animate.css

# 10Thanks

#### Once again thank you for purchasing one of our Templates

## Best Regards

### mthemeus