# Documentation

## Vibetech - Creative Digital Agency HTML Template

Thank you so much for purchasing our item from themeforest

- Version: 1.0
- Author: mthemeus

- Created: 19 August 2023

## Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   - `HTML/css` - Stylesheet files
   - `HTML/image` - Images files
   - `HTML/js` - Javacript files
   - `HTML/scss` - Sass files
   - `HTML/plugins` – All external libs.
   - `HTML/index.html` - Homepage
3. You should upload all or specific HTML files as per your need.
4. You are good to go for adding your content now!

## HTML Structure

Arcatec follows a simple and easy to customize coding structure. Here is the sample for your reference:

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <!-- Your Title, Description, Stylesheets
    ============================================= -->

    </head>

    <body>

    <!-- Document Wrapper
    =============================== -->
    <div class="page-wrapper overflow-hidden">

      <!-- Header
      ============================ -->
      <header class="site-header site-header--dark bg-secondary">
        <div class="container"> ...... </div>
      </header>
      <!-- Header End -->

        <!-- Your Page Content goes here  -->

      <!-- Footer -->
      <footer  class="footer-section">
        <div class="container"> ...... </div>
      </footer>
      <!-- Footer end -->

    </div>
    <!-- Document Wrapper end -->

    <!-- JavaScript -->
    </body>
    </html>

## Sass

We have added SASS `.scss` files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - `HTML/scss`

Open the `sass/abstract` and Edit any file according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required `.scss` Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your `main.scss` File.

## Color Customization

You can change your Website's Colors by modifying following `variable` inside HTML/scss/abstract/_colors.scss

Available Variables:

    $primary-color-orange: #F44730;
    $secondary-color-black: #242424;
    $third-color-off-white: #FCFAF3;
    $heading-font-color:#171717;
    $body-font-color:#67687A;

## Theme Customization

We have include a Custom CSS File in the `css` Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the `css/custom.css` File and link it in the Document `<head>` after the `css/main.css` Linking. Also make sure that this is the Last Linked CSS File in the Document `<head>` so that your Custom CSS Styles are Overwritten properly.

    <head>

    <!-- Bootstrap , fonts & icons  -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/boxicons.min.css">
    <link rel="stylesheet" href="./css/bootstrap-icons.css">

    <!-- Plugin'stylesheets  -->
    <link rel="stylesheet" type="text/css"href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css"href="./css/magnific-popup.css">
    <link rel="stylesheet" type="text/css"href="./css/odometer.css">
    <link rel="stylesheet" type="text/css"href="./css/meanmenu.min.css">

    <!-- Vendor stylesheets  -->
    <link rel="stylesheet" type="text/css" href="./css/style.css">

    <!-- Here goes your responsive.css
    ============================================= -->
    <link rel="stylesheet" type="text/css" href="./css/responsive.css" />
    </head>

## Logo Settings

The Logo can be found in the Header Container and Footer Container

Header logo:

    <!-- Logo -->
     <div class="brand" >
       <a href="#">
        <img class="brand-logo" src="./image/logo.svg" alt="logo" />
      </a>
     </div>
    <!-- Logo End -->

Footer logo:

    <!-- Footer Logo -->
      <div class="footer-brand" >
       <a href="#">
        <img src="./image/logo.svg" alt="logo" />
        <span>Vibetech</span>
      </a>
     </div>
    <!-- Footer Logo End -->

## Layout

Documentation and examples for header, footer, grid

## Header

The list of various header types & its descriptions are provided below for your reference:

#### Header 1

Default header with logo and menu on left side and cart on right side.

#### Header 2

Second header with logo on left side, menu on center and cart on right side.

#### Header 3

Third header with container and logo on left side, menu on center and cta button on right side.

## Footer

Main footer of the website. It contains the logo, the social media links and the contact information.

## Content

Documentation and examples for displaying typography, table, image and video and more..

## Typography

Documentation and examples for typography, headings, body text, lists, and more.

### Headings

Heading | Example
--- | ---
`<h1></h1>` | # h1. Heading
`<h2></h2>` | ## h2. Heading
`<h3></h3>` | ### h3. Heading
`<h4></h4>` | #### h4. Heading
`<h5></h5>` | ##### h5. Heading
`<h6></h6>` | ###### h6. Heading

### Text

Make a paragraph stand out by adding `.text`

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

    <p class="text">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
    </p>

### Inline Text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>

## Icons

Bootstrap icons are supported in Demox.

    <i class="bi-solid bi-arrow-up"></i>
    <i class="bi bi-chevron-right"></i>
    <i class="bi bi-credit-card"></i>
    <i class="bi-brands bi-facebook-f"></i>

## FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

##### Am I allowed to modify the item that I purchased?

Yes. You can customize our items to fit the needs of your end product

##### What does royalty free mean?

Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
Please note that there may be some limits placed on uses under the different license types available on the marketplaces.

##### What do you mean by item and end product?

The item is what you purchase from Envato Market. The end product is what you build with that item.

##### What are examples of permitted end products?

- You can buy a web template, add your text and images, and use it as your website.
- You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale).

##### I'm not sure if my use is covered. What should I do?

Contact through ui8 support.

## Source & Credits

#### Images:

- Freepik
- Unsplash
- Pexels

#### Fonts:

- Epilogue
- Kumbh Sans

#### Scripts:

- jQuery
- Bootstrap 5
- Gsap
- Swiper
- Magnific-Popup
- odometer
- meanmenu

## Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

### Version 1.0

Initial Release