Dear customers, thank you for choosing our products. In this document, you will find an in-depth description of all the template's features and functionality.

If you have any questions not attended to by our template documentation, please contact us. If you like our template, please leave your feedback. Thanks :)

Template Version: 1.4
By: etap
Response time (up to): 1 business day.


Follow the steps below to setup your site template:

Please note that KANIA is a simple HTML template and not a Wordpress theme/plugin.

  1. Log into your hosting space via an FTP software (Filezilla for example).
  2. Unzip the downloaded package and open the /html folder to find all the template files.
  3. Below is the folder structure and needs to be uploaded to your website root directory:
    • html/assets/css - Stylesheets folder
    • html/assets/fonts – Icon fonts folder
    • html/assets/images - Images folder
    • html/assets/img - Images folder
    • html/assets/js - Javacripts folder
    • html/contact – Contact form PHP files
  4. Upload the HTML files corresponding to the variant of your choice along with all directories in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder. You should upload all or specific HTML files as per your need.

Tips Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

HTML Structure

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

<!doctype html>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <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" />

    <-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <-- Font Awesome CSS -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <-- Include all css plugins (below), or include individual files as needed -->

    <-- Theme CSS -->
    <link href="assets/css/theme.css" rel="stylesheet" type="text/css">
    <link href="assets/css/style.css" rel="stylesheet" type="text/css">

    <-- Color Scheme CSS -->
    <link href="assets/css/color_pink.css" rel="stylesheet" type="text/css">


<body id="page-top">

    <-- Preloader Start -->
    <div class="preloader">
    <-- //Preloader End -->

    <-- Navigation Start -->
    <nav id="navigation" class="navbar navbar-inverse navbar-toggleable-md bg-inverse fixed-top">
    <-- //Navigation End -->

    <-- Section - Home Start -->
    <section id="home">
    <-- //Section - Home End -->
    <-- Intro Start -->
    <div id="intro">
    <-- //Intro End -->

    <-- Section - About Start -->
    <section id="about">
    <-- //Section - About End -->

    <-- Section - Benefits Start -->
    <section id="benefits">
    <-- //Section - Benefits End -->

    <-- Section - Services Start -->
    <section id="services">
    <-- //Section - Services End -->

    <-- Section - Team Start -->
    <section id="team">
    <-- //Section - Team End -->

    <-- Milestones Start -->
    <div id="milestones">
    <-- //Milestones End -->
    <-- Section - Work Start -->
    <section id="work">
    <-- //Section - Work End -->

    <-- Section - Gallery Start -->
    <section id="gallery">
    <-- //Section - Gallery End -->

    <-- Section - Pricing Start -->
    <section id="pricing">
    <-- //Section - Pricing End -->

    <-- Section - Reviews Start -->
    <section id="reviews">
    <-- //Section - Reviews End -->

    <-- Section - Contact Start -->
    <section id="contact">
    <-- //Section - Contact End -->
    <-- Footer Start -->
    <-- //Footer End -->

    <-- Scroll to top -->
    <a href="#page-top" class="page-scroll scroll-to-top"><i class="fa fa-angle-up"></i></a>

    <-- Main JS -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <-- Include all js plugins (below) -->

    <-- Theme JS -->
    <script src="assets/js/theme.js"></script>

Color Schemes

By default, the template loads this color schemes, you can choose from 8 color schemes:

<!-- Color - Blue -->
<link href="assets/css/color_blue.css" rel="stylesheet" type="text/css">

<!-- Color - Green -->
<link href="assets/css/color_green.css" rel="stylesheet" type="text/css">

<!-- Color - Green 2 -->
<link href="assets/css/color_green2.css" rel="stylesheet" type="text/css">

<!-- Color - Orange -->
<link href="assets/css/color_orange.css" rel="stylesheet" type="text/css">

<!-- Color - Orange 2 -->
<link href="assets/css/color_orange2.css" rel="stylesheet" type="text/css">

<!-- Color - Pink -->
<link href="assets/css/color_pink.css" rel="stylesheet" type="text/css">

<!-- Color - Purple -->
<link href="assets/css/color_purple.css" rel="stylesheet" type="text/css">

<!-- Color - Red -->
<link href="assets/css/color_red.css" rel="stylesheet" type="text/css">

Add Custom Color Scheme

The basic process is that we are going to use one of the existing color (color_pink.css) and make changes to it to reflect the new custom color scheme. In order to demonstrate, I'm going to create a new custom color scheme based on brown (color_brown.css).

  1. Make a copy of the original color_pink.css.

  2. Rename the file (color_pink - Copy.css).

  3. Replace color scheme. Using text editor, edit color_brown.css and do a Search/Replace on the file. In my example, I'll change: #ff1a56 (pink) to #663300 (brown).

  4. Add a link to it in the <head> section of the HTML page.

        <-- Theme CSS -->
        <link href="assets/css/theme.css" rel="stylesheet" type="text/css">
        <link href="assets/css/style.css" rel="stylesheet" type="text/css">
        <-- Color Scheme CSS -->
        <link href="assets/css/color_brown.css" rel="stylesheet" type="text/css">

Logo Settings

The Logo Container can be found in the #navigation or .navbar.

<!-- Navigation Start -->
<nav id="navigation" class="navbar navbar-inverse navbar-toggleable-md bg-inverse fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand page-scroll" href="#page-top">
                <img src="assets/images/logo-text-black.png" alt="" class="logo-text-black"/>
                <img src="assets/images/logo-text-white.png" alt="" class="logo-text-white"/>
        <!-- //.navbar-header -->
    <!-- //.container -->
<!-- //Navigation End -->

Note The Logo Image's maximum height can be 60px.


We use excellent Fontawesome service. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Over 500 new icons.

In the <head> of your html, reference the location to your font icons style css.

<!-- Font Awesome CSS -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">

You can place font icons just about anywhere using the CSS Prefix .fa- and the icon's name. Font icons is designed to be used with inline elements (we like the <i> tag for brevity).

<i class="fa fa-facebook"><i>
<i class="fa fa-twitter"><i>
Check The CheatSheet