| Server IP : 172.67.201.108 / Your IP : 216.73.216.11 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,400&family=Istok+Web:wght@400;700&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/components/ion.rangeslider.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/hosting/hosting.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Hosting Demo | Canvas</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Top Bar
============================================= -->
<div id="top-bar" class="text-center dark" style="background-color: #15888a">
<p class="mb-0 text-white" style="font-size: 14px;">Holisticly cultivate multifunctional quality vectors after Mobile SDK.<a href="#" class="ms-2 font-primary fw-bold text-white"><u>Learn More</u> ›</a></p>
</div>
<!-- Header
============================================= -->
<header id="header" class="full-header transparent-header dark" data-sticky-class="not-dark" data-responsive-class="not-dark">
<div id="header-wrap">
<div class="container">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo">
<a href="index.html">
<img class="logo-default" srcset="images/logo.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
<img class="logo-dark" srcset="images/logo-dark.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
</a>
</div><!-- #logo end -->
<div class="header-misc">
<a href="#" class="button bg-white text-dark button-light button-rounded color">Sign Up</a>
</div>
<div class="primary-menu-trigger">
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
</button>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu with-arrows">
<ul class="menu-container">
<li class="menu-item current"><a class="menu-link" href="#"><div>Home</div></a></li>
<li class="menu-item mega-menu"><a class="menu-link" href="#"><div>Hosting</div></a>
<div class="mega-menu-content mega-menu-style-2 border-top-0 not-dark">
<div class="container">
<div class="row">
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item">
<div class="widget">
<div class="feature-box not-dark fbox-center mb-0">
<div class="fbox-icon mb-4">
<img src="demos/hosting/images/svg/web.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="width: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium"><a href="#">Web Hosting</a></h3>
<p class="d-none d-lg-block mb-0 fw-light">Is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web.</p>
<a href="#" class="btn btn-link mt-2 color p-0">Learn More ›</a>
</div>
</div>
</div>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item">
<div class="widget">
<div class="feature-box not-dark fbox-center mb-0">
<div class="fbox-icon mb-4">
<img src="demos/hosting/images/svg/cloud.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="width: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium"><a href="#">Cloud Hosting</a></h3>
<p class="d-none d-lg-block mb-0 fw-light">The major benefit cloud hosting offers over shared hosting is that it allows you to utilize the resources of multiple servers.</p>
<a href="#" class="btn btn-link mt-2 color p-0">Learn More ›</a>
</div>
</div>
</div>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item">
<div class="widget">
<div class="feature-box not-dark fbox-center mb-0">
<div class="fbox-icon mb-4">
<img src="demos/hosting/images/svg/dedicated.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="width: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium"><a href="#">Dedicated Hosting</a></h3>
<p class="d-none d-lg-block mb-0 fw-light">Dedicated server or managed hosting service is a type of Internet hosting in which the client leases an entire server not shared with anyone.</p>
<a href="#" class="btn btn-link mt-2 color p-0">Learn More ›</a>
</div>
</div>
</div>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item">
<div class="widget">
<div class="feature-box not-dark fbox-center mb-0">
<div class="fbox-icon mb-4">
<img src="demos/hosting/images/svg/shared.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="width: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium"><a href="#">Shared Hosting</a></h3>
<p class="d-none d-lg-block mb-0 fw-light">Shared Web Hosting service refers to a web hosting service where many websites reside on one web server connected to the Internet.</p>
<a href="#" class="btn btn-link mt-2 color p-0">Learn More ›</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu-item"><a class="menu-link" href="#"><div>Services</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Domains</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>FAQs</div></a></li>
<li class="menu-item"><a class="menu-link" href="#"><div>Contact</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="slider" class="slider-element bg-angle include-header">
<!-- Slider Background Map
============================================= -->
<img class="img-map parallax position-absolute" src="demos/hosting/images/svg/map-light.svg" alt="Image" data-0="opacity: 0.05;margin-top:0px" data-800="opacity: 0.5;margin-top:150px">
<!-- Slider Background Cloud
============================================= -->
<div class="cloud-wrap">
<div class="c1"><div class="cloud"></div></div>
<div class="c2"><div class="cloud"></div></div>
<div class="c3"><div class="cloud"></div></div>
<div class="c4"><div class="cloud"></div></div>
<div class="c5"><div class="cloud"></div></div>
</div>
<!-- Slider Titiles
============================================= -->
<div class="vertical-middle container dark">
<div class="row justify-content-between align-items-center">
<div class="col-md-5">
<div class="slider-title">
<h2 class="text-white text-rotater mb-3 d-inline-block" data-separator="," data-rotate="fadeIn" data-speed="3500">Build your own<br> <span class="t-rotate text-white">Awesome,Beautiful,Great</span> Website.</h2>
<p>Dramatically syndicate end-to-end leadership skills for virtual solutions. Assertively transform high-payoff ideas rather than virtual process improvements.</p>
</div>
<a href="#" class="button bg-white text-dark button-light button-rounded button-large color ms-0">Create Account <i class="bi-arrow-right fw-semibold"></i></a>
</div>
<div class="col-md-5 d-none d-md-block">
<img src="demos/hosting/images/3.png" alt="Image">
</div>
</div>
</div>
</section><!-- #slider end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap py-0">
<div class="container">
<!-- Slider negetive Box
============================================= -->
<div class="row justify-content-center slider-box-wrap">
<div class="col-10">
<div class="slider-bottom-box">
<div class="row align-items-center">
<div class="col-lg-4 mb-3 mb-lg-0">
<h2 class="mb-3 h1 fw-light">Features</h2>
<p class="fw-normal text-muted mb-0">Enthusiastically orchestrate orthogonal core competencies before processes.</p>
</div>
<div class="col-lg-4 col-sm-6">
<ul class="iconlist m-0">
<li><img src="demos/hosting/images/svg/checked.svg" width="20" height="20" alt="Image" class="me-2">Assertively Fabricate.</li>
<li class="pt-3"><img src="demos/hosting/images/svg/checked.svg" width="20" height="20" alt="Image" class="me-2">Distinctively disseminate.</li>
<li class="pt-3"><img src="demos/hosting/images/svg/checked.svg" width="20" height="20" alt="Image" class="me-2">Appropriately predominate.</li>
</ul>
</div>
<div class="col-lg-4 col-sm-6">
<ul class="iconlist m-0">
<li class="pt-3 pt-lg-0"><img src="demos/hosting/images/svg/checked.svg" width="20" height="20" alt="Image" class="me-2">Competently facilitate synergist</li>
<li class="pt-3"><img src="demos/hosting/images/svg/checked.svg" width="20" height="20" alt="Image" class="me-2">Front-end leadership skills.</li>
<li class="pt-3"><img src="demos/hosting/images/svg/checked.svg" width="20" height="20" alt="Image" class="me-2">Infomediaries with front-end</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section
============================================= -->
<div class="heading-block text-center mt-6 mx-auto border-bottom-0" style="max-width: 700px">
<h2>We provide best services for you.</h2>
<p>Competently recaptiualize multifunctional schemas without an expanded array of niches. Continually engage cooperative sources vis-a-vis web-enabled benefits.</p>
</div>
<div class="row col-mb-50 mb-0 mt-4">
<div class="col-lg-4 col-md-6">
<div class="feature-box not-dark">
<div class="fbox-icon">
<img src="demos/hosting/images/svg/web.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="height: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium text-dark">Web Hosting</h3>
<p class="fw-light">Is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-box not-dark">
<div class="fbox-icon">
<img src="demos/hosting/images/svg/cloud.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="height: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium text-dark">Cloud Hosting</h3>
<p class="fw-light">The major benefit cloud hosting offers over shared hosting is that it allows you to utilize the resources of multiple servers.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-box not-dark">
<div class="fbox-icon">
<img src="demos/hosting/images/svg/dedicated.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="height: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium text-dark">Dedicated Hosting</h3>
<p class="fw-light">Dedicated server or managed hosting service is a type of Internet hosting in which the client leases an entire server not shared.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-box not-dark">
<div class="fbox-icon">
<img src="demos/hosting/images/svg/shared.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="height: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium text-dark">Shared Hosting</h3>
<p class="fw-light">Shared Web Hosting service refers to a web hosting service where many websites reside on one web server connected to the Internet.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-box not-dark">
<div class="fbox-icon">
<img src="demos/hosting/images/svg/domain.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="height: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium text-dark">Domain Registration</h3>
<p class="fw-light">Shared Web Hosting service refers to a web hosting service where many websites reside on one web server connected to the Internet.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="feature-box not-dark">
<div class="fbox-icon">
<img src="demos/hosting/images/svg/activation.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="height: 52px;">
</div>
<div class="fbox-content">
<h3 class="fw-medium text-dark">Instant Activation</h3>
<p class="fw-light">Shared Web Hosting service refers to a web hosting service where many websites reside on one web server connected to the Internet.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Domain Section
============================================= -->
<div class="section section-domain mt-4 mb-3" style="background: #F5F5F5 url('demos/hosting/images/pattern-dark.png') repeat center center;">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-md-5">
<div class="heading-block mb-0 border-bottom-0">
<h3 class="ls-0 text-transform-none">Looking For Your Premium Domain?</h3>
<p class="mb-0">Competently recaptiualize multifunctional schemas without an expanded array of niches. Continually engage cooperative.</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-lg-0">
<div class="input-group input-group-lg">
<input type="text" class="form-control w-auto" placeholder="Your New Domain Name" aria-label="Enter Domain Name">
<select class="form-select" id="inputGroupSelect01">
<option value="com" selected>.com</option>
<option value="org">.org</option>
<option value="net">.net</option>
<option value="info">.info</option>
<option value="us">.us</option>
</select>
<button class="btn bg-color text-white dark">Search</button>
</div>
</div>
</div>
</div>
</div>
<!-- Loaction Section
============================================= -->
<div class="section m-0 bg-transparent">
<div class="container">
<div class="heading-block text-center mt-0 mx-auto border-bottom-0" style="max-width: 700px">
<h2>We provide best services for you.</h2>
<p>Competently recaptiualize multifunctional schemas without an expanded array of niches. Continually engage cooperative sources vis-a-vis web-enabled benefits.</p>
</div>
<div class="row">
<div class="col-lg-5 col-md-6">
<div class="heading-block mt-md-3 mt-0">
<div class="before-heading color">Our Network</div>
<h3 class=" text-transform-none ls-0">16 TBPS Capacity and 140 Data Center Global Network</h3>
</div>
<div class="row">
<div class="col-6">
<ul class="iconlist ms-0">
<li><img src="demos/hosting/images/flags/uk.png" alt="Image"><a href="#">United Kingdom</a></li>
<li><img src="demos/hosting/images/flags/us.png" alt="Image"><a href="#">USA</a></li>
<li><img src="demos/hosting/images/flags/br.png" alt="Image"><a href="#">Brazil</a></li>
<li><img src="demos/hosting/images/flags/sa.png" alt="Image"><a href="#">South Africa</a></li>
<li><img src="demos/hosting/images/flags/in.png" alt="Image"><a href="#">India</a></li>
</ul>
</div>
<div class="col-6">
<ul class="iconlist ms-0">
<li><img src="demos/hosting/images/flags/si.png" alt="Image"><a href="#">Singapore</a></li>
<li><img src="demos/hosting/images/flags/ja.png" alt="Image"><a href="#">Japan</a></li>
<li><img src="demos/hosting/images/flags/au.png" alt="Image"><a href="#">Australia</a></li>
<li><img src="demos/hosting/images/flags/ca.png" alt="Image"><a href="#">Canada</a></li>
<li><a href="#">See More..</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-7 col-md-6">
<div id="hotspot-img" class="hotspot-img mt-2 responsive-hotspot-wrap">
<img src="demos/hosting/images/svg/map.png" class="img-responsive" alt="Image">
<!-- Circle #1 -->
<div class="hot-spot" data-x="1970" data-y="830">
<div class="circle"></div>
<div class="tooltip"><p>singapore</p></div>
</div>
<!-- Circle #2 -->
<div class="hot-spot" data-x="330" data-y="522">
<div class="circle"></div>
<div class="tooltip"><p>San Fransisco</p></div>
</div>
<!-- Circle #3 -->
<div class="hot-spot" data-x="2350" data-y="1110">
<div class="circle"></div>
<div class="tooltip"><p>Sydney</p></div>
</div>
<!-- Circle #4 -->
<div class="hot-spot" data-x="1222" data-y="395">
<div class="circle"></div>
<div class="tooltip"><p>London</p></div>
</div>
<!-- Circle #5 -->
<div class="hot-spot" data-x="1800" data-y="760">
<div class="circle"></div>
<div class="tooltip"><p>Bangalore</p></div>
</div>
<!-- Circle #6 -->
<div class="hot-spot" data-x="2250" data-y="560">
<div class="circle"></div>
<div class="tooltip"><p>Tokyo</p></div>
</div>
<!-- Circle #7 -->
<div class="hot-spot" data-x="1366" data-y="1134">
<div class="circle"></div>
<div class="tooltip"><p>Cape Town</p></div>
</div>
<!-- Circle #8 -->
<div class="hot-spot" data-x="880" data-y="990">
<div class="circle"></div>
<div class="tooltip"><p>Brasilla</p></div>
</div>
<!-- Circle #8 -->
<div class="hot-spot" data-x="710" data-y="395">
<div class="circle"></div>
<div class="tooltip"><p>Toronto</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pricing Section
============================================= -->
<div class="section bg-angle mt-0" style="background: #F9F9F9 url('demos/hosting/images/pattern-dark.png') repeat center center; padding: 80px 0">
<div class="container">
<div class="heading-block text-center mt-0 mx-auto border-bottom-0" style="max-width: 750px">
<h2>Hosting that scales with your Business</h2>
<p>Competently recaptiualize multifunctional schemas without an expanded array of niches. Continually engage cooperative sources vis-a-vis web-enabled benefits.</p>
</div>
<div class="row mb-2 align-items-stretch">
<div class="col-lg-8 col-md-8">
<div class="row align-items-stretch">
<div class="col-md-12">
<!-- vCPU Section -->
<div class="row align-items-stretch">
<div class="col-md-8 col-sm-8">
<div class="card mb-4">
<div class="card-body">
<div class="d-flex justify-content-between">
<h4 class="mb-4">vCPU</h4>
</div>
<!-- CPU Slider
============================================= -->
<input class="range-slider-cpu">
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 d-none d-sm-flex card bg-color text-white text-center mb-4">
<div class="card-body">
<!-- CPU Price Value
============================================= -->
<h2 class="cpu-price text-white mb-0 fw-bold"></h2>
<p class="card-text mb-0" style="opacity: .8;">$10 <span class="fst-italic">per Core/vCPU</span></p>
</div>
</div>
</div>
<!-- RAM Section -->
<div class="row align-items-stretch">
<div class="col-md-8 col-sm-8">
<div class="card mb-4">
<div class="card-body">
<div class="d-flex justify-content-between">
<h4 class="mb-4">Ram</h4>
</div>
<!-- RAM Slider
============================================= -->
<input class="range-slider-ram">
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 d-none d-sm-flex card bg-color text-white text-center mb-4">
<div class="card-body">
<!-- RAM Proce Value
============================================= -->
<h2 class="ram-price text-white mb-0 fw-bold"></h2>
<p class="card-text mb-0" style="opacity: .8;">$8 <span class="fst-italic">per GB/RAM</span></p>
</div>
</div>
</div>
<!-- Storage Section -->
<div class="row align-items-stretch">
<div class="col-md-8 col-sm-8">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between">
<h4 class="mb-4">Storage</h4>
</div>
<!-- Storage Slider
============================================= -->
<input class="range-slider-storage">
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 d-none d-sm-flex card bg-color text-white text-center">
<div class="card-body">
<!-- Storage Price Value
============================================= -->
<h2 class="storage-price text-white mb-0 fw-bold"></h2>
<p class="card-text mb-0" style="opacity: .8;">$0.5 <span class="fst-italic">per GB/Storage</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Price Area -->
<div class="col-lg-4 col-md-4 mt-4 mt-md-0">
<div class="card text-center">
<div class="card-body py-4">
<h3 class="card-title fw-normal">Your Plan</h3>
<!-- Price Value -->
<div class="pricing-price fw-semibold py-2"></div>
<p class="card-text pricing-sub">Billed Monthly</p>
</div>
<div class="line my-1"></div>
<div class="card-body py-4">
<ul class="iconlist ms-0" style="opacity: .8">
<li>Un-Mitered Bandwith</li>
<li>2 Dedicated IPs</li>
<li>Shared SSL certificate</li>
<li>30 Days Money Back</li>
</ul>
<a href="#" class="button button-rounded button-large ls-0 fw-normal m-0 text-transform-none">Order Now</a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="row mt-5">
<div class="col-lg-3 col-sm-6">
<h4 class="fw-medium mb-3">Free Includes:</h4>
<ul class="iconlist price-compare mb-2">
<li><a href="#" class="fw-light">Unmetered Mitigation of DDoS</a></li>
<li><a href="#" class="fw-light">Global CDN</a></li>
<li><a href="#" class="fw-light">Shared SSL certificate</a></li>
<li><a href="#" class="fw-light">I'm Under Attack™ mode</a></li>
<li><a href="#" class="fw-light">Access to account Audit Logs</a></li>
</ul>
<a href="#" class="btn btn-link mt-2 fw-normal color p-0" style="font-size: 14px">All Features ›</a>
</div>
<div class="col-lg-3 col-sm-6 mt-4 mt-sm-0">
<h4 class="fw-medium mb-3">Pro Includes:</h4>
<ul class="iconlist price-compare mb-2">
<li><a href="#" class="fw-light">100 GB of disk space</a></li>
<li><a href="#" class="fw-light">1000 GB/mo data transfer</a></li>
<li><a href="#" class="fw-light">1 domain + 100 subdomains</a></li>
<li><a href="#" class="fw-light">10 site pages</a></li>
<li><a href="#" class="fw-light">5 email addresses</a></li>
<li><a href="#" class="fw-light">Site design tools</a></li>
<li><a href="#" class="fw-light">Account access for colleagues/friends</a></li>
</ul>
<a href="#" class="btn btn-link mt-2 fw-normal color p-0" style="font-size: 14px">All Features ›</a>
</div>
<div class="col-lg-3 col-sm-6 mt-4 mt-lg-0">
<h4 class="fw-medium mb-3">Business Includes:</h4>
<ul class="iconlist price-compare mb-2">
<li><a href="#" class="fw-light">Unlimited site pages</a></li>
<li><a href="#" class="fw-light">10 email addresses</a></li>
<li><a href="#" class="fw-light">500 GB of disk space</a></li>
<li><a href="#" class="fw-light">5000 GB/mo data transfer</a></li>
<li><a href="#" class="fw-light">1 domain + 500 subdomains</a></li>
<li><a href="#" class="fw-light">Secure FTP File Manager</a></li>
<li><a href="#" class="fw-light">Canvas blogging</a></li>
<li><a href="#" class="fw-light">PHP 5.3.6, Perl 5.8.7, MySQL 5.1</a></li>
</ul>
<a href="#" class="btn btn-link mt-2 fw-normal color p-0" style="font-size: 14px">All Features ›</a>
</div>
<div class="col-lg-3 col-sm-6 mt-4 mt-lg-0">
<h4 class="fw-medium mb-3">Advanced Includes:</h4>
<ul class="iconlist price-compare mb-2">
<li><a href="#" class="fw-light">20 email addresses</a></li>
<li><a href="#" class="fw-light">Unlimited disk space</a></li>
<li><a href="#" class="fw-light">Unlimited data transfer</a></li>
<li><a href="#" class="fw-light">Private registration</a></li>
<li><a href="#" class="fw-light">Named solution and customer success engineers
Access to China data centers (additional cost)</a></li>
<li><a href="#" class="fw-light">30-day satisfaction guarantee</a></li>
<li><a href="#" class="fw-light">24/7 phone, chat and online support</a></li>
</ul>
<a href="#" class="btn btn-link mt-2 fw-normal color p-0" style="font-size: 14px">All Features ›</a>
</div>
</div>
</div>
</div>
<!-- Addition Service Section
============================================= -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="before-heading">Other Additional Services</div>
<h3>Highly Available Services</h3>
<div class="row col-mb-30">
<div class="col-md-6">
<div class="feature-box p-5 media-box" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(3,27,78,.1); border: 1px solid #e5e8ed;">
<div class="fbox-media">
<img src="demos/hosting/images/svg/balancing.svg" style="width: 42px;" alt="Image">
</div>
<div class="fbox-content px-0">
<h3 class="ls-0">Load Balancing</h3>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sint explicabo quis at voluptatum autem, cupiditate officiis maxime deserunt soluta! consectetur adipisicing elit.</p>
<a href="#" class="btn btn-link mt-3 fw-normal color p-0" style="font-size: 16px;">$15/month for Load Balancing <i class="bi-arrow-right position-relative" style="top: 2px"></i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-box p-5 media-box" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(3,27,78,.1); border: 1px solid #e5e8ed;">
<div class="fbox-media">
<img src="demos/hosting/images/svg/location.svg" style="width: 42px;" alt="Image">
</div>
<div class="fbox-content px-0">
<h3 class="ls-0">Location Zone</h3>
<p class="mt-2">Distinctively enhance front-end outsourcing after cross-platform synergy. Interactively implement an expanded array of collaboration and idea-sharing and innovative bandwidth.</p>
<a href="#" class="btn btn-link mt-3 fw-normal color p-0" style="font-size: 16px;">$5/month for Location <i class="bi-arrow-right position-relative" style="top: 2px"></i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-box p-5 media-box" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(3,27,78,.1); border: 1px solid #e5e8ed;">
<div class="fbox-media">
<img src="demos/hosting/images/svg/ssl.svg" style="width: 42px;" alt="Image">
</div>
<div class="fbox-content px-0">
<h3 class="ls-0">Dedicated SSL Certificate</h3>
<p class="mt-2">Assertively harness stand-alone communities through front-end networks. Globally engage plug-and-play sources through multidisciplinary portals. Enthusiastically synergize orthogonal.</p>
<a href="#" class="btn btn-link mt-3 fw-normal color p-0" style="font-size: 16px;">$7/month for SSL Certificate <i class="bi-arrow-right position-relative" style="top: 2px"></i></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="feature-box p-5 media-box" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(3,27,78,.1); border: 1px solid #e5e8ed;">
<div class="fbox-media">
<img src="demos/hosting/images/svg/team.svg" style="width: 42px;" alt="Image">
</div>
<div class="fbox-content px-0">
<h3 class="ls-0">Team Accounts</h3>
<p class="mt-2">Uniquely harness prospective information through long-term high-impact portals. Rapidiously enable principle-centered users rather than inexpensive sources. Distinctively enhance front-end outsourcing.</p>
<a href="#" class="btn btn-link mt-3 fw-normal color p-0" style="font-size: 16px;">$4/month for Team <i class="bi-arrow-right position-relative" style="top: 2px"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- Testimonials Section
============================================= -->
<div class="section">
<div class="container">
<div class="heading-block text-center mt-2 mb-3 mx-auto border-bottom-0" style="max-width: 700px">
<div class="before-heading">See what Our Customers say</div>
<h2>3,583 Happy Users & Counting</h2>
</div>
<!-- Owl Carousel
============================================= -->
<div id="oc-testimonials" class="owl-carousel text-center testimonials-carousel carousel-widget mt-5" data-margin="0" data-items-xs="1" data-items-sm="1" data-items-md="1" data-items-lg="2" data-items-xl="3" data-center="true" data-loop="true" data-autoplay="4000" data-speed="500">
<!-- Item 1 -->
<div class="oc-item">
<div class="card rounded-6 shadow-sm overflow-hidden">
<div class="card-body p-5">
<div class="row">
<div class="col-12">
<img class="rounded-circle d-inline-block w-auto" src="demos/hosting/images/users/1.jpg" width="64" height="64" alt="Customer Testimonails">
<ul class="list-unstyled ms-0 mt-4 mb-3">
<li class="color">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-half"></i>
</li>
</ul>
</div>
<div class="col-12">
<p class="mb-4 font-primary fst-normal">Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum repellendus!</p>
<h4 class="h6 mb-0 fw-bold">John Doe</h4>
<small class="text-muted">XYZ Inc.</small>
</div>
</div>
</div>
<div class="bg-icon bi-quote op-02"></div>
</div>
</div>
<!-- Item 2 -->
<div class="oc-item">
<div class="card rounded-6 shadow-sm overflow-hidden">
<div class="card-body p-5">
<div class="row">
<div class="col-12">
<img class="rounded-circle d-inline-block w-auto" src="demos/hosting/images/users/2.jpg" width="64" height="64" alt="Customer Testimonails">
<ul class="list-unstyled ms-0 mt-4 mb-3">
<li class="color">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star"></i>
</li>
</ul>
</div>
<div class="col-12">
<p class="mb-4 font-primary fst-normal">Natus voluptatum enim quod necessitatibus quis expedita harum provident eos obcaecati id culpa corporis molestias.</p>
<h4 class="h6 mb-0 fw-bold">Collis Ta'eed</h4>
<small class="text-muted">Envato Inc.</small>
</div>
</div>
</div>
<div class="bg-icon bi-quote op-02"></div>
</div>
</div>
<!-- Item 3 -->
<div class="oc-item">
<div class="card rounded-6 shadow-sm overflow-hidden">
<div class="card-body p-5">
<div class="row">
<div class="col-12">
<img class="rounded-circle d-inline-block w-auto" src="demos/hosting/images/users/5.jpg" width="64" height="64" alt="Customer Testimonails">
<ul class="list-unstyled ms-0 mt-4 mb-3">
<li class="color">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</li>
</ul>
</div>
<div class="col-12">
<p class="mb-4 font-primary fst-normal">Fugit officia dolor sed harum excepturi ex iusto magnam asperiores molestiae qui natus obcaecati facere sint amet.</p>
<h4 class="h6 mb-0 fw-bold">Mary Jane</h4>
<small class="text-muted">Google Inc.</small>
</div>
</div>
</div>
<div class="bg-icon bi-quote op-02"></div>
</div>
</div>
<!-- Item 4 -->
<div class="oc-item">
<div class="card rounded-6 shadow-sm overflow-hidden">
<div class="card-body p-5">
<div class="row">
<div class="col-12">
<img class="rounded-circle d-inline-block w-auto" src="demos/hosting/images/users/4.jpg" width="64" height="64" alt="Customer Testimonails">
<ul class="list-unstyled ms-0 mt-4 mb-3">
<li class="color">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</li>
</ul>
</div>
<div class="col-12">
<p class="mb-4 font-primary fst-normal">Similique fugit repellendus expedita excepturi iure perferendis provident quia eaque. Repellendus, vero numquam?</p>
<h4 class="h6 mb-0 fw-bold">Steve Jobs</h4>
<small class="text-muted">Apple Inc.</small>
</div>
</div>
</div>
<div class="bg-icon bi-quote op-02"></div>
</div>
</div>
<!-- Item 5 -->
<div class="oc-item">
<div class="card rounded-6 shadow-sm overflow-hidden">
<div class="card-body p-5">
<div class="row">
<div class="col-12">
<img class="rounded-circle d-inline-block w-auto" src="demos/hosting/images/users/3.jpg" width="64" height="64" alt="Customer Testimonails">
<ul class="list-unstyled ms-0 mt-4 mb-3">
<li class="color">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</li>
</ul>
</div>
<div class="col-12">
<p class="mb-4 font-primary fst-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, perspiciatis illum totam dolore deleniti labore.</p>
<h4 class="h6 mb-0 fw-bold">Jamie Morrison</h4>
<small class="text-muted">Adobe Inc.</small>
</div>
</div>
</div>
<div class="bg-icon bi-quote op-02"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Trusted Client Section
============================================= -->
<div class="section mt-3 mb-4 pt-0 bg-transparent">
<div class="container">
<div class="mx-auto" style="max-width: 1000px">
<div class="heading-block text-center mx-auto border-bottom-0" style="max-width: 700px">
<div class="before-heading">Already with Us</div>
<h2>Trusted By</h2>
<p>Competently recaptiualize multifunctional schemas without an expanded array of niches. Continually engage cooperative sources vis-a-vis web-enabled benefits.</p>
</div>
<!-- Clients Images -->
<div class="row text-center">
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/1.png" alt="Image" class="clients"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/2.png" alt="Image" class="clients"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/3.png" alt="Image" class="clients mt-5 mt-sm-0"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/4.png" alt="Image" class="clients mt-5 mt-sm-0"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/5.png" alt="Image" class="clients mt-5"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/6.png" alt="Image" class="clients mt-5"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/7.png" alt="Image" class="clients mt-5"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/8.png" alt="Image" class="clients mt-5"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/9.png" alt="Image" class="clients mt-5"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/10.png" alt="Image" class="clients mt-5"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/11.png" alt="Image" class="clients mt-5"></a></div>
<div class="col-sm-3 col-6"><a href="#"><img src="demos/hosting/images/clients/12.png" alt="Image" class="clients mt-5"></a></div>
</div>
</div>
</div>
</div>
<!-- Bottom Section
============================================= -->
<div class="section bg-color dark m-0">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-md-8">
<h2 class="fw-bold text-white mb-3">Get Better Hosting Now. Try Free for 10 days.</h2>
</div>
<div class="col-md-8">
<a href="#" class="button text-center bg-white color button-light button-rounded button-large ms-0">Sign Up for free</a>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap pb-4">
<div class="row">
<div class="col-md-4 col-sm-6 mb-0 mb-sm-4 mb-md-0">
<div class="widget">
<h4>About Canvas</h4>
<p>We believe in Simple, Creative & Flexible Design Standards.</p>
<div style="background: url('images/world-map.png') no-repeat left center; background-size: auto 100%;">
<address>
<strong>Headquarters:</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
</address>
<abbr title="Phone Number"><strong>Phone:</strong></abbr> (1) 8547 632521<br>
<abbr title="Email Address"><strong>Email:</strong></abbr> [email protected]
</div>
</div>
</div>
<div class="col-md-3 col-6 mt-5 mt-sm-0">
<div class="widget">
<h4>Features</h4>
<ul class="list-unstyled iconlist ms-0">
<li><a href="https://codex.wordpress.org/">Documentation</a></li>
<li><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
<li><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
<li><a href="https://wordpress.org/support/">Support Forums</a></li>
<li><a href="https://wordpress.org/extend/themes/">Themes</a></li>
<li><a href="https://wordpress.org/news/">Canvas Blog</a></li>
<li><a href="https://planet.wordpress.org/">Canvas Planet</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-6 mt-5 mt-sm-0">
<div class="widget">
<h4>Social</h4>
<ul class="list-unstyled iconlist">
<li><i class="fa-brands fa-facebook-f"></i><a href="https://facebook.com/semicolonweb" target="_blank"> Facebook</a></li>
<li><i class="fa-brands fa-twitter"></i><a href="https://twitter.com/__semicolon" target="_blank"> Twitter</a></li>
<li><i class="bi-instagram"></i><a href="https://instagram.com/semicolonweb" target="_blank"> Instagram</a></li>
<li><i class="fa-brands fa-youtube"></i><a href="https://www.youtube.com/user/shank20121/videos" target="_blank"> YouTube</a></li>
<li><i class="fa-brands fa-xing"></i><a href="#"> Xing</a></li>
<li><i class="fa-brands fa-github"></i><a href="#"> Github</a></li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 mt-4 mt-sm-0">
<div class="widget">
<h4>Support</h4>
<ul class="list-unstyled iconlist ms-0">
<li><a href="#">Help Center</a></li>
<li><a href="#">Paid with Mollie</a></li>
<li><a href="#">Status</a></li>
<li><a href="#">Changelog</a></li>
<li><a href="#">Contact Support</a></li>
</ul>
</div>
</div>
</div>
</div><!-- .footer-widgets-wrap end -->
<div class="line line-sm m-0"></div>
</div>
<!-- Copyrights
============================================= -->
<div id="copyrights" class="bg-transparent">
<div class="container">
<div class="row justify-content-between col-mb-30">
<div class="col-12 col-md-auto text-center text-md-start">
Copyrights © 2023 All Rights Reserved by Canvas Inc.<br>
<div class="copyright-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a></div>
</div>
<div class="col-12 col-md-auto text-center text-md-end">
<div class="copyrights-menu copyright-links">
<a href="#">Home</a>/<a href="#">About Us</a>/<a href="#">Team</a>/<a href="#">Clients</a>/<a href="#">FAQs</a>/<a href="#">Contact</a>
</div>
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- Parallax Script
============================================= -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script>!SEMICOLON.Mobile.any() && skrollr.init({forceHeight: false});</script>
<!-- HotSpot -->
<script src="js/jquery.hotspot.js"></script>
<!-- Range Slider -->
<script src="js/components/rangeslider.min.js"></script>
<script>
jQuery(document).ready( function() {
var pricingCPU = 1,
pricingRAM = 1,
pricingStorage = 10,
elementCPU = jQuery(".range-slider-cpu"),
elementRAM = jQuery(".range-slider-ram"),
elementStorage = jQuery(".range-slider-storage");
elementCPU.ionRangeSlider({
grid: false,
values: [1,2,4,6,8],
postfix: ' Core',
onStart: function(data){
pricingCPU = data.from_value;
}
});
elementCPU.on( 'change', function(){
pricingCPU = jQuery(this).prop('value');
calculatePrice( pricingCPU, pricingRAM, pricingStorage );
});
elementRAM.ionRangeSlider({
grid: false,
step: 1,
min: 1,
from:1,
max: 32,
postfix: ' GB',
onStart: function(data){
pricingRAM = data.from;
console.log(data);
}
});
elementRAM.on( 'onStart change', function(){
pricingRAM = jQuery(this).prop('value');
calculatePrice( pricingCPU, pricingRAM, pricingStorage );
});
elementStorage.ionRangeSlider({
grid: false,
step: 10,
min: 10,
max: 100,
postfix: ' GB',
onStart: function(data){
pricingStorage = data.from;
}
});
elementStorage.on( 'change', function(){
pricingStorage = jQuery(this).prop('value');
calculatePrice( pricingCPU, pricingRAM, pricingStorage );
});
calculatePrice( pricingCPU, pricingRAM, pricingStorage );
function calculatePrice( cpu, ram, storage ) {
var pricingValue = ( Number(cpu) * 10 ) + ( Number(ram) * 8 ) + ( Number(storage) * 0.5 );
jQuery('.cpu-value').html(pricingCPU);
jQuery('.ram-value').html(pricingRAM);
jQuery('.storage-value').html(pricingStorage);
jQuery('.cpu-price').html('$'+pricingCPU * 10);
jQuery('.ram-price').html('$'+pricingRAM * 8);
jQuery('.storage-price').html('$'+pricingStorage * 0.5);
jQuery('.pricing-price').html( '$'+pricingValue );
}
});
jQuery(window).on( 'load', function(){
jQuery('#hotspot-img').hotSpot();
});
</script>
</body>
</html>