### Welcome

First of all, Thank you so much for purchasing this item. You are really awesome! You are entitled to get free lifetime updates to this product and support from the - ThemeTags team directly.

### Local Setup for HTML Template

There are two ways to change your style (CSS) for your template.

First of all, you can change your style from dist/asseta/css/"your css file".css and then upload the changed file to your live server.

The second way, If you want to change your style through SCSS. In that case, you need to follow the below steps to prepare your local environment and run it on your local. After your changes, you need to build and then upload the dist folder file to your live server.

##### Installation SASS

Install SASS to your local through NodeJs:

Prerequisite: Node.js:

It is used to run the build processes. Download from the NodeJs from the official site and install it on your device according to your Operating System (nodejs.org)

Check NodeJs Version:

- Open the Terminal/ Command Line
- Run: `node -v` or `node --version`
- If you get the version then the installation of NodeJs is done

$ node --version
$ v16.15.0
** Supported nodejs version v16.x.x

Check NPM Version:

- Open the Terminal/ Command Line
- Run: `npm -v` or `npm --version`
- If you get the version then the installation of NodeJs is done

$ npm --version
$ 8.5.5

SASS Install:

- Open the Terminal/ Command Line
- Run: `npm install -g sass`
- Run: `sass --version`
- For Windows user, you need to set sass to the environment path: Go to environment variables - > system variables -> path -> Edit , and include file: C:\Users\<your-user>\AppData\Roaming\npm\sass. Then, Accept everything. and it's done.
- For more information, check: https://sass-lang.com/install

$ sass --version
$ 1.60.0 compiled with dart2js 2.19.5

##### How to Run SASS

- After installing SASS, need to go to your project directory from your terminal/ command line. Path: <your unzip folder>/html/kohost. Check that you have src and dist folders. To check that run on terminal: ls. For RTL version, path will be: <your unzip folder>/html/kohost-rtl.
- Compile and Watch: Run on terminal: sass --watch src/assets/scss/main.scss dist/assets/css/main.css Or, you can generate the CSS file only: sass src/assets/scss/main.scss dist/assets/css/main.css . Official document: https://sass-lang.com/documentation/cli/dart-sass
- Test: to check the changes, open a file (dist/index.html) and reload the page after your change in SCSS file. You will find the SCSS file in src/assets/scss/ folder. SCSS official documentation: https://sass-lang.com/guide

### How to make HTML template live?

Steps to make live:

- Download your item from Envato and unzip it.
- Change files or styles based on your needs. Path: <your unzip folder>/html/kohost. For RTL version path will be <your unzip folder>/html/kohost-rtl.
- After the changes, zip the kohost/dist folder and upload to your hosting webroot.
- Unzip your uploaded file if it is a zip version and browse from your domain: yourdomain.com
- To install the WHMCS template, Please check the WHMCS documentation.

### Folder Structure

After unzipping the downloaded file from Envato, you will get 4 folders -

1. HTML template - folder name: kohost
2. RTL version of HTML template - folder name: kohost-rtl
3. WHMCS templates - folder name: whmcs
4. and Documentation

Kohost HTML template folder structure:

- `dist/` - compiled distribution files or production files
- `src/` - contains all of your core, working files—scss files.
- `src/assets/` - scss files are here

### Template Customization

This is the section that you can find how to customize any section. Before that, you need to know about HTML structure and standard. Please check below:

##### HTML Structure

