HTML Structure

The template is based on bootstrap library, if you don’t know about bootstrap please take a look at their website http://getbootstrap.com/getting-started/. Actually in this template you will not have to know a lot in bootstrap, just the basic things.

You can edit the Html file in any text editor, but we prefer to use an html editor like Adobe Dreamweaver.

Our template built on bootstrap layout way, the whole page separated in rows, and every row created like this figure:


We arranged the template in sections, each section(div) has id, for example "header", "top-content", "pricing", ...etc

<div id="top-content" class="container-fluid">
...
<div id="info" class="container-fluid">
...
<div id="features" class="container-fluid">
...
<div id="pricing" class="container-fluid">
...
<div id="testimonials" class="container-fluid">
...
<div id="footer" class="container-fluid">
...

CSS

We used four CSS files in this template. Two files are from bootstrap "bootstrap.min.css" use it for the layout, one for icons "font-awesome.min.css",two for slider "slick.css". And "style.css" is our custom styles. we arrange the styles according to the order of the tags in the html code.

However, you can change all the styles (text color, background color,font size,...) by editing style.css file. 

/*------------------------------------------------------------------
[Table of contents]

1. General Styles.
2. Header Styles.
3. Top Content Styles.
4. Info Styles.
5. Features Styles.
6. Starting Styles.
7. Pricing Styles.
8. Reasons Styles.
9. Testimonials Styles.
10. Footer Styles.
11. Responsive Styles.
-------------------------------------------------------------------*/

JavaScript

This template imports five Javascript files.

  • "jquery.min.js": jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • "bootstrap.min.js": Bootstrap is the most popular Javascript framework for developing responsive, mobile first projects on the web.
  • "createjs.min.js": A simple but powerful JavaScript library for tweening and animating HTML5 and JavaScript properties.
  • "slick.min.js": Slick is a responsive carousel jQuery plugin.
  • "main.js": Our custom javascript code.

To change the logo, replace the img src="" with your logo url.

<img class="logo" src="images/logo.png" width="143" height="18">

To change the menu links, simply edit this code. For example, the contact link is linked to the footer section.

<ul class="nav navbar-nav navbar-right">
    <li><a href="#info">About</a></li>
    <li><a href="#features">info</a></li>
    <li><a href="#pricing">Pricing</a></li>
    <li><a href="#footer">Contact</a></li>
    <li><a class="chat-button" href="#">Live Chat</a></li>
</ul>

And for the Live Chat button, you can add the link for the Live Chat service in href="#" instead of #.

<li><a class="chat-button" href="#">Live Chat</a></li>

Top Content

To change the big text in the top area of the page, go to the #top-content div, you will see the text there.

<div id="top-content" class="container-fluid">
...
<h1>Fast. yet affordable<br>
Webhosting Services.</h1>
<h4>Search and Register your Domain name today</h4>

For the domain search, we added function to search in Name.com, hope in future we do somthing better. Anyway you can link it to any other service you want.

Rocket Animation

To replace the rocket animation with the instapage version animation, simply replace the following code:

<div class="rocket-animation">
    <div class="rocket">
        <img src="images/rocket.png" width="136" height="190">
        <span class="rocket-line rline1"></span>
        <span class="rocket-line rline2"></span>
        <span class="rocket-line rline3"></span>
    </div>
    <div class="cloud cloud1"><img src="images/cloud.png" width="60" height="35"></div>
    <div class="cloud cloud2"><img src="images/cloud.png" width="60" height="35"></div>
    <div class="cloud cloud3"><img src="images/cloud.png" width="60" height="35"></div>
</div>

With this code:

<div class="rocket-animation-svg">
    <img class="rocket-svg" src="images/rocketanimation.svg">
</div>

And for the WHMCS version, the code are located in "header.tpl" file as follow:

<div class="rocket-animation">
    <div class="rocket">
        <img src="{$WEB_ROOT}/templates/{$template}/images/rocket.png" width="136" height="190">
        <span class="rocket-line rline1"></span>
        <span class="rocket-line rline2"></span>
        <span class="rocket-line rline3"></span>
    </div>
    <div class="cloud cloud1"><img src="{$WEB_ROOT}/templates/{$template}/images/cloud.png" width="60" height="35"></div>
    <div class="cloud cloud2"><img src="{$WEB_ROOT}/templates/{$template}/images/cloud.png" width="60" height="35"></div>
    <div class="cloud cloud3"><img src="{$WEB_ROOT}/templates/{$template}/images/cloud.png" width="60" height="35"></div>
</div>

Replace it with the following code:

<div class="rocket-animation-svg">
    <img class="rocket-svg" src="{$WEB_ROOT}/templates/{$template}/images/rocketanimation.svg">
</div>

Info icons & text

In info section you can change the icon and title by editing this code for each one.

You can use FontAwesome icons instead of the existed icons. Assume you needed twitter icon. To do that, replace this "hroc hroc-business" with this "fab fa-twitter"

If you want to relplace the icon with image, simply replace this code <i class="hroc hroc-business"> with this <img src="image/image.png" /> and modify the src="" with your image url.

