<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>HOSTSight - Typography</title>
<link rel="stylesheet" type="text/css" href="css/vendors/Bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/vendors/Bootstrap/bootstrap-grid.min.css">
<link href="css/plugins/navigation.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.min.css">
<link rel="stylesheet" type="text/css" href="css/theme-font.min.css">
<!--Styles for RTL-->
<!--<link rel="stylesheet" type="text/css" href="css/rtl.min.css">-->
</head>
<body>
<!-- Preloader -->
<!--<div id="hellopreloader">
<div class="preloader">
<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
<circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="1;0;0;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;1;0;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;1;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;1;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;1;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;1;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;0;1;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;0;0;1" calcMode="linear"
repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
</div>
</div>-->
<!-- ... end Preloader -->
<!-- Main Header -->
<nav id="navigation" class="site-header navigation navigation-justified header--sticky">
<div class="container">
<div class="navigation-header">
<div class="navigation-logo">
<a href="index.html">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/logo-white.webp">
<img class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/logo-white.png" alt="logo">
</picture>
</a>
</div>
<div class="navigation-button-toggler">
<i class="hamburger-icon"></i>
</div>
</div>
<div class="navigation-body">
<div class="navigation-body-header">
<div class="navigation-logo">
<a href="index.html">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/logo-white.webp">
<img class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/logo-white.png" alt="logo">
</picture>
</a>
</div>
<span class="navigation-body-close-button">✕</span>
</div>
<ul class="navigation-menu">
<li class="navigation-item is-active">
<a class="navigation-link" href="#">Hosting</a>
<div class="navigation-megamenu">
<div class="navigation-megamenu-container">
<div class="navigation-row">
<div class="navigation-col">
<a href="02_wp_host.html" class="navigation-hosting-item border-primary-themes">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/navigation-hostings/hosting1.webp">
<img class="navigation-hosting-item-img lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/navigation-hostings/hosting1.png" alt="hosting">
</picture>
WordPress Hosting
</a>
</div>
<div class="navigation-col">
<a href="03_shared_host.html" class="navigation-hosting-item border-red-themes">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/navigation-hostings/hosting2.webp">
<img class="navigation-hosting-item-img lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/navigation-hostings/hosting2.png" alt="hosting">
</picture>
Shared Hosting
</a>
</div>
<div class="navigation-col">
<a href="04_vps_host.html" class="navigation-hosting-item border-orange-themes">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/navigation-hostings/hosting3.webp">
<img class="navigation-hosting-item-img lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/navigation-hostings/hosting3.png" alt="hosting">
</picture>
VPS Hosting
</a>
</div>
<div class="navigation-col">
<a href="05_dedicated_server.html" class="navigation-hosting-item border-yellow-themes">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/navigation-hostings/hosting4.webp">
<img class="navigation-hosting-item-img lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/navigation-hostings/hosting4.png" alt="hosting">
</picture>
Dedicated Server
</a>
</div>
<div class="navigation-col">
<a href="06_cloud_hosting.html" class="navigation-hosting-item border-blue-themes">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/navigation-hostings/hosting5.webp">
<img class="navigation-hosting-item-img lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/navigation-hostings/hosting5.png" alt="hosting">
</picture>
Cloud Hosting
</a>
</div>
</div>
</div>
</div>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">Domain</a>
<ul class="navigation-dropdown">
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="07_domains.html">Domains</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="08_domain_checking.html">Domain Checking</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">
Status Pages
<span class="submenu-indicator"></span>
</a>
<ul class="navigation-dropdown">
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="18_status_page.html">Status Page</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="19_incident_history.html">Incident History</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="20_operational.html">Operational</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="21_degraded_performance.html">Degraded Performance</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="22_planned_maintenance.html">Planned Maintenance</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="23_subscribe_pop_up.html">Subscribe Popup</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">Pages</a>
<div class="navigation-megamenu navigation-megamenu-half">
<div class="navigation-megamenu-container">
<div class="navigation-row">
<div class="navigation-col">
<ul class="navigation-list">
<li class="navigation-list-heading">
Standard Pages
<span class="navigation-list-subheading">Pages that every website needs.</span>
</li>
<li><a href="09_about.html">About Us</a></li>
<li><a href="25_testimonials.html">Testimonials</a></li>
<li><a href="27_pricing_tables.html">Pricing Packages</a></li>
<li><a href="18_status_page.html">Status Page</a></li>
<li><a href="16_blog_details.html">Post Details</a></li>
<li><a href="24_error.html">Error 404</a></li>
</ul>
</div>
<div class="navigation-col">
<ul class="navigation-list">
<li class="navigation-list-heading">
Web Elements
<span class="navigation-list-subheading">Awesome header and title style variations and many more.</span>
</li>
<li><a href="31_typography.html">Typography</a></li>
<li><a href="26_tabs_and_accordions.html">Tabs & Accordions</a></li>
<li><a href="30_tables.html">Tables</a></li>
<li><a href="28_infographic.html">Infographic</a></li>
<li><a href="32_buttons.html">Buttons</a></li>
<li><a href="29_forms.html">Forms</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="navigation-item">
<a class="navigation-link" href="#">
Support
</a>
<ul class="navigation-dropdown">
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="14_submit_a_request.html">Submit a Request</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">
Knowledge Base
<span class="submenu-indicator"></span>
</a>
<ul class="navigation-dropdown">
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="10_knowledge_base.html">Getting Started</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="11_knowledge_base_domains.html">Hosting</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">
Domains
<span class="submenu-indicator submenu-indicator-left"></span>
</a>
<ul class="navigation-dropdown navigation-dropdown-left">
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">Vue</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">React</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">Ember</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">
Angular
<span class="submenu-indicator submenu-indicator-left"></span>
</a>
<ul class="navigation-dropdown navigation-dropdown-left">
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">Angular</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="#">Angular 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="12_knowledge_base_domain_articles.html">General</a>
</li>
<li class="navigation-dropdown-item">
<a class="navigation-dropdown-link" href="13_knowledge_base_domain_article_details.html">Articles</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="navigation-item">
<a class="navigation-link" href="15_blog.html">Blog</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="17_contacts.html">Contacts</a>
</li>
</ul>
<div class="navigation-body-section navigation-additional-menu">
<a href="#" class="crumina-button button--green button--xs">Trial Period</a>
<div class="navigation-search">
<div class="link-modal-popup" data-toggle="modal" data-target="#popupSearch"></div>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-search"></use>
</svg>
</div>
<div class="navigation-user-menu">
<div class="link-modal-popup" data-toggle="modal" data-target="#userMenuPopup"></div>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-user-menu"></use>
</svg>
</div>
</div>
</div>
</div>
</nav>
<!-- ... end Main Header -->
<!-- Popup Search -->
<div class="modal fade window-popup popup-search" id="popupSearch" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="modal-close-btn-wrapper">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-close"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="navigation-search-popup">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 m-auto">
<h2 class="fw-medium text-white">WHAT ARE YOU LOOKING FOR?</h2>
<form class="search-popup-form" >
<div class="input-btn--inline">
<input class="input--dark" type="text" placeholder="Choose your new web address…">
<button type="button" class="crumina-button button--primary button--l">SEARCH</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ... end Popup Search -->
<!-- User Menu Popup -->
<div class="modal fade window-popup user-menu-popup" id="userMenuPopup" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="modal-close-btn-wrapper">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-close"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="user-menu">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 m-auto">
<a href="index.html" class="site-logo">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/logo-colored.webp">
<img class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/logo-colored.png" alt="logo" width="185">
</picture>
</a>
<p class="fw-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<form class="sign-in-form" >
<h6 class="text-white">SIGN IN TO YOUR ACCOUNT</h6>
<div class="form-item">
<input class="input--dark input--squared" type="text" placeholder="Username or email">
</div>
<div class="form-item">
<input class="input--dark input--squared" type="password" placeholder="Password">
</div>
<div class="form-item">
<div class="remember-wrapper text-white">
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes4">
Remember Me
</label>
</div>
<a href="#">Lost your password?</a>
</div>
</div>
<div class="form-item">
<button type="button" class="crumina-button button--primary button--l w-100">Sign In</button>
</div>
</form>
<p class="text-white fw-medium">Sign In with social networks:</p>
<ul class="socials">
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/facebook.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/facebook.png" alt="facebook">
</picture>
</a>
</li>
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/twitter.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/twitter.png" alt="twitter">
</picture>
</a>
</li>
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/google.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/google.png" alt="google">
</picture>
</a>
</li>
</ul>
<button type="button" class="crumina-button button--grey button--l button--bordered w-100">CREATE AN ACCOUNT</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ... end User Menu Popup -->
<div class="main-content-wrapper">
<div class="crumina-stunning-header stunning-header-bg2 large-section-padding">
</div>
<section class="pt120">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h1">
<h1 class="heading-title">Heading 1</h1>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h1 heading--uppercase">
<h1 class="heading-title">HEADING 1</h1>
<div class="heading-text">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA.</div>
</header>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h2">
<h2 class="heading-title">Heading 2</h2>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h2 heading--uppercase">
<h2 class="heading-title">HEADING 2</h2>
<div class="heading-text">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA.</div>
</header>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h3">
<h3 class="heading-title">Heading 3</h3>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h3 heading--uppercase">
<h3 class="heading-title">HEADING 3</h3>
<div class="heading-text">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA.</div>
</header>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h4">
<h4 class="heading-title">Heading 4</h4>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h4 heading--uppercase">
<h4 class="heading-title">HEADING 4</h4>
<div class="heading-text">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA.</div>
</header>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h5">
<h5 class="heading-title">Heading 5</h5>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h5 heading--uppercase">
<h5 class="heading-title">HEADING 5</h5>
<div class="heading-text">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA.</div>
</header>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h6">
<h6 class="heading-title">Heading 6</h6>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</header>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-5">
<header class="crumina-module crumina-heading heading--h6 heading--uppercase">
<h6 class="heading-title">HEADING 6</h6>
<div class="heading-text">LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA.</div>
</header>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row mt-5">
<div class="col-lg-12">
<h4 class="mb-4">Dark background text selection</h4>
<p class="selection--grey-light">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis <span style="background: #d9e3eb;">nostrud exerci
tation ullamcorper suscipit lobortis</span> nisl ut aliquip ex ea commodo consequat. Eodem modo typi,
qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima.
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-12">
<h4 class="mb-4">Primary background text selection</h4>
<p class="selection--primary">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Eodem
<span style="background: #6419ff; color: #fff;">modo typi, qui nunc nobis videntur parum clari, fi</span>ant sollemnes in futurum. Mirum est notare quam littera gothica,
quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta
decima et quinta decima.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row small-section-padding">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h4 class="mb-4">Enumerated lists:</h4>
<ol>
<li>
<a href="#">Lorem ipsum dolor sit amet.</a>
</li>
<li>
<a href="#">Veniam, quis nostrud exercitation ullamco.</a>
</li>
<li>
<a href="#">Ut enim ad minim veniam, quis nostrud.</a>
</li>
<li>
<a href="#">Duis aute irure dolor in reprehenderit.</a>
</li>
<li>
<a href="#">Excepteur sint occaecat cupidatat non proident.</a>
</li>
<li>
<a href="#">Sunt in culpa qui officia.</a>
</li>
</ol>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h4 class="mb-4">Standard text lists:</h4>
<ul>
<li>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod minim veniam.</a>
</li>
<li>
<a href="#">Veniam, quis nostrud exercitation ullamco laboris nisi.</a>
</li>
<li>
<a href="#">Ut enim ad minim veniam, quis nostrud.</a>
</li>
<li>
<a href="#">Duis aute irure dolor in reprehenderit in voluptate velit esse.</a>
</li>
<li>
<a href="#">Excepteur sint occaecat cupidatat non proident.</a>
</li>
<li>
<a href="#">Sunt in culpa qui officia deserunt mollit anim id est laborum.</a>
</li>
</ul>
</div>
</div>
<div class="row small-section-padding">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<ul class="list--standard list--icon-primary">
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use>
</svg>
<a href="#">Qolor sit amet, consectetuer;</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use>
</svg>
<a href="#">Investigationes demonstraverunt;</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use>
</svg>
<a href="#">Dam liber tempor cum soluta;</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use>
</svg>
<a href="#">Quarta decima et quinta.</a>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<ul class="list--standard">
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">Qolor sit amet, consectetuer;</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">Investigationes demonstraverunt;</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">
Dam liber tempor cum soluta;
</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">
Quarta decima et quinta.
</a>
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<ul>
<li>
<a href="#">Qolor sit amet, consectetuer;</a>
</li>
<li>
<a href="#">Investigationes demonstraverunt;</a>
</li>
<li>
<a href="#">Dam liber tempor cum soluta;</a>
</li>
<li>
<a href="#">Quarta decima et quinta.</a>
</li>
</ul>
</div>
</div>
<div class="row small-section-padding">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h6>Virtual Machine Provides:</h6>
<ul class="list--standard list--with-border list--icon-yellow">
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">5,000 SMTP relays</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">File and DB backups</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">Linux with cPanel available <span class="actual-info">(managed & fully managed)</span></a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use>
</svg>
<a href="#">1 SSL certificate – 1 year free <span class="actual-info">($79.99 renewal annually)</span></a>
</li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h6>Host Server:</h6>
<ul class="list--standard list--with-border list--icon-orange">
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use>
</svg>
<a href="#">Processor type: 2x Intel E5-2620v3</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use>
</svg>
<a href="#">Processor Cache: 15M Cache</a>
</li>
<li>
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use>
</svg>
<a href="#">Processor hard disk: 2x 600GB HDD</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row medium-section-padding">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<header class="crumina-module crumina-heading heading--h2">
<h2 class="heading-title">ALIGN TEXT TO THE LEFT</h2>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnai.</div>
</header>
</div>
<div class="col-lg-6 offset-lg-3 col-md-6 offset-md-3 col-sm-12 offset-sm-0">
<header class="crumina-module crumina-heading heading--h2 align-center">
<h2 class="heading-title">CENTER TEXT ALIGNMENT</h2>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnai.</div>
</header>
</div>
<div class="col-lg-6 offset-lg-6 col-md-6 offset-md-6 col-sm-12 offset-sm-0 col-xs-12">
<header class="crumina-module crumina-heading heading--h2 align-right">
<h2 class="heading-title">ALIGN TEXT TO THE RIGHT</h2>
<div class="heading-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnai.</div>
</header>
</div>
</div>
</div>
</section>
<section class="pb120">
<div class="container">
<div class="row small-section-padding">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<h6 class="heading--uppercase">FULL WIDTH</h6>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row small-section-padding">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<h6 class="heading--uppercase">II Columns Layout.</h6>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="row small-section-padding">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<h6 class="heading--uppercase">III Columns Layout.</h6>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat mazim placerat facer possim assum.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat mazim placerat facer possim assum.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat mazim placerat facer possim assum.
</p>
</div>
</div>
<div class="row small-section-padding">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<h6 class="heading--uppercase">IV Columns Layout.</h6>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</p>
</div>
</div>
<div class="row small-section-padding">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<h6 class="heading--uppercase">I Third / II Thirds</h6>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat mazim placerat facer possim assum.
</p>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum formas humanitatis per seacula quarta decima
et quinta decima.
</p>
</div>
</div>
<div class="row small-section-padding">
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<h6 class="heading--uppercase">II Thirds / I Third</h6>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum formas humanitatis per seacula quarta decima
et quinta decima.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat mazim placerat facer possim assum.
</p>
</div>
</div>
</div>
</section>
<section class="large-section-padding bg-grey">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 align-center mb-5">
<h2>ICONS</h2>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-single-arrow"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-circle"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-subscribe"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-subscribe"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-search"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-search"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-user-menu"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-user-menu"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-arrow-left"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-arrow-left"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-arrow-right"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-arrow-right"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-to-top"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-to-top"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow-bottom"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow-bottom"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow-top"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow-top"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-arrow-bottom"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-arrow-bottom"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-close"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-close"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-check"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-check"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-minus"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-minus"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-c-panel"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-c-panel"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-mail"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-mail"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-transfer"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-transfer"></use></svg></code></pre>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-speed"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-speed"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-plus"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-plus"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-minus"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-minus"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-article"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-article"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-comment"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-comment"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-facebook"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-facebook"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-twitter"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-twitter"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-instagram"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-instagram"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-youtube"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-youtube"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-pinterest"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-pinterest"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-prev"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-prev"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-next"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-next"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-flag"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-flag"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-hosting"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-hosting"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-domains"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-domains"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-puzzle"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-puzzle"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-info"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-info"></use></svg></code></pre>
</div>
<div class="icon-demonstration">
<svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-calendar"></use></svg>
<pre><code><svg class="crumina-icon"><use xlink:href="svg-icons/sprite/icons.svg#icon-info"></use></svg></code></pre>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="site-footer" class="footer footer--dark footer--with-decoration">
<div class="footer-content">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-2 col-md-6 col-sm-12 col-xs-12 mb-4 mb-lg-0">
<div class="widget widget_links">
<h5 class="widget-title">
Hosting
</h5>
<ul>
<li>
<a href="02_wp_host.html">
WordPress Hosting
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="03_shared_host.html">
Shared Hosting
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="04_vps_host.html">
VPS Hosting
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="05_dedicated_server.html">
Dedicated Server
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="06_cloud_hosting.html">
Cloud Hosting
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-12 col-xs-12 mb-4 mb-lg-0">
<div class="widget widget_links">
<h5 class="widget-title">
Domains
</h5>
<ul>
<li>
<a href="07_domains.html">
Register Domains
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="08_domain_checking.html">
Transfer Domains
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="18_status_page.html">
Manage Domains
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-6 col-sm-12 col-xs-12 mb-4 mb-lg-0">
<div class="widget widget_links">
<h5 class="widget-title">
Company
</h5>
<ul>
<li>
<a href="09_about.html">
About Us
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="10_knowledge_base.html">
Support
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="15_blog.html">
Blog
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
<li>
<a href="17_contacts.html">
Contacts
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-triangle-arrow"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 mb-0 mb-lg-0">
<div class="widget w-info">
<a href="index.html" class="site-logo">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/demo-content/logo-white.webp">
<img class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/demo-content/logo-white.png" alt="logo" width="185">
</picture>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
<ul class="socials">
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/facebook.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/facebook.png" alt="facebook">
</picture>
</a>
</li>
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/twitter.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/twitter.png" alt="twitter">
</picture>
</a>
</li>
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/google.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/google.png" alt="google">
</picture>
</a>
</li>
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/youtube.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/youtube.png" alt="youtube">
</picture>
</a>
</li>
<li>
<a href="#">
<picture>
<source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="img/theme-content/social-icons/rss.webp">
<img class="crumina-icon lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/theme-content/social-icons/rss.png" alt="rss">
</picture>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-subscribe-panel">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 mb-4 mb-lg-0">
<h5 class="footer-subscribe-panel-title text-white">SUBSCRIBE TO OUR NEWSLETTER</h5>
</div>
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 mb-4 mb-lg-0">
<span class="footer-subscribe-panel-subtitle"><span class="font-weight-bold">Join Our Newsletter & Marketing Communication.</span> We'll send you news and offers.</span>
</div>
<div class="col-lg-6 col-md-4 col-sm-12 col-xs-12 mb-0 mb-lg-0">
<form class="footer-subscribe-form" >
<div class="input-btn--inline">
<input class="input--dark" type="text" placeholder="Choose your new web address…">
<button type="button" class="crumina-button button--lime button--l">SEARCH</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="sub-footer bg-black">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center mb-0 mb-lg-0">
<div class="copyright">
<span>Copyright © 2019 <a href="index.html">Hostsight</a>, Designed by <a href="https://themeforest.net/user/themefire/portfolio">themefire</a> Developed by <a href="https://crumina.net/">Crumina</a> Only on <a href="https://themeforest.net/">Envato Market</a></span>
</div>
</div>
</div>
</div>
</div>
<a class="back-to-top" href="#">
<svg class="crumina-icon">
<use xlink:href="svg-icons/sprite/icons.svg#icon-to-top"></use>
</svg>
</a>
</footer>
<!-- ... end Footer -->
<script src="js/jquery.min.js"></script>
<script src="js/Bootstrap/bootstrap.bundle.min.js"></script>
<script src="js/js-plugins/navigation.min.js"></script>
<!--<script src="js/js-plugins/select2.min.js"></script>-->
<script src="js/js-plugins/material.min.js"></script>
<script src="js/js-plugins/swiper.min.js"></script>
<!--<script src="js/js-plugins/jquery-countTo.min.js"></script>-->
<!--<script src="js/js-plugins/waypoints.min.js"></script>-->
<!--<script src="js/js-plugins/leaflet.min.js"></script>-->
<!--<script src="js/js-plugins/MarkerClusterGroup.min.js"></script>-->
<!--<script src="js/js-plugins/jquery.magnific-popup.min.js"></script>-->
<!--<script src="js/js-plugins/TimeCircles.min.js"></script>-->
<script src="js/js-plugins/smooth-scroll.min.js"></script>
<script src="js/js-plugins/jquery.matchHeight.min.js"></script>
<!--<script src="js/js-plugins/imagesLoaded.min.js"></script>-->
<!--<script src="js/js-plugins/isotope.pkgd.min.js"></script>-->
<!--<script src="js/js-plugins/ajax-pagination.min.js"></script>-->
<!--<script src="js/js-plugins/Chart.min.js"></script>-->
<!--<script src="js/js-plugins/chartjs-plugin-deferred.min.js"></script>-->
<script src="js/js-plugins/lazysizes.min.js" async=""></script>
<script src="js/js-plugins/modernizr-custom.min.js"></script>
<script type="text/javascript">
if ('loading' in HTMLImageElement.prototype) {
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
}
</script>
<script src="js/main.js"></script>
<!--<script src="js/js-plugins/leaflet-init.js"></script>-->
<!-- jQuery-scripts for Modules (Send Message) -->
<!--<script src="modules/forms/src/js/jquery.validate.min.js"></script>-->
<!--<script src="modules/forms/src/js/sweetalert2.all.js"></script>-->
<!--<script src="modules/forms/src/js/scripts.js"></script>-->
</body>
</html>