Cloudhub Hosting and Technology HTML Template

• Changes
  1. Updated WHMCS integration to version 7.8.3

• Files
  1. whmcs/cloudhub-7.8.3.zip

• Changes
  1. Updated jQuery to version 3.4.1
  2. Updated WHMCS integration to version 7.8.1
  3. Added include option to product configurator

• Files
  1. template/js/main.js
  2. template/js/main.min.js
  3. template/js/jquery.min.js
  4. whmcs/cloudhub-7.8.1.zip

Version 1.12

• Changes
  1. Updated WHMCS integration to version 7.7.0

• Files
  1. whmcs/cloudhub-7.7.0.zip

Version 1.11

• Changes
  1. Updated WHMCS integration to version 7.6.1

• Files
  1. whmcs/cloudhub-7.6.1.zip

• Changes
  1. Added basic preloader implementation
  2. Updated Font Awesome to version 5.2.0
  3. Updated WHMCS integration to version 7.6.0

• Files
  1. template
  2. template/js
  3. template/css
  4. template/webfonts
  5. whmcs/cloudhub-7.6.0.zip

Version 1.9

• Changes
  1. Updated WHMCS integration to version 7.5.1

• Files
  1. whmcs/cloudhub-7.5.1.zip
  2. whmcs/cloudhub/scripts.js
  3. whmcs/cloudhub/scripts.min.js

Version 1.8

• Changes
  1. Updated WHMCS integration to version 7.5.0

• Files
  1. whmcs/cloudhub-7.5.0.zip

• Changes
  1. Added modal overlay boxes
  2. Added custom link iframe overlay
  3. Added product configurator slider step option
  4. Improved product configurator slider performance

• Files
  1. template/js/main.js
  2. template/js/main.min.js
  3. template/css/main.css
  4. template/css/main.min.css
  5. template/about.html
  6. template/elements-other.html
  7. template/elements-pricing.html
  8. template/products-custom-cloud.html

Version 1.6

• Changes
  1. Added Font Awesome 5.0 compatibility
  2. Fixed minor styling issues in WHMCS integration

• Files
  1. template/js/main.js
  2. template/js/main.min.js
  3. template/css/main.css
  4. template/css/main.min.css
  5. whmcs/cloudhub-7.4.2.zip

Version 1.5

• Changes
  1. Added product comparison table
  2. Updated cloud hosting product page
  3. Updated custom color style sheet template

• Files
  1. template/css/main.css
  2. template/css/main.min.css
  3. template/css/custom.css
  4. template/elements-pricing.html
  5. template/products-cloud-hosting.html

Version 1.4

• Changes
  1. Added additional button sizes
  2. Added product configurator slider
  3. Added custom cloud product page
  4. Added developer cloud product page
  5. Updated custom color style sheet templates
  6. Fixed drop down menu visibility in WHMCS integration

• Files
  1. template/js/main.js
  2. template/js/main.min.js
  3. template/css/main.css
  4. template/css/main.min.css
  5. template/css/custom.css
  6. template/elements-pricing.html
  7. template/products-developer-cloud.html
  8. template/products-custom-cloud.html
  9. whmcs/cloudhub-7.4.2.zip

Version 1.3

• Changes
  1. Added domain names product page
  2. Added SSL certificates product page
  3. Added PHP contact form with ReCaptcha support
  4. Added various main and custom style declarations
  5. Added custom term selector script for product boxes
  6. Fixed module styling issues in WHMCS integration

• Files
  1. template/php
  2. template/js/main.js
  3. template/js/main.min.js
  4. template/css/main.css
  5. template/css/main.min.css
  6. template/contact.php
  7. template/products-domain-names.html
  8. template/products-ssl-certificates.html
  9. whmcs/cloudhub-7.4.1.zip

Version 1.2

• Changes
  1. Fixed styling error with custom search input fields
• Files
  1. template/js/main.js
  2. template/js/main.min.js

Version 1.1

• Changes
  1. Improved gesture detection on touch inputs
  2. Added custom WHMCS integration based on version 7.4.1
• Files
  1. template/js/main.js
  2. template/js/main.min.js
  3. whmcs/cloudhub-7.4.1.zip

Installation

Unpack the archive cloudhub-7.8.3.zip locally or directly on your server and move its content to the templates directory of your WHMCS installation. Make sure to set the correct permissions required for your web server and navigate to Setup → General Settings to activate the template.

Customization