<div id="info-box1" class="info-box opened-info">
    <div class="info-icon"><i class="hroc hroc-business"></i></div>
    <div class="info-title">Tangible improvments</div>
    <div class="info-circle"><div class="circle-icon"></div></div>
</div>

Make sure to repeat the same modifications in this code as well.

You can change the brief text under "info-text" div tag as showing.

<div class="info-title-icon">
    <i class="hroc hroc-business"></i>
    <div>Tangible improvments</div>
</div>
<div class="info-text">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui
    blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
    et quas molestias excepturi sint occaecati cupiditate.
</div>

Features text & images

To change the image in the features section, replace the src="" url of the img tag with you url, or simply replace feature1.png in the images folder.

Replace the title, subtitle and the brief easily as showing.

<div class="col-sm-12 col-md-5 text-center">
    <img class="feature-image" src="images/feature1.png">
</div>
<div class="col-sm-12 col-md-7">
    <div class="feature-title">Security Guaranteed.</div>
    <div class="feature-subtitle">Get Started Quickly & Easily</div>
    <div class="feature-text">
        <p>Hostrocket network covers +250 countries and devices ranging from desktops and laptops to smart phones and tablets.</p>
        <p>As an advertiser you'll get instant access to an intuitive and easy-to-use self-serve interface and have +1 billion users a click away. Choose between a variety of advanced targeting options and set up conversion tracking to keep full control of your ROI</p>
    </div>
    <a class="feature-button" href="#">Select plan</a>
</div>

And for the "Select plan" button replace the # with your url.

<a class="feature-button" href="#">Select plan</a>

Pricing tables

Every Pricing table start with this line of code.

<div class="plan-box">

You can add "Best Seller" icon at the top of the table by adding "best-seller" class next to "plan-box" as follow.

<div class="plan-box best-seller">

This code is the head of the pricing table, you can easily change the title and the price.

<div class="plan-box-header color-bg2">
    <div class="plan-title">Advanced</div>
    <div class="price-holder">
        <div class="currency">$</div>
        <div class="number">
            <div class="num-big">5</div>
            <div class="num-small-holder">
                <div class="num-small">.38<div class="duration">/mo</div></div>
            </div>
        </div>
    </div>
</div>

In this list you can add or remove the items. Each item has class name "c-item". The items that labeled as not included will have class name "not-inc".

In WHMCS template, you will be using this list code when you add the ordering list, to be looks like the Html template exactly.

<ul class="c-list">    
    <li class="c-item"><i class="fas fa-check" aria-hidden="true"></i>Unlimited Storage</li>
    <li class="c-item"><i class="fas fa-check" aria-hidden="true"></i>500 Protected Files</li>
    <li class="c-item"><i class="fas fa-check" aria-hidden="true"></i>All Sharing Features</li>
    <li class="c-item"><i class="fas fa-check" aria-hidden="true"></i>Realtime Revoke</li>
    <li class="c-item"><i class="fas fa-check" aria-hidden="true"></i>Access to Party Integrations</li>
    <li class="c-item"><i class="fas fa-check" aria-hidden="true"></i>Free Native Apps</li>
    <li class="c-item not-inc"><i class="fas fa-check" aria-hidden="true"></i>QNote Editor</li>
    <li class="c-item not-inc"><i class="fas fa-check" aria-hidden="true"></i>Offline File Access</li>
    <li class="c-item not-inc"><i class="fas fa-check" aria-hidden="true"></i>Basic Versioning</li>
    <li class="c-item not-inc"><i class="fas fa-check" aria-hidden="true"></i>Single Sign on</li>
    <li class="c-item not-inc"><i class="fas fa-check" aria-hidden="true"></i>2-Factor Autentication</li>
</ul>

For the "Select plan" button replace the # with your url.

<a class="color-bg2" href="#">Select plan</a>

Video section

To replace the video, just replace the iframe code with your code and make sure to set the width="100%" and height="310"

<iframe class="vimeo" src="https://player.vimeo.com/video/72978544" width="100%" height="310" frameborder="0"></iframe>

Testimonials

If you want to add a testimonial slide, duplicate this code and modify it with your data.

<div class="testimonial-slide">
    <div class="slide-content">
        <div class="col-sm-12 col-md-3">
            <img src="images/sample.jpg" alt="">
        </div>
        <div class="col-sm-12 col-md-9">
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque quos dolores et quas molestias excepturi.<br>
                praesentium voluptatum deleniti atque corrupti quos et quas molestias excepturi.</p>
        </div>
    </div>
</div>

WHMCS Theme Installation

  • Copy "hostrocket" folder to WHMCS templates folder.
  • Copy "hostrocket_cart" and "standard_cart" folders to WHMCS templates/orderforms folder.
  • On your WHMCS admin panel go to Setup > General Settings, choose the template "Hostrocket" and save changes.
  • Go to Setup > General Settings then Ordering Tab, choose "Hostrocket Cart" and save changes.

Once again, thank you so much for purchasing this template. We'd be glad to help you if you have any questions relating to this template. No guarantees, but We'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.