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.

Installation

We have used HTML, CSS and JS to develop the template. There is nothing to install. Just unzip the template and use it. Enjoy!

Configurations

We have used HTML, CSS and JS to develop the template. There is nothing to configure. Just unzip the template and use it. Enjoy!

App folder or project folder

This section is about the HostLar File structure. I hope it will help to understand project files. 

HostLar
|-- css
|-- fonts
|-- img
|-- js
|   ─ index.html
|   ─ index-2.html
|   - others .html files

Css folder

Below css files included in this css folder

|-- css
|     |-- bootstrap.min.css
|     |-- mignific-popup.css
|     |-- owl.carousel.min.css
|     |-- owl.theme.default.css
|     |-- themify-icons.css
|     |-- animate.min.css
|     |-- jquery.mb.YTPlayer.min.css
|     |-- style.css
|     |-- responsive.css
  • bootstrap.min.css file contain - Bootstrapcss.
  • mignific-popup.css file contain - Magnific Popup Popup css. It's is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
  • owl.carousel.min.css and owl.theme.default.css file contain - Owl Carousel custom carousel css. It's Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
  • themify-icons.css file contain - Themify Icons another line icon css.
  • animate.min.css file contain - Animation css website animation.
  • jquery.mb.YTPlayer.min.css file contain - Background video css it's background video css.

Template CSS:

  • style.css fil contain all custom css. This is template CSS file. You will find all CSS code here other than bootstrap.
  • responsive.css for small device support responsive css write here.

Fonts folder

This folder contain fonts.

|-- fonts
|     |--
|     |--
|     |--
|     |--
|     |--
|     |--

Img folder

All images with logo, favicon, client or customer, team, slider etc included this folder. 

|-- img
|     |--
|     |--
|     |--
|     |--
|     |--
|     |--

Js folder

Js folder contain all js fils, in this folder has all plugins like bootstrap, jquery, popper etc. 

js
|-- bootstrap.min.js
|-- jquery.easing.min.js
|-- jquery-3.4.1.min.js
|-- jquery.magnific-popup.min.js
|-- owl.carousel.min.js
|-- popper.min.js
|-- jquery.mb.YTPlayer.min.js
|-- headroom.js
|-- wow.min.js
|-- scripts.js
  • bootstrap.min.js Bootstrap plugin js.
  • jquery.easing.min.js jQuery Easing it's jQuery plugin from GSGD to give advanced easing options.
  • jquery-3.4.1.min.js jQuery plugin.
  • jquery.magnific-popup.min.js Magnific Popup Js is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
  • owl.carousel.min.js Owl Carousel custom carousel js. It's Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
  • jquery.mb.YTPlayer.min.js Background video for youtube, vimeo background video js
  • headroom.js Headroom plugin.
  • wow.min.js Website animation for animation

Template JS:

  • scripts.js is contain all our js related to the template.

HTML structure

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- SEO Meta description -->
    <meta name="description" content="">
    <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
    <!--title-->
    <!--favicon icon-->
    <!-- style -->
</head>
<body>
<!--loader start-->
<div id="preloader">
    <!--preloader content-->
</div>
<!--loader end-->

<!--header section start-->
<header id="header" class="header-main headroom">
    <!--header content-->
</header>
<!--header section end-->

<!--body content wrap start-->
<div class="main main-with-padding">

    <!--hero section start-->
    <section class="hero-equal-height ptb-100 gradient-overlay" style="background: url('img/hero-bg-2.jpg')no-repeat center center / cover">
        <!--hero content-->
    </section>
    <!--hero section end-->

    <!--promo section start-->
    <section class="promo-section ptb-100">
    <!--promo section-->
    </section>
    <!--promo section end-->

   <!--services section start-->
   <section class="our-services ptb-100 gray-light-bg">
       <!--our services section-->
   </section>
   <!--services section end-->

    ...............

</div>
<!--body content wrap end-->

<!--footer section start-->
<footer class="footer-section">
    <!--footer top start-->
    <div class="footer-top gradient-bg">
        <!--footer top content-->
    </div>
    <!--footer top end-->

    <!--footer copyright start-->
    <div class="footer-bottom gray-light-bg py-3">
        <!--copyright content-->
    </div>
    <!--footer copyright end-->
</footer>
<!--footer section end-->

<!--bottom to top button start-->
<button class="scroll-top scroll-to-target" data-target="html">
   <!--back to top-->
</button>
<!--bottom to top button end-->

<!--all javascript libraries and custom js -->