The header and footer elements can be easily customized using the template files found in cloudhub/template/includes as well as the footer color class in the body template file. The color scheme can be changed using the custom template and its style sheets.

Products should generally be presented using the default standard cart template to ensure a consistent and functional layout. Basic markup as shown in the code example can further enhance the presentation.

More detailed pricing options should be implemented using the main template and not the WHMCS integration.

								<strong>8 GB</strong> ECC Memory
								<strong>6 Core</strong> Intel Processor
								<strong>80 GB</strong> RAID 10 SSD Storage
								<strong>4 TB</strong> Premium Bandwidth
								<strong>1 Gbit</strong> Network Uplink<br>
								<small>Dedicated IPv4 Address</small>
								<small>Powered by OpenStack</small>
								<small>99.99% Uptime SLA</small>
								<small>Load Balancing</small>
							

Behavior

The header is displayed as a fixed element by default, always moving with the content independent of the scroll position. Alternative behaviors are static, always shown above the content, and dynamic, which hides the header automatically whenever the page is scrolled downwards.

• header-static
• header-dynamic

Styles

The default background of the header is the primary color and can be changed using the custom.css file or one of the following classes. Additionally, a fixed or scroll based shadow can be displayed.

Logo

Using an image is the recommended way to display the site logo. However, text logos are supported as well which can be customized using a variety of icons and text color classes. Apply the class logo-text-baseline to align the logo with the primary navigation menu instead of vertically centering it.

								<a class="logo" href="index.html">
									<div class="logo-text logo-text-baseline">
										Cloudhub
									</div>
								</a>
							

Navigation

The site navigation is divided into primary and secondary lists to differentiate their importance and visibility. The primary navigation supports drop down menus and should be used as the main navigation point. You can force the mobile navigation by adding header-nav-overlay to the header class.

								<header id="header" class="header-nav-overlay">
									<div class="container">
										<nav></nav>
									</div>
								</header>
							

The default background color of the footer element is white and can be changed by adding one of the following classes to the body element.

• footer-gray
• footer-dark
• footer-color

								<body class="footer-dark">
									<footer id="footer">
										<section class="footer-primary">
										</section>
										<section class="footer-secondary">
										</section>
									</footer>
								</body>
							

Styles

The overall appearance of every content row can be easily customized with one or more of the following styling classes. Each assigned class affects the color and appearance of other additional classes being used.

Height

Each content row only uses the space required by its content. On larger devices the row height can be stretched in order to give the content more importance. Following classes are available to customize the height.

• content-row-half-height
• content-row-full-height

Styles

The content header is sized to be displayed within content rows by default but can be modified in various ways by the following classes.

• content-header-small
• content-header-large
• content-header-uppercase

Alignment

The following classes can be used to change the overall alignment of the header and its content. The content header is centered by default.

• content-header-align-left
• content-header-align-right

Styles

Scale and visibility of backgrounds as well as a simple parallax scrolling effect can be easily configured using one of the following classes.

• content-background-blur
• content-background-light
• content-background-scale
• content-background-scroll

Elements

Backgrounds are restricted to certain elements listed below. Each element may come with additional limitations depending on its type or size.

• i
• img
• video
• iframe

Appearance

The notification bar can be displayed with different background colors providing a visual indication of its current context.

• notification-error
• notification-warning
• notification-success

Options

data-dismissible - Creates a dismiss icon to enable the user to hide the notification bar after it has been displayed.

data-title - Name of the cookie used when creating a persistent dismissible notification. Requires the following data option to be defined.

data-expires - Expiration value given in days or as date object of how long to hide the current notification from the user if previously dismissed.

Widths

Column classes are defined by their width relative to the parent container. Each column row should add up to exactly 100 percent unless the flexible column class is being used within a column row.

Alignment

The columns in each row can be aligned horizontally and vertically using one of the following classes within the column-row class attribute.

Flex

The class column-row-flex-width can be added to exclusively use flexible column widths with automated spacing. The specific example can be found in the template file knowledge-base.html starting at line 305.

								<div class="column-row column-row-flex-width">
									<div class="column-flex">
									</div>
									<div class="column-flex">
									</div>
								</div>
							

Sidebars

Column rows can be utilized to display content sidebars with an alignment independent to their position in the DOM. For an example on how to use sidebars please take a look at the template file blog-sidebar.html

								<div class="column-row">
									<div class="column-66">
									</div>
									<div class="column-33 content-sidebar-left">
									</div>
								</div>
							

Animations

