Template - kohost

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 build/asseta/css/main.css 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. You can also minify the CSS and JS. After your changes, you need to upload your changes assets (CSS or JS) to your live server.

Installation

We need a couple of applications to run the SCSS to our local:

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
Run: node -v or node --version
If you get the version then the installation of NodeJs is done

 $ node --version
 $ v10.15.3

Check NPM Version:

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

 $ npm --version
 $ 6.14.2

Gulp Install from Terminal: Gulp is a task runner. To install it, follow the below steps:

Open the Terminal
Run: npm install -g gulp
For more information, check: https://gulpjs.com/docs/en/getting-started/quick-start/

Check Gulp Version:

Open the Terminal
Run: gulp -v or gulp --version
If you get the version then the installation of Gulp is done

 $ gulp --version
 $ CLI version: 2.2.0
 $ Local version: Unknown

Configurations

All processes (Configuration, run and build) are the same for Kohost.

NPM Packages:

After downloading the template, unzip it
Open the Terminal
Go to the folder (kohost): (cd path/to/template)
Run: npm install
Make sure that there is no error.

package.json: Make sure that you have package.json file and check that you have the below lines under the scripts.

...
"scripts": {
  "start": "gulp dev",
  "build": "gulp build",
  "lints": "gulp linters"
},
...

How to Run?

After installing all node packages, need to run gulp dev or npm start to start the project.
Your site is now viewable at this URL: http://localhost:3000

How to Build for Production?

To prepare the build/ production version, run gulp build or npm run build
This will change all CSS files and app.js file in the build folder and regenerate all of your compiled files.
N.B: Never make updates directly the CSS and JS files into the build folder as these files get overridden each time.

How to make HTML template live?

For your information, there are two ways to change your style (CSS) for your template.

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

Steps to make live:

Download your item from Envato and unzip it.
Add all files and folders under the kohost/build folder 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 -

HTML template - folder name: kohost
RTL version of HTML template - folder name: kohost-rtl
WHMCS templates - folder name: whmcs
and Documentation

Kohost HTML template folder structure:

build/ - compiled distribution files or production files
node_modules - Node dependencies libraries
src/ - contains all of your core, working files—scss and js files.
src/assets/ - scss files, JS files is here
gulpfile.js - all tasks definitions
package.json - The npm dependencies

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.5.1.min.js"></script>
<script src="assets/js/vendors/popper.min.js"></script>
<script src="assets/js/vendors/bootstrap.min.js"></script>
<script src="assets/js/vendors/bootstrap-slider.min.js"></script>
<script src="assets/js/vendors/jquery.easing.min.js"></script>
<script src="assets/js/vendors/owl.carousel.min.js"></script>
<script src="assets/js/vendors/countdown.min.js"></script>
<script src="assets/js/vendors/jquery.waypoints.min.js"></script>
<script src="assets/js/vendors/jquery.rcounterup.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-->

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 scripts.js. Open it and find bellow code to change. You just need to change the date:

// 12. coming soon count
  $('#clock').countdown('2025/01/30', function (event) {
    
  });

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

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:

settings: common define the variables that can customize the template.
functions: globally used mixins and functions.
generic: reset and/or normalize styles, box-sizing definition, etc.
elements: styling for bare HTML elements (like H1, A, header, footer, …).
objects: class-based selectors that define undecorated design patterns.
vendors: all vendor's style.
components: specific UI components.
trumps: utilities and helper classes with the ability to override.

/*
* Kohost v1.0.0 (https://themeforest.net/user/themetags)
* Copyright 2020 Themetags
* Licensed under ThemeForest License
*/

//setting
@import "settings/main";

//function
@import "functions/main";

//Generic
@import "generic/main";

//elements
@import "elements/main";

//objects
@import "objects/main";

//Third party plugins css.
@import "vendors/main";

//Components and widgets.
@import "components/main";

//Helper classes and overrides.
@import "trumps/main";