</body>
</html>

Changing title, fonts, favicon

You can update title, favicon font and also OG info with SEO meta description.

Title

In this head section you can find the title tag. Just replace the text on title tag.

<!--title-->
<title>Hostlar Hosting Provider and Technology HTML Template</title>

favicon

If you replace the favicon.png image or icon on img folder then favicon will automatically update. 

<!--favicon icon-->
<link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16">

fonts

AppBeats uses 2 fonts: Montserrat & Open+Sans from the Google Fonts Library. You can change the fonts file in below link on head section. 

<!--google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7COpen+Sans:400,600&display=swap" rel="stylesheet">

We have used two fonts Sans and Montserrat. For body we use Open Sans and all type of heading we used Montserrat font.

Logo Setting

The Logo you can be found in the nav tag on header menu container. Change the logo path for Transparent header.

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

Main body content

When you will used white header with color logo then you should use .main-with-padding class in this main body content wrap, and when you will used Transparent header with white logo then you should use .main-without-padding class in this main body content wrap.

For white header body content wrap

<!--body content wrap start-->
<div class="main main main-with-padding">
    <!--body section content-->
</div>
<!--body content wrap end-->

For transparent header body content wrap

<!--body content wrap start-->
<div class="main main-without-padding">
    <!--body section content-->
</div>
<!--body content wrap end-->

How to change image and background image

HostLar download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like img/your-image.jpg or img/your-image.svg or img/your-image.png

*We only included SVG images it's MIT license Open-source illustrations for every project you can use it.

for image

<img src="your image path" alt="image alt text" class="img-fluid">

for background image

When you use background image then you should follow bellow structure .gradient-overlay need to call on parent div. 

<section class="hero-equal-height ptb-100 gradient-overlay" style="background: url('img/hero-bg-3.jpg')no-repeat center center / cover">
    <div class="container">
        <div class="row">
            <!--SECTION CONTENTS-->
        </div>
    </div>
</section>

Header Menu Item

You can find the menu inside the nav tag on header section. In this menu items you can see every parent li is commented like home start, pages start, hosting start etc.