Slide transitions can be customized for both content and background using one of the following options in the content-slider class attribute.

								<div class="content-slider animate-container-fade">
									<div class="slide">
									</div>
									<div class="slide">
									</div>
								</div>
							

Options

data-nav - Navigation displayed below the slides. Circular links will be shown should no labels be defined for each of the slides.

data-nav-directional - Directional navigation displayed as arrows left and right of the slides. Omitted for devices with smaller screen widths.

data-rotation - Automatic rotation of slides given in seconds. The rotation is terminated as soon as the user interacts with the navigation.

data-title - Label used for the standard slider navigation. Needs to be defined for each slide individually.

								<div class="grid">
									<div class="grid-item">
										<img src="uploads/gallery-1-small.jpg">
									</div>
									<div class="grid-item">
										<img src="uploads/gallery-2-small.jpg">
									</div>
									<div class="grid-item">
										<img src="uploads/gallery-3-small.jpg">
									</div>
									<div class="grid-item">
										<img src="uploads/gallery-4-small.jpg">
									</div>
								</div>
							

Options

data-grid-columns - Number of columns the grid layout should be displayed in. Dynamically adapts to changes in screen width.

data-grid-gap - Horizontal and vertical spacing set in pixels between columns and elements within the grid layout.

								<div class="product-box">
									<div class="product-header">
										<h4>
										</h4>
										<p>
										</p>
									</div>
									<div class="product-price">
										<span class="term">
										</span>
									</div>
									<div class="product-features">
										<ul>
											<li>
											</li>
										</ul>
										<ul>
											<li>
											</li>
										</ul>
									</div>
									<div class="product-order">
										<a class="button" href="">
										</a>
									</div>
								</div>
							

The product box is the most common type of layout and can be used for almost every product. The different sections within the product box can be reorganized or removed without affecting the general layout. Groups of product boxes should be displayed using a column-row using a center bottom alignment in case their content varies in height.

Appearance

You can add the class product-box-popular to a product box including an additional element as shown below to give a specific plan or product more importance in an overview.

								<div class="product-box product-box-popular">
									<div class="product-popular">
									</div>
								</div>
							

								<div class="product-slider">
									<ul>
										<li>
											<span class="value"></span>
											<span class="label"></span>
										</li>
										<li>
											<div class="price">
												<span class="value"></span>
												<span class="label"></span>
											</div>
											<a class="button" href="">
											</a>
										</li>
									</ul>
									<ul>
										<li>
											<span class="value"></span>
											<span class="label"></span>
										</li>
										<li>
											<div class="price">
												<span class="value"></span>
												<span class="label"></span>
											</div>
											<a class="button" href="">
											</a>
										</li>
									</ul>
								</div>
							

The product slider is ideal to display a large number of similar packages with few changing features in a compact way. Very useful for products that are paid for in chunks like bandwidth or storage.

Styles

Product sliders resize dynamically based on the device screen width. You can also force smaller layouts, for example when displaying within columns, by using one of the following classes.

Options

data-sync - Identifier to synchronize two or more sliders with an identical number of packages. Useful for tabs showing different billing periods.

Behavior

The product configurator offers a similar user experience to the product slider while handling the setup and link modification differently. It requires a parent form element to submit the different options to a request location, for example a custom script that validates the POST or GET variables. The options are defined using hidden input elements with custom data attributes to specify the possible range of values.

Dividing the maximum value by the given step value of an option must equal a whole number for the configuration slider to work. The price needs to be defined per step option value for the total calculation to work. Please have a look at the files elements-pricing.html and products-custom-cloud.html for detailed examples on how to set up the configurator.

Please note that the price can only be fixed and can't be discounted based on the number of resources selected. The product slider in combination with predefined packages would be more suitable for this use case.

Styles

Following classes are available to hide the slider option segments and display a smaller version of the product configurator.

• product-configurator-small
• hide-segments

Options

data-currency - Define the currency symbol to display for your total price. Use the percentage sign to mark the position of the price output.

data-sync - Identifier to synchronize two or more sliders with an identical number of options. Useful for tabs showing different billing periods.

data-min - Minimum value that can be selected using the configurator. Additionally defines the increment if step value is undefined.

data-max - Maximum value that can be selected using the configurator. Dividing it by the step option value must equal an integer.

data-step - The increment value of each slider option segment. Uses the minimum value if undefined for backwards compatibility.

data-price - Price given for each option segment. Will be multiplied by the current number of step value options to determine the total.

data-title - Title or label displayed above the configuration slider. Printed in an inline element, don't use block elements with HTML markup.