Here is the HTML Structure of the template. Please check each section of the code. You will gain an idea from here. For more details, please check the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--favicon icon-->
<link rel="icon" href="assets/img/favicon.png" type="image/png" sizes="16x16">
<!--title-->
<title>Kohost - Modern Web Hosting & WHMCS Template</title>
<!--build:css-->
<link rel="stylesheet" href="assets/css/main.css">
<!-- endbuild -->
</head>
<body>
<!--header section start-->
<header id="header" class="header-main">
<!--main header menu start-->
<div id="logoAndNav" class="main-header-menu-wrap bg-transparent fixed-top">
<div class="container">
<nav class="js-mega-menu navbar navbar-expand-md header-nav">
</nav>
</div>
</div>
<!--main header menu end-->
</header>
<!--header section end-->
<div class="main">
<!--hero section start-->
<section class="ptb-100 overflow-hidden primary-bg">
<div class="container">
</div>
<!--end of container-->
</section>
<!--hero section end-->
<!--domain search promo start-->
<section>
<div class="container">
</div>
</section>
<!--domain search promo end-->
<!--promo section start-->
<section class="promo-section ptb-100">
<div class="container">
</div>
</section>
<!--promo section end-->
----
</div>
<!--footer section start-->
<footer class="footer-1 ptb-60 gradient-bg">
<div class="container">
</div>
<!--end of container-->
</footer>
<!--footer bottom copyright start-->
<div class="footer-bottom py-3 gray-light-bg">
<div class="container">
</div>
</div>
<!--footer bottom copyright end-->
<!--footer section end-->
<!--scroll bottom to top button start-->
<div class="scroll-top scroll-to-target primary-bg text-white" data-target="html">
<span class="fas fa-hand-point-up"></span>
</div>
<!--scroll bottom to top button end-->
<!--build:js-->
<script src="assets/js/vendors/jquery-3.6.0.min.js"></script>
<script src="assets/js/vendors/bootstrap.bundle.min.js"></script>
<script src="assets/js/vendors/bootstrap-slider.min.js"></script>
<script src="assets/js/vendors/owl.carousel.min.js"></script>
<script src="assets/js/vendors/magnific-popup.min.js"></script>
<script src="assets/js/vendors/validator.min.js"></script>
<script src="assets/js/vendors/hs.megamenu.js"></script>
<script src="assets/js/app.js"></script>
<!--endbuild-->
</body>
</html>

##### Head of the Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--favicon icon-->
<link rel="icon" href="assets/img/favicon.png" type="image/png" sizes="16x16">
<!--title-->
<title>Kohost - Modern Web Hosting & WHMCS Template</title>
<!--build:css-->
<link rel="stylesheet" href="assets/css/main.css">
<!-- endbuild -->
</head>

##### How to change page title?

In this head section, you can find the `title` tag. Just replace the text in `title` tag. Here is the code block:

<!--title-->
<title>Kohost - Modern Web Hosting & WHMCS Template</title>

##### How to change Favicon?

In the Head, check the below code and change the favicon path from href:

<!--favicon icon-->
<link href="{$WEB_ROOT}/templates/{$template}/img/favicon.png" rel="shortcut icon">

##### Header Section

In this header part, you will find the main menu and the topbar menu. Check the sample at the below:

<!--header section start-->
<header id="header" class="header-main">
<!--main header menu start-->
<div id="logoAndNav" class="main-header-menu-wrap bg-transparent fixed-top">
<div class="container">
<nav class="js-mega-menu navbar navbar-expand-md header-nav">
<!--logo start-->
<a class="navbar-brand" href="index.html"><img src="assets/img/logo-white.png" width="120" alt="logo"
class="img-fluid"/></a>
<!--logo end-->
<!--responsive toggle button start-->
<button type="button" class="navbar-toggler btn"
aria-expanded="false"
aria-controls="navBar"
data-toggle="collapse"
data-target="#navBar">
<span id="hamburgerTrigger">
<span class="ti-menu"></span>
</span>
</button>
<!--responsive toggle button end-->
<!--main menu start-->
<div id="navBar" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto main-navbar-nav">
<!--home start-->
<li class="nav-item hs-has-mega-menu custom-nav-item" data-position="center">
<a id="homeMegaMenu" class="nav-link custom-nav-link main-link-toggle"
href="javascript:void(0);" aria-haspopup="true" aria-expanded="false">Home</a>
<!--home mega menu start-->
<div class="hs-mega-menu main-sub-menu w-100" aria-labelledby="homeMegaMenu">
...
</div>
<!--home mega menu end-->
</li>
<!--home end-->
<!--pages start-->
<li class="nav-item hs-has-sub-menu custom-nav-item">
<a id="pagesMegaMenu" class="nav-link custom-nav-link main-link-toggle"
href="javascript:void(0);" aria-haspopup="true" aria-expanded="false"
aria-labelledby="pagesSubMenu">Pages</a>
<!-- Pages - Submenu -->
<ul id="pagesSubMenu" class="hs-sub-menu main-sub-menu" aria-labelledby="pagesMegaMenu"
style="min-width: 230px;">
<li class="nav-item submenu-item">
<a class="nav-link sub-menu-nav-link" href="about-us.html">About Us</a>
</li>
...
</ul>
<!-- End Pages - Submenu -->
</li>
<!--pages end-->
<!--hosting start-->
<li class="nav-item hs-has-mega-menu custom-nav-item position-relative"
data-position="center">
<a id="hostingMegaMenu" class="nav-link custom-nav-link main-link-toggle"
href="JavaScript:Void(0);" aria-haspopup="true" aria-expanded="false">Hosting</a>
<!-- Demos - Mega Menu -->
<div class="hs-mega-menu main-sub-menu" style="width: 715px" aria-labelledby="hostingMegaMenu">
<!-- Mega Menu Banner -->
<div class="u-header__product-banner bg-image" image-overlay="7">
<div class="background-image-wraper custom-radius-bottom" style="background: url('assets/img/hero-bg-4.jpg')no-repeat center center / cover; opacity: 1;"></div>
</div>
<!-- End Mega Menu Banner -->
</div>
<!-- End Demos - Mega Menu -->
</li>
<!--hosting end-->
<!--domain start-->
<li class="nav-item hs-has-mega-menu custom-nav-item position-relative"
data-position="center">
<a id="domainMegaMenu" class="nav-link custom-nav-link main-link-toggle"
href="JavaScript:Void(0);" aria-haspopup="true" aria-expanded="false">Domain</a>
<!-- Demos - Mega Menu -->
<div class="hs-mega-menu main-sub-menu" style="width: 660px" aria-labelledby="domainMegaMenu">
</div>
<!-- End Demos - Mega Menu -->
</li>
<!--domain end-->
<li class="nav-item hs-has-sub-menu custom-nav-item">
<a class="nav-link custom-nav-link"
href="affiliates.html">Affiliates</a>
</li>
<!--about start-->
<li class="nav-item hs-has-mega-menu custom-nav-item position-relative"
data-position="center">
<a id="aboutMegaMenu" class="nav-link custom-nav-link main-link-toggle"
href="JavaScript:Void(0);" aria-haspopup="true" aria-expanded="false">Company</a>
<!--about submenu start-->
<div class="hs-mega-menu main-sub-menu" style="width: 320px" aria-labelledby="aboutMegaMenu">
<!--menu title with subtitle and icon item start-->
<div class="title-with-icon-item">
<a class="title-with-icon-link" href="contact-us.html">
<div class="media align-items-center">
<img class="menu-titile-icon" src="assets/img/chat-mobile.svg" alt="SVG">
<div class="media-body">
<span class="u-header__promo-title">Contact Us</span>
<small class="u-header__promo-text">Face any problem contact with us
</small>
</div>
</div>
</a>
</div>
<!--menu title with subtitle and icon item end-->
...
</div>
<!--about submenu end-->
</li>
<!--about end-->
<!--button start-->
<li class="nav-item header-nav-last-item d-flex align-items-center">
<a class="btn btn-brand-03 animated-btn" href="#" target="_blank">
<span class="fa fa-user pr-2"></span> Client Area
</a>
</li>
<!--button end-->
</ul>
</div>
<!--main menu end-->
</nav>
</div>
</div>
<!--main header menu end-->
</header>
<!--header section end-->

