HostX Documentation

HostX - HTML VPS Hosting Template

My Envato Account
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Intro

features

  • Based on twitter Bootstrap 4.
  • Built with HTML5 & CSS3.
  • Google insights page speed.
  • LTR & RTL Support.
  • Compare Tables.
  • Font Icons.
  • Google Fonts.
  • Easy to customize.
  • Fully Responsive.
  • Clean Code.
  • Free Images.
  • W3 Valid 100%.
  • Browser Compatibility.
  • Fully Customizable.
  • Modern and Creative Design.
  • And much more...

HTML Structure

  1. <!-- FREE TRIAL -->
  2. <div class="free-trial">
  3.    <div class="container">
  4.       <div class="text-contain">
  5.          <h3>Are You Ready To Enjoy? Get This Perfect Theme Now!</h3>
  6.          <p>It is a long established fact that a reader will be distracted</p>
  7.          <div class="button-contain">
  8.             <button>Start Trial Free</button>
  9.          </div>
  10.       </div>
  11.    </div>
  12. </div>

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following :

  1. .text-contain h3 { color: #some_color; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

  1. .free-trial .text-contain h3 { color: #some_color; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

CSS Files and Structure

This theme imports many CSS files:

  • 404.css
  • abuse.css
  • bundle.min.css
  • font-awesome.min.css
  • index.css
  • login.css
  • register.css
  • servers.css
  • slick.min.css
  • style.css
  • terms.css
  • trial.css

I'm using two CSS files in this theme. The first one is a Style file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using :

  1. /* NAVBAR */
  2.  
  3.    some code
  4.  
  5. /* HEADER */
  6.  
  7.    some code
  8.  
  9. /* WRAPPER */
  10.  
  11.    some code, etc.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

JavaScript

This theme imports many Javascript files and TypeScript Files:

  • jquery-3.3.1.min.js
  • jquery.validate.min.js
  • script.js
  • slick.min.js
  • jquery is a Javascript library that greatly reduces the amount of code that you must write.
  • javaScript Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.
  1. // ==== Loading Page ==== //
  2. $(window).on('load', function () {
  3.    'use strict';
  4.    $('body .loading-screen').fadeOut(1000);
  5.    $('html').css('overflow-y', 'visible');
  6. }); // This function is used to hide the loading section

Sources and Credits

I've used the following images, icons or other files as listed :

1. Images

2. JavaScript Files

3. Fonts

Template Customization

How to Customize this Template :

Go to This Link Click Me

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my 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.

© 2019 Nifty Theme.