data-title-plural - Same functionality as the regular title but only used when the currently selected option value does not equal one.

data-description - Brief description or additional information regarding the configuration option, displayed right of or below the title.

								<table>
									<caption>
									</caption>
									<thead>
										<tr>
											<th></th>
											<th></th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td></td>
											<td class="highlight"></td>
											<td><a class="button" href=""></a></td>
										</tr>
									</tbody>
								</table>
							

Classic pricing tables are perfect to present a larger number of available plans with just a few key features. Adding the thead element to the top enables the responsive table mode improving the user experience.

Layout

The default table layout resizes its column based on their content. Adding the following class enables the fixed table layout.

• table-layout-fixed

Layouts

Following layout classes are supported by the gallery container. Please note that the compact gallery layout should have an even number of pictures in relation to the column count in order to be displayed correctly.

• gallery-slider
• gallery-compact
• gallery-3-columns
• gallery-4-columns

Titles

You are able to display a short image title or description in the full screen view by adding the title attribute to the img element.

								<div class="gallery">
									<ul>
										<li>
											<a href=""><img src="" title=""></a>
										</li>
									</ul>
								</div>
							

Videos

								<a class="video-overlay" href="">
									Video Link
								</a>
							

The video overlay automatically supports YouTube and Vimeo links, as well as links to locally or remotely hosted HTML5 compatible videos.

Options

data-width - Define the maximum width for the video overlay. Required to calculate the correct aspect ratio. Defaults to 1280 pixels.

data-height - Define the maximum height for the video overlay. Only required if a custom width is set. Defaults to 720 pixels.

Custom

								<a class="iframe-overlay" data-src="">
									Custom Source
								</a>
							

Any custom content from a site or page can be embedded using the iframe overlay unless prohibited by the host of the content.

Options

data-src - The required target link of the content to be embedded in the overlay iframe. Source must support external embedding.

data-width - Define an optional maximum width for the iframe overlay. Content is displayed full screen by default if not defined.

data-height - Define an optional maximum height for the iframe overlay. Required if a custom width has been set to calculate the aspect ratio.

Options

data-modal - Defines the required modal title to be used with target links. Must be unique on a page in order to function correctly.

data-modal-show - Automatically display the modal when the page has been loaded. Use booleans or a number to define a delay in seconds.

data-modal-dismissible - Set this option to true if you want to allow users to dismiss the modal overlay by default.

Link Options

data-modal-target - Define the title of the modal you want to display using the element this option is attached to, for example a button.

data-modal-dismiss - Set the title of the modal you want to dismiss. Functions disregarding if the dismissible attribute is defined on the modal.

Modals are displayed in a medium size or adjusted to the screen width by default but can be customized using one of the following classes.

								<div class="modal modal-small" data-modal="">
									<div class="modal-header">
									</div>
									<div class="modal-content">
									</div>
								</div>
							

Buttons can be displayed using the button element within forms, or using a regular anchor element outside of forms. Following styling classes are available to change the default appearance of a button.

								<button class="button-primary button-large">
									Primary Button
								</button>
							

								<a class="button button-small" href="">
									Default Button
								</a>
							

Following notifications can be used to inform the user about important changes or results after the form as been sent to the server.

• form-error
• form-success

								<form method="post" action="">
									<div class="form-row form-error">
										<ul>
											<li>
											</li>
										</ul>
									</div>
								</form>
							

Navigation

You can link to your tabs from other pages by defining a unique id for each tab item within a tab group and pointing to it using the hash symbol. Adding the class active to an item will display it first on page load.

The following classes can be used to modify the size and margin of icons, while color and alignment should be adjusted using text classes.

								<a href="client-login.html">
									<i class="fas fa-lock"></i> Client Login
								</a>
							

								<a href="client-login.html">
									<i class="material-icons">lock</i> Client Login
								</a>
							

• jQuery - https://github.com/jquery/jquery
• Bricks - https://github.com/callmecavs/bricks.js
• JS Cookie - https://github.com/js-cookie/js-cookie
• Headroom - https://github.com/WickyNilliams/headroom.js
• ImagesLoaded - https://github.com/desandro/imagesloaded

• Material Icons - https://material.io/icons
• Font Awesome - https://fontawesome.com
• Public Domain Stock Photos - https://www.pexels.com
• Montserrat - https://fonts.google.com/specimen/Montserrat
• Open Sans - https://fonts.google.com/specimen/Open+Sans