##### How to change Logo?

You can find the logo under the `nav` tag in header menu container. Change the logo path for the Transparent header.

<!--logo start-->
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo-white.png" width="120" alt="logo" class="img-fluid"/>
</a>
<!--logo end-->

##### How to change images?

To change the background image, you need to give the image url and also need to add class `.bg-image` and image-overlay="8" for the overlay opacity. Gradient color`.background-image-wraper` need to add on your background image in `div`.

<section class="ptb-100 bg-image overflow-hidden" image-overlay="10">
<div class="hero-bottom-shape-two" style="background: url('assets/img/hero-bottom-shape-2.svg')no-repeat bottom center"></div>
</section>

##### VPS slider configuration

To configure the VPS plan, you need to change in HTML and assets/js/app.js file.

In HTML:

<input id="c-plan" type="text" data-slider-min="1" data-slider-max="12" data-slider-step="1" data-slider-value="6" data-currency="$" data-unit="GB">

Check the below values: data-slider-max="12". Maximum slide value will be 12 data-slider-step="1". If we scroll then it will increase only 1 per step data-slider-value="6". Default value is 6 for the demo data-currency="$". Currency sign is $

data-unit="GB". Data unit will be GB

Change the value according to your plan but you need to change according to your need in JS file as well.

In JS (assets/js/app.js):