<!--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="left">
            <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 w-100 main-sub-menu" aria-labelledby="homeMegaMenu">
                <div class="row no-gutters">
                    <div class="col-lg-6">
                        <!-- Banner Image -->
                        <div class="menu-banner-wrap d-none d-md-none d-lg-block gradient-overlay"
                             style="background-image: url('img/hero-bg-4.jpg');">
                            <div class="menu-banner-content">
                                <div class="mb-4 text-white">
                                    <h5 class="text-white">Unbeatable WordPress Hosting</h5>
                                    <ul class="list-unstyled tech-feature-list">
                                        <li class="py-1"><span class="ti-control-forward mr-2"></span>Flexible, Easy to Use Control Panel</li>
                                        <li class="py-1"><span class="ti-control-forward mr-2"></span><strong>Unmetered</strong> Bandwidth</li>
                                        <li class="py-1"><span class="ti-control-forward mr-2"></span><strong>Unmetered</strong> Sub Domains, FTP Accounts</li>
                                        <li class="py-1"><span class="ti-control-forward mr-2"></span><strong>99%</strong> Uptime Guarantee</li>
                                        <li class="py-1"><span class="ti-control-forward mr-2"></span><strong>45-Day</strong> Money-Back Guarantee</li>
                                    </ul>
                                </div>
                                <a class="btn solid-white-btn" href="#">Learn More <span
                                        class="fas fa-angle-right ml-2"></span></a>
                            </div>
                        </div>
                        <!-- End Banner Image -->
                    </div>

                    <div class="col-lg-6">
                        <div class="row mega-menu-wrap">
                            <div class="col-sm-6 mb-3 mb-sm-0">
                                <span class="sub-menu-title">Home Demos</span>
                                <ul class="sub-menu-nav-group">
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index.html">Home Default</a></li>
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-image.html">Home Image</a></li>
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-domain-search.html">Home Domain Search <span class="badge badge-danger ml-2">Hot</span></a></li>
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-domain-search-2.html">Home Domain Search Two</a>
                                    </li>
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-bg-image.html">Home Background Image</a>
                                    </li>
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-bg-video.html">Home Background Video</a></li>

                                </ul>
                            </div>

                            <div class="col-md-6">
                                <ul class="sub-menu-nav-group mb-3">
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-offer.html">Home Offer <span class="badge badge-success ml-2">New</span></a></li>
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-slider.html">Home Slider</a>
                                    </li>
                                    <li><a class="nav-link sub-menu-nav-link"
                                           href="index-content-slider.html">Home Content Slider</a></li>
                                </ul>

                                <span class="sub-menu-title">More Demo <span class="badge color-1 color-1-bg">Coming...</span></span>


                            </div>
                        </div>
                    </div>
                </div>
            </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>
                <li class="nav-item submenu-item">
                    <a class="nav-link sub-menu-nav-link" href="services.html">Our Services</a>
                </li>
                <li class="nav-item submenu-item">
                    <a class="nav-link sub-menu-nav-link" href="reviews.html">Client Reviews</a>
                </li>

                <li class="hs-has-sub-menu">
                    <a id="navLinkPagesPricing"
                       class="nav-link sub-menu-nav-link sub-link-toggle"
                       href="javascript:void(0);" aria-haspopup="true" aria-expanded="false"
                       aria-controls="navSubmenuPagesPricing">Pricing</a>

                    <ul id="navSubmenuPagesPricing" class="hs-sub-menu main-sub-menu"
                        aria-labelledby="navLinkPagesPricing" style="min-width: 230px;">
                        <li><a class="nav-link sub-menu-nav-link"
                               href="pricing-default.html">Pricing Default</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="pricing-package.html">Pricing Packages</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="pricing-comparision.html">Pricing Comparision</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="vps-pricing.html">VPS Pricing</a></li>
                    </ul>
                </li>
                <li class="hs-has-sub-menu">
                    <a id="navLinkPagesBlog"
                       class="nav-link sub-menu-nav-link sub-link-toggle"
                       href="javascript:void(0);" aria-haspopup="true" aria-expanded="false"
                       aria-controls="navSubmenuPagesBlog">Blog</a>

                    <ul id="navSubmenuPagesBlog" class="hs-sub-menu main-sub-menu"
                        aria-labelledby="navLinkPagesBlog" style="min-width: 230px;">
                        <li><a class="nav-link sub-menu-nav-link"
                               href="blog-grid.html">Blog Grid</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="blog-sidebar.html">Blog With Sidebar</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="blog-details.html">Blog Details</a></li>
                    </ul>
                </li>

                <li class="hs-has-sub-menu">
                    <a id="navLinkPagesLogin"
                       class="nav-link sub-menu-nav-link sub-link-toggle"
                       href="javascript:void(0);" aria-haspopup="true" aria-expanded="false"
                       aria-controls="navSubmenuPagesLogin">Login &amp; Signup</a>

                    <ul id="navSubmenuPagesLogin" class="hs-sub-menu main-sub-menu"
                        aria-labelledby="navLinkPagesLogin" style="min-width: 230px;">
                        <li><a class="nav-link sub-menu-nav-link" href="login.html">Login</a>
                        </li>
                        <li><a class="nav-link sub-menu-nav-link" href="signup.html">Signup</a>
                        </li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="recover-account.html">Recover Account</a></li>
                        <li class="dropdown-divider"></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="login-simple.html">Login Simple</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="signup-simple.html">Signup Simple</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="recover-account-simple.html">Recover Account Simple</a>
                        </li>
                    </ul>
                </li>
                <li class="hs-has-sub-menu">
                    <a id="navLinkPagesUtilities"
                       class="nav-link sub-menu-nav-link sub-link-toggle"
                       href="javascript:void(0);" aria-haspopup="true" aria-expanded="false"
                       aria-controls="navSubmenuPagesUtilities">Utilities</a>

                    <ul id="navSubmenuPagesUtilities" class="hs-sub-menu main-sub-menu"
                        aria-labelledby="navLinkPagesUtilities" style="min-width: 230px;">
                        <li><a class="nav-link sub-menu-nav-link" href="help.html">Help</a></li>
                        <li><a class="nav-link sub-menu-nav-link" href="faq.html">FAQ</a></li>
                        <li><a class="nav-link sub-menu-nav-link" href="status.html">Status</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="knowledge-base.html">Knowledge Base</a></li>
                        <li><a class="nav-link sub-menu-nav-link" href="terms-condition.html">Terms
                            &amp; Conditions</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="privacy-policy.html">Privacy &amp; Policy</a></li>
                    </ul>
                </li>
                <li class="hs-has-sub-menu">
                    <a id="navLinkPagesSpecialty"
                       class="nav-link sub-menu-nav-link sub-link-toggle"
                       href="javascript:void(0);" aria-haspopup="true" aria-expanded="false"
                       aria-controls="navSubmenuPagesSpecialty">Specialty</a>

                    <ul id="navSubmenuPagesSpecialty" class="hs-sub-menu main-sub-menu"
                        aria-labelledby="navLinkPagesSpecialty" style="min-width: 230px;">
                        <li><a class="nav-link sub-menu-nav-link"
                               href="cover-page.html">Cover Page</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="coming-soon.html">Coming Soon</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="maintenance-mode.html">Maintenance Mode</a></li>
                        <li><a class="nav-link sub-menu-nav-link"
                               href="404.html">Error 404</a></li>
                    </ul>
                </li>
                <!-- Specialty -->
            </ul>
            <!-- End Pages - Submenu -->
        </li>
        <!--pages end-->

        <!--hosting start-->
        <li class="nav-item hs-has-mega-menu custom-nav-item"
            data-max-width="720px"
            data-position="right">
            <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 w-100 main-sub-menu" aria-labelledby="hostingMegaMenu">
                <div class="row no-gutters">
                    <div class="col-md-6">
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="shared-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/shared-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">Shared Hosting</span>
                                        <small class="u-header__promo-text">Innovate reliable quality
                                            Starting at <strong>$2.99</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="vps-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/vps-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">VPS Hosting <span
                                                class="badge badge-success ml-1">Popular</span></span>
                                        <small class="u-header__promo-text">Pefficiently maintain
                                            Starting at <strong>$11.99</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="dedicated-server-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/dadicate-web-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">Dedicated Hosting</span>
                                        <small class="u-header__promo-text">Quickly build Starting at
                                            <strong>$150.99/mo</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="cloud-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/cloud-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">Cloud Hosting <span
                                                class="badge badge-danger ml-1">Hot</span></span>
                                        <small class="u-header__promo-text">Conveniently cloud Starting
                                            at <strong>$5.99/mo</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                    </div>

                    <div class="col-md-6">
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="email-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/email-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">Email Hosting</span>
                                        <small class="u-header__promo-text">First Starting at <strong>$0.99/mo
                                            per mailbox</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="shared-wp-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/shared-wp-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">Shared Wordpress Hosting</span>
                                        <small class="u-header__promo-text">Conveniently Starting at
                                            <strong>$9.99/mo</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="wp-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/wordpress-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">Wordpress Hosting</span>
                                        <small class="u-header__promo-text">Conveniently Starting at
                                            <strong>$9.99/mo</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                        <!--menu title with subtitle and icon item start-->
                        <div class="title-with-icon-item">
                            <a class="title-with-icon-link" href="woocommerce-hosting.html">
                                <div class="media align-items-center">
                                    <img class="menu-titile-icon" src="img/woocommerce-hosting.svg"
                                         alt="SVG">
                                    <div class="media-body">
                                        <span class="u-header__promo-title">WooCommerce Hosting <span
                                                class="badge badge-primary ml-1">New</span></span>
                                        <small class="u-header__promo-text">Globally Starting at
                                            <strong>$9.99/mo</strong></small>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <!--menu title with subtitle and icon item end-->
                    </div>

                </div>
            </div>
            <!-- End Demos - Mega Menu -->
        </li>
        <!--hosting end-->

        ......

        <!--button start-->
        <li class="nav-item header-nav-last-item d-flex align-items-center">
            <a class="btn primary-solid-btn animated-btn" href="#" target="_blank">
                Get Started
            </a>
        </li>
        <!--button end-->
    </ul>