If you want to know about ITCSS then you can search with ITCSS. You will find information or tutorial. We have added one site that you may check: https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9b

How to run SCSS?

If you want to change the SCSS file then you have to change the following command:

 $ gulp dev

We run gulp dev during the development time.

If you are done with your changes then you need to run the following command:

 $ gulp build

If we run gulp build, it will generate the CSS file, CSS minified file and JS minified file.

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:

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:

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:

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.

Change Log

v1.0.0 (20 August 2020)

Release: Initial Release

v2.0.0 (22th Aug, 2020)

Added RTL version of HTML template
Added working domain search page

v2.2.0 (30th August, 2020)

Updated captcha design for all whmcs templates

v2.2.1 (13th Sep, 2020)

Fixed message issue in the Contact Form
Updated file: libs/contact-form-process.php

v3.1.0 (24th Sep, 2020)

Fixed the disable button issue on WHMCS reset password
Added additional 5 HTML pages
Added Black Friday offer pages
Added Privacy Policy and Terms Condition pages

v3.4.0 (17 Oct, 2020)

Fixed image source issue on WHMCS template
The updated menu on the WHMCS template
Unused css file remove from the css folder on WHMCS template
Remove the demo username & password from the WHMCS login page

v4.0.0 (27 Oct, 2020)

WHMCS version upgrade to 8.0.3
WHMCS Header section design changed
WHMCS Footer section design changed
WHMCS Home page design changed
Check the changed file list

v4.0.1 (28 Oct, 2020)

Fixed WHMCS configure product "Choose Billing Cycle" Issues.
Updated WHMCS style.css file in the css folder.
Updated WHMCS custom.css and custom.js file in css and js folder.

v4.5.0 (3rd Nov, 2020)

Added multi-currency support on WHMCS template
Restructured the VPS slider
Fixed the logo path in the footer

ADDED:
Added currency.php file in the hooks folder
Added flags folder on WHMCS img folder
Fixed the logo path in the footer

UPDATED:
Updated header.tpl file on WHMCS template
Updated custom.css file on WHMCS template
Updated footer.tpl file on WHMCS template
Updated sidebar-categories.tpl file on WHMCS orderforms

v4.6.0 (8th Nov, 2020)

Design updated in WHMCS Login, Registration, and change password page
Added language change option in WHMCS Login, Registration, and change password page
Updated domain search button design in WHMCS page
Design updated in WHMCS Footer section

ADDED:
Added two new images on WHMCS img folder

Updated header.tpl file on WHMCS template
Updated footer.tpl file on WHMCS template
Updated login.tpl file on WHMCS template
Updated password-reset-container.tpl file on WHMCS template
Updated user-security.tpl file on WHMCS template
Updated custom.css file on WHMCS template
Updated checkout.tpl file on WHMCS orderforms
Updated style.css file on WHMCS orderforms css folder

v5.0.0 (21st, Nov, 2020)

Fixed the billing information update issue on orderform
Fixed the currency icon path issue
Fixed the responsive issue of table
Fixed the attached file issue in the dashboard
Updated the design of registration error
Designed the SSL and Security, addons pages
Updated navbar single item click issue on HTML template
Check the changed file list

v5.5.0 (5th, Jan 2021)

Updated WHMCS version 8.1.0 template
Updated the hooks/products.php file
Add favicon icon link in templates/{your template name}/includes/head.tpl file

v5.5.5 (9th, Jan 2021)

Fixed WHMCS template form label margin issue
Fixed orderforms addons item design issues
Add a custom class name in "your orderforms/configuredomains.tpl" file
Updated CSS in "your template/css/custom.css" and "your orderforms/css/style.css" file

v5.6.0 (20th, Jan 2021)

Used WHOIS lib to improve domain search
Add whois folder on libs folder
Updated "domain-search-result.php" file

v5.7.5 (8th, Feb 2021)

