Hostma – Modern Web Hosting Template

Introduction

Welcome to Hostma – Modern Web Hosting Template

Hostma - Modern Web Hosting Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Template Description

Hostma is a Modern Web Hosting Template using modern and minimal design. It is fully flexible user-friendly and responsive. Hostma Modern template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 45+ HTML Pages . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. This template using Bootstrap 5 framework. After Purchased this template you will get All HTML files,CSS, Scss and JS Files.

It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design template.

It is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Hostma is a Modern Web Hosting Template, you will be able to get free download of all future updates.

Template Features

CSS Structure

style.css is the main CSS file located in assets/css folder of the package. Whole CSS file is well indexed with topic and its related code.

    
/* ######## FONT ######## */
/* ######## BOOTSTRAP ######## */
/* Start::button default */
.btn {
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 0.3rem;
}

.btn-check:active + .btn,
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:active {
	color: #fff;
}

/* End::button default */
/* Start::btn-primary */
.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus:hover {
	background-color: var(--primary-hover);
	border-color: var(--primary-border);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
	background-color: var(--primary-color);
	border-color: var(--primary-border);
	outline: 0;
	box-shadow: none;
}

.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary.show:focus,
.btn-primary:active:focus {
	box-shadow: 0 0 0 0.2rem var(--primary05);
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary.show,
.btn-primary:active {
	background-color: var(--primary-color);
	border-color: var(--primary-border);
}

/* End::btn-primary */
/* Start::btn-secondary */
.btn-secondary {
	background-color: rgb(var(--secondary-rgb)) !important;
	border-color: rgb(var(--secondary-rgb)) !important;
}
.btn-secondary:hover, .btn-secondary:focus:hover {
	background-color: rgba(var(--secondary-rgb), 0.9);
	border-color: rgb(var(--secondary-rgb));
}

.btn-check:focus + .btn-secondary,
.btn-secondary:focus {
	background-color: rgb(var(--secondary-rgb));
	border-color: rgb(var(--secondary-rgb));
	outline: 0;
	box-shadow: none;
}

.btn-check:active + .btn-secondary:focus,
.btn-check:checked + .btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary.show:focus,
.btn-secondary:active:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--secondary-rgb), 0.5);
}

.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active,
.btn-secondary.show,
.btn-secondary:active {
	background-color: rgb(var(--secondary-rgb));
	border-color: rgb(var(--secondary-rgb));
}

/* End::btn-secondary */
 

JS Structure

custom.js is the main javascript file having all the js code. File is located in assets/js/ folder. This file code is also well formatted and section in different respective function names.

Along with this chart library based js code and dashboard based js code are added in separate files for ease of use of user.

	
'use strict'

/* .. tooltip .. */
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

/* .. popover .. */
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

/* Start::back-to-top */
function backToTop() {
	var back_to_top = document.querySelector('.back-to-top');
	var windowTop = window.pageYOffset || document.documentElement.scrollTop;
	windowTop > 500 ? back_to_top.style.display = "inline-flex" : back_to_top.style.display = "none"
}
window.addEventListener('scroll', backToTop)
/* End::back-to-top */

// reveal items on scroll
function reveal(){
var reveals = document.querySelectorAll('.reveal');

	if(reveals) {
		for(var i = 0; i < reveals.length; i++){

			var windowHeight = window.innerHeight;
			var cardTop = reveals[i].getBoundingClientRect().top;
			var cardRevealPoint = 130;
			
			if(cardTop < windowHeight - cardRevealPoint){
				reveals[i].classList.add('reveal-active');
			}
			else{
				reveals[i].classList.remove('reveal-active');
			}
		}
	}
}
window.addEventListener('scroll', reveal);
reveal(); //Run