</div>
<!--main menu end-->

Hero section

We have different hero section please check different demos.

Here is index.html hero section included

<!--hero section start-->
<section class="hero-equal-height ptb-100 gradient-bg"  style="background: url('img/hero-bg-2.jpg')no-repeat center center / cover">
    <div class="container">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-6 col-12">
                <div class="hero-content-wrap text-white">
                    <h1 class="text-white">HostLar Best Hosting Provider in World</h1>
                    <p class="lead">If your WordPress website is your personal business, we
                        want you to succeed. We made our Hostlar hosting platform.</p>
                    <form action="#" class="domain-search-form mt-3">
                        <div class="input-group">
                            <input type="email" class="form-control" placeholder="example.com"
                                   required="">
                            <div class="input-group-append">
                                <button class="btn search-btn btn-hover d-flex align-items-center" type="submit">
                                    <span class="ti-search mr-2"></span> Search
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="domain-list-wrap mt-4">
                        <ul class="list-inline domain-search-list text-white">
                            <li class="list-inline-item"><a href="#"><img src="img/com-w.png" alt="com" width="70" class="img-fluid"/> <span>$8.99</span></a></li>
                            <li class="list-inline-item"><a href="#"><img src="img/net-w.png" alt="com" width="70" class="img-fluid"/> <span>$4.99</span></a></li>
                            <li class="list-inline-item"><a href="#"><img src="img/org-w.png" alt="com" width="70" class="img-fluid"/> <span>$2.99</span></a></li>
                            <li class="list-inline-item"><a href="#"><img src="img/store-w.png" alt="com" width="70" class="img-fluid"/> <span>$0.99</span></a></li>
                            <li class="list-inline-item"><a href="#"><img src="img/online-w.png" alt="com" width="70" class="img-fluid"/> <span>$0.99</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 col-12">
                <div class="animation-image-wrap">
                    <img src="img/servers.svg" alt="wp hosting" class="img-fluid"/>
                    <img src="img/animated-icon-1.png" alt="wp hosting" class="animation-icon-img animation-icon-1"/>
                    <img src="img/animated-icon-2.png" alt="wp hosting" class="animation-icon-img animation-icon-2"/>
                    <img src="img/animated-icon-3.png" alt="wp hosting" class="animation-icon-img animation-icon-3"/>
                    <img src="img/animated-icon-4.png" alt="wp hosting" class="animation-icon-img animation-icon-4"/>
                </div>
            </div>
        </div>
    </div>