// 14. custom vps hosting plan js
//**************************** Need to change ********************
// Change according to your plans
//****************************************************************
// vpsCore = VPS Core value from your plan
// vpsMemory = VPS Memory from your plan
// vpsStorage = VPS Storage value from your plan
// vpsBandwidth = VPS bandwidth value from your plan
// vpsPrice = VPS price from your plan
// vpsWHmcsUrl = VPS plan url. Check from your WHMCS panel
//****************************************************************
var vpsPriceInfo = [
{"vpsCore" : 1, "vpsMemory" : 2, "vpsStorage" : 10, "vpsBandwidth" : 1000, "vpsPrice" : 20, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
{"vpsCore" : 2, "vpsMemory" : 4, "vpsStorage" : 20, "vpsBandwidth" : 2000, "vpsPrice" : 40, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
{"vpsCore" : 3, "vpsMemory" : 6, "vpsStorage" : 30, "vpsBandwidth" : 3000, "vpsPrice" : 60, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=14"},
{"vpsCore" : 4, "vpsMemory" : 8, "vpsStorage" : 40, "vpsBandwidth" : 4000, "vpsPrice" : 80, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
{"vpsCore" : 5, "vpsMemory" : 10, "vpsStorage" : 50, "vpsBandwidth" : 5000, "vpsPrice" : 100, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
{"vpsCore" : 6, "vpsMemory" : 12, "vpsStorage" : 60, "vpsBandwidth" : 6000, "vpsPrice" : 120, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
{"vpsCore" : 7, "vpsMemory" : 14, "vpsStorage" : 70, "vpsBandwidth" : 7000, "vpsPrice" : 140, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=14"},
{"vpsCore" : 8, "vpsMemory" : 16, "vpsStorage" : 80, "vpsBandwidth" : 8000, "vpsPrice" : 160, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
{"vpsCore" : 9, "vpsMemory" : 18, "vpsStorage" : 90, "vpsBandwidth" : 9000, "vpsPrice" : 180, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
{"vpsCore" : 10, "vpsMemory" : 20, "vpsStorage" : 100, "vpsBandwidth" : 10000, "vpsPrice" : 200, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=14"},
{"vpsCore" : 11, "vpsMemory" : 22, "vpsStorage" : 110, "vpsBandwidth" : 11000, "vpsPrice" : 220, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=12"},
{"vpsCore" : 12, "vpsMemory" : 24, "vpsStorage" : 120, "vpsBandwidth" : 12000, "vpsPrice" : 240, "vpsWHmcsUrl" : "https://themetags.net/whmcs/cart.php?a=add&pid=13"},
];

We have added our plans in the vpsPriceInfo . Default core value is 6 that we set in the HTML. We have added details like CPU core, memory, storage, bandwidth, price and order link in a plan. We have total 12 plans. Based on the vpsCore value, we change the other values. Check the rest of the code if you need to change:

var cPlan = $('#c-plan');
if (cPlan.length) {
cPlan.slider({
tooltip: 'always'
});
cPlan.on("slide", function (e) {
$.each( vpsPriceInfo, function( index, vpsObj ) {
if(vpsObj.vpsCore == e.value) {
setVpsValue(vpsObj);
}
});
});
initSlider();
}
function initSlider() {
cPlan.value = cPlan.data("slider-value");
var defaultVpsCore = parseInt(cPlan.value);
$.each( vpsPriceInfo, function( index, vpsObj ) {
// defaultVpsCore is default valeu to show. For my demo, I have set 6 from HTML.
// vps-hosting.html: <input id="c-plan" type="text" data-slider-min="1" data-slider-max="12" data-slider-step="1" data-slider-value="6" data-currency="$" data-unit="GB">.
// You need to change accourting to your need.
if(vpsObj.vpsCore == defaultVpsCore) {
$('.slider .tooltip', '#custom-plan').append('<div class="tooltip-up"></div>');
$('.slider .tooltip-inner', '#custom-plan').attr("data-unit", cPlan.data("unit"));
$('.slider .tooltip-up', '#custom-plan').attr("data-currency", cPlan.data("currency"));
setVpsValue(vpsObj);
}
});
}
function setVpsValue(vpsObj) {
$('.slider .tooltip-up', '#custom-plan').text(vpsObj.vpsCore);
$('.vpsPrice', '#custom-plan').text(cPlan.data("currency") + vpsObj.vpsPrice);
$('.vpsCore span', '#custom-plan').text(vpsObj.vpsCore);
$('.vpsMemory span', '#custom-plan').text(vpsObj.vpsMemory);
$('.vpsStorage span', '#custom-plan').text(vpsObj.vpsStorage);
$('.vpsBandwidth span', '#custom-plan').text(vpsObj.vpsBandwidth);
$('.vpsWHmcsUrl', '#custom-plan').attr("href", vpsObj.vpsWHmcsUrl);
}

##### Coming soon page

Go to the file `app.js`. Open it and find bellow code to change. You just need to change the date:

// 12. coming soon count

    function countDown() {
        var countDay     = $(".counter-days");
        var countHour    = $(".counter-hours");
        var countMinutes = $(".counter-minutes");
        var countSeconds = $(".counter-seconds");

        var date         = new Date("Jan 1, 2023 12:00:00");

        .....
    }
    countDown();

##### Footer Section

We have two type of footer footer 1 we have used with newsletter section and footer 2 without newsletter section.

<!--footer section start-->
<!--when you want to remove subscribe newsletter container then you should remove .footer-with-newsletter class-->
<footer class="footer-1 gradient-bg ptb-60 footer-with-newsletter">
<!--subscribe newsletter start-->
<div class="container">
<div class="row newsletter-wrap primary-bg rounded shadow-lg p-5">
<div class="col-md-6 col-lg-7 mb-4 mb-md-0 mb-sm-4 mb-lg-0">
<div class="newsletter-content text-white">
<h3 class="mb-0 text-white">Subscribe our Newsletter</h3>
<p class="mb-0">We’re a team of non-cynics who truly care for our work.</p>
</div>
</div>
<div class="col-md-6 col-lg-5">
<form class="newsletter-form position-relative">
<input type="text" class="input-newsletter form-control" placeholder="Enter your email" name="email" required="" autocomplete="off">
<button type="submit" class="disabled"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
</div>
<!--subscribe newsletter end-->
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-4 mb-4 mb-md-4 mb-sm-4 mb-lg-0">
<a href="#" class="navbar-brand mb-2">
<img src="assets/img/logo-white.png" alt="logo" class="img-fluid">
</a>
<br>
<p>Dynamically re-engineer high standards in functiona with alternative paradigms. Conveniently monetize resource maximizing initiatives.</p>
<div class="list-inline social-list-default background-color social-hover-2 mt-2">
<li class="list-inline-item"><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="youtube" href="#"><i class="fab fa-youtube"></i></a></li>
<li class="list-inline-item"><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li class="list-inline-item"><a class="dribbble" href="#"><i class="fab fa-dribbble"></i></a></li>
</div>
</div>
<div class="col-md-12 col-lg-8">
<div class="row mt-0">
<div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
<h6 class="text-uppercase">Resources</h6>
<ul>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Live sessions</a>
</li>
<li>
<a href="#">Open source</a>
</li>
<li>
<a href="#">Documentation</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
<h6 class="text-uppercase">Products</h6>
<ul>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Navigation</a>
</li>
<li>
<a href="#">AI Studio</a>
</li>
<li>
<a href="#">Page Speed </a>
</li>
<li>
<a href="#">Performance</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
<h6 class="text-uppercase">Company</h6>
<ul>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">Customers</a>
</li>
<li>
<a href="#">Community</a>
</li>
<li>
<a href="#">Our Team</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<h6 class="text-uppercase">Support</h6>
<ul>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Sells</a>
</li>
<li>
<a href="#">Contact Support</a>
</li>
<li>
<a href="#">Network Status</a>
</li>
<li>
<a href="#">Product Services</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--end of container-->
</footer>
<!--footer bottom copyright start-->
<div class="footer-bottom py-3 gray-light-bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-7">
<div class="copyright-wrap small-text">
<p class="mb-0">&copy; ThemeTags Design Agency, All rights reserved</p>
</div>
</div>
<div class="col-md-6 col-lg-5">
<div class="terms-policy-wrap text-lg-right text-md-right text-left">
<ul class="list-inline">
<li class="list-inline-item"><a class="small-text" href="#">Terms</a></li>
<li class="list-inline-item"><a class="small-text" href="#">Security</a></li>
<li class="list-inline-item"><a class="small-text" href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--footer bottom copyright end-->
<!--footer section end-->

For Without Newsletter section use this-

<!--footer section start-->
<!--when you want to remove subscribe newsletter container then you should remove .footer-with-newsletter class-->
<footer class="footer-1 gradient-bg ptb-60">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-4 mb-4 mb-md-4 mb-sm-4 mb-lg-0">
<a href="#" class="navbar-brand mb-2">
<img src="assets/img/logo-white.png" alt="logo" class="img-fluid">
</a>
<br>
<p>Dynamically re-engineer high standards in functiona with alternative paradigms. Conveniently monetize resource maximizing initiatives.</p>
<div class="list-inline social-list-default background-color social-hover-2 mt-2">
<li class="list-inline-item"><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="youtube" href="#"><i class="fab fa-youtube"></i></a></li>
<li class="list-inline-item"><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li class="list-inline-item"><a class="dribbble" href="#"><i class="fab fa-dribbble"></i></a></li>
</div>
</div>
<div class="col-md-12 col-lg-8">
<div class="row mt-0">
<div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
<h6 class="text-uppercase">Resources</h6>
<ul>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">Live sessions</a>
</li>
<li>
<a href="#">Open source</a>
</li>
<li>
<a href="#">Documentation</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
<h6 class="text-uppercase">Products</h6>
<ul>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Navigation</a>
</li>
<li>
<a href="#">AI Studio</a>
</li>
<li>
<a href="#">Page Speed </a>
</li>
<li>
<a href="#">Performance</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 mb-4 mb-sm-4 mb-md-0 mb-lg-0">
<h6 class="text-uppercase">Company</h6>
<ul>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Careers</a>
</li>
<li>
<a href="#">Customers</a>
</li>
<li>
<a href="#">Community</a>
</li>
<li>
<a href="#">Our Team</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<h6 class="text-uppercase">Support</h6>
<ul>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Sells</a>
</li>
<li>
<a href="#">Contact Support</a>
</li>
<li>
<a href="#">Network Status</a>
</li>
<li>
<a href="#">Product Services</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--end of container-->
</footer>
<!--footer bottom copyright start-->
<div class="footer-bottom py-3 gray-light-bg">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-7">
<div class="copyright-wrap small-text">
<p class="mb-0">&copy; ThemeTags Design Agency, All rights reserved</p>
</div>
</div>
<div class="col-md-6 col-lg-5">
<div class="terms-policy-wrap text-lg-right text-md-right text-left">
<ul class="list-inline">
<li class="list-inline-item"><a class="small-text" href="#">Terms</a></li>
<li class="list-inline-item"><a class="small-text" href="#">Security</a></li>
<li class="list-inline-item"><a class="small-text" href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--footer bottom copyright end-->
<!--footer section end-->

##### How to change different theme

We have included 3 different CSS files in your dist>assets>css folder. So if you want to use theme-1 then you need to change the css file from your head section. So if you replace -

    <link href="assets/css/main.css" as="style" rel="stylesheet" />

with this

    <link href="assets/css/theme-1.css" as="style" rel="stylesheet" />

Then your template gets a theme-1 color.

### Forms

We have used 1 types contact us form. This forms are done by the Ajax call and used PHP as a Back-end language. Here is the Javascript code and PHP code.

##### Contact Us Form

Go to the app.js file and check the following code:

// 13. contact form
if ($("#contactForm").length) {
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
submitMSG(false, '#contact');
} else {
// everything looks good!
event.preventDefault();
submitContactForm();
}
});
}
function submitContactForm() {
// Initiate Variables With Form Content
var name = $('#contactForm input[name="name"]').val();
var email = $('#contactForm input[name="email"]').val();
var message = $('#contactForm textarea[name="message"]').val();
if (name && email && message) {
$.ajax({
type: "POST",
url: "libs/contact-form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success: function success(text) {
if (text == "success") {
formSuccess();
} else {
submitMSG(false, '#contact');
}
}
});
} else {
submitMSG(false, '#contact');
}
}
function formSuccess() {
$("#contactForm")[0].reset();
submitMSG(true, '#contact');
}

Go to the PHP file: libs/contact-form-process.php

Change the email address "hellothemetags@gmail.com" with your email address.

...
// change email with your email
$EmailTo = "hellothemetags@gmail.com";
$Subject = "Kohost:: New Message Received form contact";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
echo $Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
...

Change Success or Error message:

function submitMSG(valid, parentSelector) {
if (valid) {
$(parentSelector + " .message-box").removeClass('d-none').addClass('d-block ');
$(parentSelector + " .message-box div").removeClass('alert-danger').addClass('alert-success').text('Form submitted successfully');
} else {
$(parentSelector + " .message-box").removeClass('d-none').addClass('d-block ');
$(parentSelector + " .message-box div").removeClass('alert-success').addClass('alert-danger').text('Found error in the form. Please check again.');
}
}

Please make sure that you have given permission to send an email from your server.

### Customize with SCSS

We have used the SCSS for style with Inverted Triangle CSS (ITCSS) architecture and all tasks are executing by Gulp. If you do not have any idea or want to learn about SCSS then you can take a look from here: sass-lang.com

##### SCSS Folder Structure

So, we have the main.scss and it is containing all styles. According to ITCSS architecture, we have used the following folder:

So, we have the main.scss and it is containing all styles. According to scss 7-1 pattern architecture, we have used the following folder:

1. abstract: included mixin, function, and variable file
2. base: typography, helper, and base scss
3. components: all components scss like an accordion, button, etc...
4. layout: header, footer, preloader scss
5. pages: all pages and section scss
6. themes: theme scss like rtl scss
7. vendors: all vendors css file

//Abstract @import "abstract/variables"; @import "abstract/mixins"; @import "abstract/functions"; //Vendor. @import "../../../node_modules/bootstrap/scss/bootstrap"; @import "vendors/main"; //Base @import "base/base"; @import "base/typography"; @import "base/helper"; //Layout @import "layout/header"; @import "layout/offcanvas-menu"; @import "layout/footer"; @import "layout/preloader"; @import "layout/scroll-up"; //Components @import 'components/accordion'; @import 'components/forms'; @import 'components/animation'; @import 'components/background-image'; @import 'components/promo'; @import 'components/hero-section'; @import 'components/buttons'; @import 'components/location-map'; @import 'components/testimonial'; @import 'components/customer'; @import 'components/social-icon'; @import 'components/services'; @import 'components/features'; //Page @import "pages/page-header"; @import "pages/about-us"; @import "pages/contact-us"; @import "pages/blog"; @import "pages/login-signup"; @import "pages/utility"; @import "pages/price";

If you want to know about SCSS 7-1 Pattern then you will find information or a tutorial. We have added one site that you may check: https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

### Helpful Section

##### Bootstrap Utility Classes

We don't override Bootstrap class, so you can use bootstrap elements class. we have just created custom classes for this template.

##### Color

`.color-primary` `.color-secondary`

##### Background and gradient overlay color

`.gray-light-bg`, `.primary-bg`, `.secondary-bg`, `.gradient-overlay`

##### Other classes

`.ptb-100`, `.pt-100`, `.pb-100`, `.pt-165` `.mt--165` ... etc

##### btn classes

`.outline-btn`, `.secondary-solid-btn`, `.primary-solid-btn`, `.solid-white-btn`, `.outline-white-btn`, `.secondary-outline-btn`

For more information, please check Boostrap's official site: https://getbootstrap.com/docs/4.4/layout/utilities-for-layout/

##### Chrome Developer Tools Tutorial

Tutorial - https://www.youtube.com/watch?v=x4q86IjJFag

### Credits

##### Images and Videos

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Kohost a really beautiful template for our awesome users:

- Unsplash
- Pexels
- Pixabay
- unDraw
- isometric
- YouTube
- Freepik

##### JS Libraries

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Kohost a really beautiful template for our awesome users:

- jQuery
- jQuery Easing
- Popper Js
- Owl Carousel
- Magnific Popup

##### CSS and Fonts

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Kohost a really beautiful template for our awesome users:

- Bootstrap
- Themify Icons (Font Icons)
- Google Fonts

### Customer Support

If you have any trouble while editing this template or if you simply want to ask a question about something, feel free to contact us at hellothemetags@gmail.com or to post your request on Themeforest support form.

#### Support includes

- The item support period
- Answering questions about how to use the item
- Answering technical questions about the item (and included third party assets)
- Help with defects in the item or included third party assets
- Item updates to ensure ongoing compatibility and to resolve security vulnerabilities

#### Support doesn't include

- Item customization
- Installation of the item
- Hosting, server environment, or software
- Help from authors of included third party assets

Support is taken very seriously, so every template is completely covered according to ThemeForest’s policies.

### Customer Refund Policy

#### Eligible to get the refund

- Item is "not as described" or the item doesn’t work the way it should.
- Item has a security vulnerability
- Item support is promised but not provided
- Item support extension not used
- Items that have not been downloaded

#### Not eligible to get the refund

- You don't want it after you've downloaded it
- The item did not meet your expectations or you feel the item is of low quality
- You simply change your mind
- You bought an item by mistake
- You do not have sufficient expertise to use the item
- You claim that you are entitled to a refund but do not provide sufficient information as to why you are entitled to a refund
- You can no longer access the item because it has been removed or the author who previously provided the item is no longer active on our platform (we advise you to download items as soon as you have purchased them to avoid this situation).

Support is taken very seriously, so every template is completely covered according to ThemeForest’s policies.