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">
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();
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">© 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">© 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.