</section>
<!--hero section end-->

Background Video section

We have background call to action section please check demo Home background video or index-bg-video.html

<!--hero section start-->
<section class="gradient-overlay" style="background: url('img/hero-12.jpg')no-repeat center center / cover">
    <div class="video-section-wrap">
        <div class="hero-equal-height background-video-overly ptb-100">
            <div class="player"
                 data-property="{videoURL:'https://www.youtube.com/watch?v=g9h1_f5VziY',containment:'.video-section-wrap', quality:'highres', autoPlay:true, showControls: false, startAt:0, mute:true, opacity: 1}"></div>
            <div class="container">
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-9 col-lg-8">
                        <div class="hero-content-left text-white text-center">
                            <h1 class="text-white">Choose Best Domain Name and Create Your Website</h1>
                            <p class="lead">Up to 50% Off domain and hosting, Starting from $2.99/month, free SSL certificate, 24/7/365 support, money back guarantee.</p>

                            <form action="#" class="domain-search-form mt-3 w-75  mx-auto">
                                <div class="input-group">
                                    <input type="email" class="form-control" placeholder="example.com"
                                           required="">
                                    <div class="input-group-append">
                                        <button class="btn search-btn btn-hover d-flex align-items-center" type="submit">
                                            <span class="ti-search mr-2"></span> Search
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <div class="domain-list-wrap mt-4">
                                <ul class="list-inline domain-search-list text-white">
                                    <li class="list-inline-item"><a href="#"><img src="img/com-w.png" alt="com" width="70" class="img-fluid"/> <span>$8.99</span></a></li>
                                    <li class="list-inline-item"><a href="#"><img src="img/net-w.png" alt="com" width="70" class="img-fluid"/> <span>$4.99</span></a></li>
                                    <li class="list-inline-item"><a href="#"><img src="img/org-w.png" alt="com" width="70" class="img-fluid"/> <span>$2.99</span></a></li>
                                    <li class="list-inline-item"><a href="#"><img src="img/store-w.png" alt="com" width="70" class="img-fluid"/> <span>$0.99</span></a></li>
                                    <li class="list-inline-item"><a href="#"><img src="img/online-w.png" alt="com" width="70" class="img-fluid"/> <span>$0.99</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--hero section end-->

Promo section

<!--promo section start-->
<section class="promo-section ptb-100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-9 col-lg-8">
                <div class="section-heading text-center mb-md-0 mb-lg-5">
                    <!--section heading-->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-lg-4">
                <a href="#">
                    <div class="single-promo-2 single-promo-hover rounded text-center white-bg p-5 h-100">
                       <!--single promo content-->
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-lg-4">
                <a href="#">
                    <div class="single-promo-2 single-promo-hover rounded text-center white-bg p-5 h-100">
                       <!--single promo content-->
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-lg-4">
                <a href="#">
                    <div class="single-promo-2 single-promo-hover rounded text-center white-bg p-5 h-100">
                        <!--single promo content-->
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
<!--promo section end-->

How to counting or coming soon page

