Documentation

Vibetech - Creative Digital Agency HTML Template

Thank you so much for purchasing our item from themeforest

  • 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.


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.

Yes. You can customize our items to fit the needs of your end product
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.
The item is what you purchase from Envato Market. The end product is what you build with that item.
- 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).
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