Fixed the wrong name of the template in WHMCS general setting
Fixed the CSS caching issue in WHMCS template
Fix the height issue on WHMCS product pricing
Redesigned the WHMCS service details page
Fixed the line break issue in WHMCS billing cycle
Fixed the spacing issue in WHMCS client register page
Fixed the sidebar issue in WHMCS support ticket details page
Fixed the captcha aligned issue in WHMCS pages
Fixed the W3C HTML validation issue for HTML template
Check the changed file list

v5.8.0 (17th, Feb 2021)

Updated WHMCS template latest version
Updated WHMCS orderforms latest version
Updated WHMCS language file lang>english.php
Fixed data table dropdown issue
Check the changed file list

v5.9.0 (27th, Mar 2021)

Updated WHMCS template version to 8.1.3
Updated WHMCS language file lang>english.php
Check the changed file list

v6.0.0 (7th, May 2021)

Added 7 new home pages on the HTML template.
Added 6 new application hosting pages on HTML template
Added new specifications pricing page
Added domain checker pricing list section
Added CSRF token for
Added application hosting section
Updated pricing section
Updated contact-form-process.php file
Updated app.js file
Updated domain checker and transfer page

v6.0.5 (27th, May 2021)

Updated gulpfile.js and package.json file
Updated about, blog, contact, faq, footer SCSS file
Fixed pricing pages issues
Fixed vendor js file linking issue
Fixed after build menu hover issue
Check the changed file list

v6.5.0 (19th, July 2021)

[WHMCS] Updated WHMCS template and orderform to version 8.2.1
[WHMCS] Fixed the language selection design issue on Footer
[WHMCS] Updated the design of the payment method on the checkout page
[HTML] Fixed the validation issue on contact form in HTML
[HTML UPDATED FILES]
app.js
Check the changed file list

v6.5.1 (19th, Sep 2021)

[HTML] Fixed XSS attached issue (updated file libs>whois>example.php)
[HTML RTL] Fixed shared hosting page header (updated file kohost-rtl>build>js>app.js and assets>css>main-rtl.css)

v6.7.0 (22th, Oct 2021)

[WHMCS] Updated WHMCS template and orderform to version 8.3.0
- Check the changed file list

Welcome

Local Setup for HTML Template

Installation

Configurations

How to Run?

How to Build for Production?

How to make HTML template live?

Folder Structure

Template Customization

HTML Structure

Head of the Template

How to change page title?

How to change Favicon?

Header Section

How to change Logo?

How to change images?

VPS slider configuration

Coming soon page

Footer Section

Forms

Contact Us Form

Customize with SCSS

SCSS Folder Structure

How to run SCSS?

Helpful Section

Bootstrap Utility Classes

Color

Background and gradient overlay color

Other classes

btn classes

Chrome Developer Tools Tutorial

Credits

Images and Videos

JS Libraries

CSS and Fonts

Customer Support

Support includes

Support doesn't include

Customer Refund Policy

Eligible to get the refund

Not eligible to get the refund

Change Log

v1.0.0 (20 August 2020)

v2.0.0 (22th Aug, 2020)

v2.2.0 (30th August, 2020)

v2.2.1 (13th Sep, 2020)

v3.1.0 (24th Sep, 2020)

v3.4.0 (17 Oct, 2020)

v4.0.0 (27 Oct, 2020)

v4.0.1 (28 Oct, 2020)

v4.5.0 (3rd Nov, 2020)

v4.6.0 (8th Nov, 2020)

v5.0.0 (21st, Nov, 2020)

v5.5.0 (5th, Jan 2021)

v5.5.5 (9th, Jan 2021)

v5.6.0 (20th, Jan 2021)

v5.7.5 (8th, Feb 2021)

v5.8.0 (17th, Feb 2021)

v5.9.0 (27th, Mar 2021)

v6.0.0 (7th, May 2021)

v6.0.5 (27th, May 2021)

v6.5.0 (19th, July 2021)

v6.5.1 (19th, Sep 2021)

v6.7.0 (22th, Oct 2021)