Under the pages on main menu you can find coming soon page. Go to js file and select scripts.js open it and find bellow code change this date 2022/01/30

 $('.clock').countdown('2022/01/30', function (event) {
    //code here
  });

How to change chat url or script

Go to js file and select scripts.js open it and find bellow code change this url with your talk to url https://embed.tawk.to/5e19bb9b27773e0d832d0621/default

Note For this chat you should create a Talk To account. After create this account you can create your own chat script like bellow code. you can replace all code or change that url. It's very easy to use and manageable. 

 // 18. chat api js
 var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
 (function () {
     var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
     s1.async = true;
     s1.src = 'https://embed.tawk.to/5e19bb9b27773e0d832d0621/default';
     s1.charset = 'UTF-8';
     s1.setAttribute('crossorigin', '*');
     s0.parentNode.insertBefore(s1, s0);
 })();

Upload Loaction

Please check this image

How to upload WHMCS new template

Our hostlar standard whmcs template now ready. Upload this new template on you templates folder like whmcs>templates>hostlar-standard. Please check this image

How to set the pricing feature list?

First of all, login your whmcs admin panel then got to setup > products/services > products/services and follow the steps:

hostlar

I hope you have already created product group name and under the group you have created single product package. If you don't have this package then you should create first. Then edit the single product package like bellow images:

hostlar

Click the edit icon then you can see this bellow image. Copy this code and paste in the product description field like bellow image. You have to change the text or value based on your plan and follow for rest of the plan and product.

<ul class="list-unstyled pricing-feature-list">
    <li><span>10</span> Hosted Domains</li>
    <li><span>25 GB</span> RAID 10 Storage</li>
    <li><span>200 GB</span> Bandwidth</li>
    <li><span>1 Free</span> Domain included</li>
    <li><span>Super Fast</span> SSD Storage</li>
    <li><span>Free</span> SSL Certificate</li>
    <li>99.95% Uptime</li>
    <li>24/7 Phone Support</li>
</ul>
hostlar

Hooks

You should upload this two file in whmcs > includes > hooks folder. Please check this image

How to change order form or pricing table design

In whmcs folder go to templates folder like whmcs>templates>orderforms then upload our hostlar_comparison folder. Please check this image

How to change contact form email

Please got to your project folder then you can found libs folder. Open this folder then you can this image. Just replace "hellothemetags@gmail.com" this email with your emal address. Also you can change mail subject.

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

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

  • Responding to questions or problems regarding the item and its features
  • Fixing bugs and reported issues
  • Providing updates

Support doesn't include

  • Customization and installation services
  • Support for third party software and plug-ins

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

Images and Videos

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

Change Log

v0 (30 Jan 20)

  • Release: First Initial Release

v2.1.0 (12 Mar 2020)

UPDATED - WHMCS & RTL Version with Dynamic Contact Form

ADDED NEW PAGES:
 - Reseller Demo
 - New Pricing Page
 - Domain Search Result Page
 - Image Gallery Page
 - Daynamic Domain Search
 - Daynamic Contact form with validation
 - Libs Folder added
FIX :
 - Fix footer responsive issues
FILE UPDATED:
- css/style.css
- js/scripts.js

v2.5.0 – 27th Mar, 2020

UPDATED - WHMCS & RTL Version with Dynamic Contact Form

UPDATED:
 - ADDED - RTL version of WHMCS
 - Update price design

v2.7.0 – 06th Apr, 2020

UPDATED - WHMCS & RTL Version with Dynamic Contact Form

UPDATED:
- Menu issue fixed on Mobile view
 - WHMCS blink issue fixed

v3.0.0 – 13th Apr, 2020

 - ADDED - WHMCS standard template
 - ADDED - WHMCS product design
 - UPDATED - WHMCS slim template
 - FIXED - fixed the https issue

v3.2.0 – 29th Apr, 2020

 - ADDED - WHMCS standard RTL template
 - UPDATED - WHMCS version update to v7.10.1

v3.2.1 – 2nd May, 2020

 - Fix the responsive issue from Slim WHMCS template
 - Fix the file missing issue in hostlar_comparison order form

v3.2.2 – 15th May, 2020

 - Added the product design HTML in the documentation from WHMCS
 - Fix the button hover issue

v3.2.3 – 18th May, 2020

 - Fixed the large font issue in Product Detail of WHMCS

 Updated Files:
 - custom.css in WHMCS Slim and Slim RTL
 - custom.css in WHMCS Standard and Standard RTL