Access_New/pages/demo-hosting.html
2024-09-05 11:33:27 +05:45

941 lines
54 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/hosting/hosting.css" />
</head>
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color>
<header class="header-with-topbar">
<div class="header-top-bar top-bar-dark cover-background" style="background-image: url('images/demo-hosting-header-bg.jpg')">
<div class="container-fluid">
<div class="row h-42px align-items-center m-0">
<div class="col-md-7 text-center text-md-start">
<div class="fs-13 text-white"><span class="opacity-6 me-5px">Get a hosting plans, as low as starting at only</span><span class="fw-600">$2.78/mo*</span></div>
</div>
<div class="col-5 text-end d-none d-md-flex">
<a href="demo-hosting-contact.html" class="widget fs-13 me-20px text-white opacity-8 d-none d-lg-inline-block"><i class="feather icon-feather-phone"></i>Customer service</a>
<a href="cdn-cgi/l/email-protection.html#f685838686998482b692999b979f98d895999b" class="widget fs-13 text-white text-white-hover opacity-8"><i class="feather icon-feather-mail text-white position-relative top-1px"></i><span class="__cf_email__" data-cfemail="c1b2b4b1b1aeb3b581a5aeaca0a8afefa2aeac">[email&#160;protected]</span></a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="demo-hosting.html">
<img src="images/demo-hosting-logo-white.png" data-at2x="images/demo-hosting-logo-white@2x.png" alt class="default-logo">
<img src="images/demo-hosting-logo-black.png" data-at2x="images/demo-hosting-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-hosting-logo-black.png" data-at2x="images/demo-hosting-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="demo-hosting.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-hosting-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-hosting-hosting.html" class="nav-link">Hosting</a></li>
<li class="nav-item"><a href="demo-hosting-domain.html" class="nav-link">Domain</a></li>
<li class="nav-item"><a href="demo-hosting-pricing.html" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="demo-hosting-support.html" class="nav-link">Support</a></li>
<li class="nav-item"><a href="demo-hosting-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end lg-pe-5px">
<div class="header-icon">
<div class="header-search-icon icon d-none d-sm-flex">
<a href="demo-hosting.html#" class="search-form-icon header-search-form"><i class="align-middle feather icon-feather-search fs-18 me-5px xl-me-0"></i><span class="align-middle d-none d-xxl-inline-block"> Search</span></a>
<div class="search-form-wrapper">
<button title="Close" type="button" class="search-close">×</button>
<form id="search-form" role="search" method="get" class="search-form text-left" action="search-result.html">
<div class="search-form-box">
<h2 class="text-dark-gray fw-700 ls-minus-2px text-center mb-4 alt-font">What are you looking for?</h2>
<input class="search-input" id="search-form-input5e219ef164995" placeholder="Enter your keywords..." name="s" value type="text" autocomplete="off">
<button type="submit" class="search-button">
<i class="feather icon-feather-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
<div class="header-button ms-30px xxl-ms-10px xs-ms-0">
<a href="demo-hosting.html#" class="btn btn-white btn-small btn-rounded btn-box-shadow btn-switch-text fw-600">
<span>
<span class="btn-double-text" data-text="Sign up">Sign up</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="cover-background full-screen bg-dark-gray ipad-top-space-margin position-relative section-dark md-h-auto" style="background-image: url('images/demo-hosting-home-bg.jpg')">
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 12,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 2000}},&quot;color&quot;: {&quot;value&quot;: [&quot;#ed00a8&quot;, &quot;#ed00a8&quot;, &quot;#ed00a8&quot;, &quot;#ed00a8&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;edge&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 0.8,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 1,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 5,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;line_linked&quot;:{&quot;enable&quot;:false,&quot;distance&quot;:0,&quot;color&quot;:&quot;#ffffff&quot;,&quot;opacity&quot;:0.4,&quot;width&quot;:1},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:1,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}"></div>
<div class="container h-100">
<div class="row align-items-center justify-content-center h-100">
<div class="col-xl-7 col-lg-8 col-md-10 text-white position-relative text-center text-lg-start">
<div class="fs-90 sm-fs-80 xs-fs-70 fw-600 mb-20px ls-minus-4px overflow-hidden">
<div class="d-inline-block" data-anime="{ &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 900 }">
Power up web with
<div class="highlight-separator" data-shadow-animation="true" data-animation-delay="1500">
hosting<span><img src="images/highlight-separator.svg" alt></span>
</div>
</div>
</div>
<div class="fs-19 fw-300 mb-30px w-80 sm-w-100 opacity-6 d-block mx-auto mx-lg-0 overflow-hidden">
<span class="d-inline-block lh-32" data-anime="{ &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 900, &quot;delay&quot;: 300 }">Get access to tons of free apps to create websites, eCommerce websites and blogs installations.</span>
</div>
<div class="overflow-hidden pt-5px">
<a href="demo-hosting-hosting.html" class="btn btn-extra-large btn-yellow btn-rounded btn-box-shadow btn-switch-text d-inline-block me-15px xs-m-10px align-middle fw-600" data-anime="{ &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 900, &quot;delay&quot;: 500 }">
<span>
<span class="btn-double-text" data-text="Get started">Get started</span>
<span><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
<div class="text-white fs-15 d-inline-block last-paragraph-no-margin align-middle" data-anime="{ &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 900, &quot;delay&quot;: 700 }">
<p class="opacity-6 ls-minus-05px d-inline-block">Starting at only</p>
<span class="fw-500 d-inline-block ">$2.78/mo*</span>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-4">
<div class="outside-box-right-7 position-relative" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [100, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 1200, &quot;delay&quot;: 200 }">
<img class="w-100" src="images/demo-hosting-home-slider-01.png" alt>
<img class="w-100 position-absolute left-minus-2px top-minus-5px animation-float" src="images/demo-hosting-home-slider-02.png" alt>
</div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-gray pt-20px pb-20px sm-pt-40px" data-anime="{ &quot;opacity&quot;: [0, 1], &quot;translateY&quot;: [0, 0], &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;duration&quot;: 1000,&quot;staggervalue&quot;: 300, &quot;delay&quot;: 600 }">
<div class="container overlap-section">
<div class="row justify-content-center overlap-section border-radius-6px overflow-hidden g-0 box-shadow-extra-large">
<div class="col-lg-9 text-center fw-600 fs-24 lg-fs-22 ls-minus-05px text-dark-gray bg-white p-30px md-p-20px"><a href="demo-hosting-domain.html" class="fw-700 text-base-color text-decoration-line-bottom-medium">Get free domain</a> with managed WordPress dedicated hosting.</div>
<div class="col-lg-3 text-center bg-yellow pt-30px pb-30px md-p-20px"><a href="demo-hosting-pricing.html" class="fw-700 text-dark-gray text-dark-gray-hover fs-24 lg-fs-20 ls-minus-05px">Just $5.99 month<i class="feather icon-feather-arrow-right ms-5px"></i></a></div>
</div>
</div>
</section>
<section class="cover-background pt-5 xs-pt-8" style="background-image: url('images/demo-hosting-home-06.jpg')">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-8 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 900, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-base-color fw-600 mb-5px text-uppercase d-block">Hosting solutions</span>
<h2 class="text-dark-gray fw-700 ls-minus-2px">Hosting services</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;perspective&quot;: [1200, 1200], &quot;scale&quot;: [1.05, 1], &quot;rotateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;:600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-02.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Online store</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="demo-hosting-hosting.html" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-03.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Web hosting</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="demo-hosting-hosting.html" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all xs-mb-30px">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-04.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Business email</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="demo-hosting-hosting.html" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
<div class="col icon-with-text-style-07 transition-inner-all">
<div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
<div class="feature-box-icon mb-30px">
<img src="images/demo-hosting-home-icon-05.svg" class="h-50px" alt>
</div>
<div class="feature-box-content">
<span class="d-inline-block fw-600 text-dark-gray fs-18 ls-minus-05px">Cloud storage</span>
<p class="mb-10px">Lorem dummy printing type setting industry.</p>
<a href="demo-hosting-hosting.html" class="btn btn-link btn-hover-animation-switch btn-extra-large text-base-color text-uppercase-inherit">
<span>
<span class="btn-text">Learn more</span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
<span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="overflow-hidden">
<div class="container">
<div class="row align-items-center justify-content-center mb-6 sm-mb-50px position-relative">
<div class="col-lg-6 col-md-10 position-relative md-mb-30px" data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#ffffff&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:50}">
<img class="w-100" src="images/demo-hosting-home-01.png" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt>
</div>
<div class="col-lg-5 offset-lg-1 last-paragraph-no-margin" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0, 1], &quot;rotateY&quot;: [-90, 0], &quot;rotateZ&quot;: [-10, 0], &quot;translateY&quot;: [80, 0], &quot;translateZ&quot;: [50, 0], &quot;staggervalue&quot;: 200, &quot;duration&quot;: 900, &quot;delay&quot;: 300, &quot;easing&quot;: &quot;easeOutCirc&quot; }">
<span class="text-base-color fw-600 mb-15px text-uppercase d-block">Simple and intuitive</span>
<h2 class="fw-600 text-dark-gray w-90 lg-w-100 text-dark-gray fw-700 ls-minus-2px">Solutions for your business.</h2>
<p class="w-90 sm-w-100">Getting your website live is as simple as a click of a button. Everything you need provided in a clear way.</p>
<ul class="p-0 mb-25px mt-15px list-style-01 w-90 lg-w-100">
<li class="border-color-extra-medium-gray fw-600 text-dark-gray d-flex align-items-center pt-15px pb-15px">
<div class="feature-box-icon feature-box-icon-rounded w-35px h-35px rounded-circle bg-solitude-blue me-10px text-center d-flex align-items-center justify-content-center flex-shrink-0"><i class="fa-solid fa-check fs-13 text-base-color"></i></div>
Get 30% discount qualifying purchases.
</li>
<li class="border-color-extra-medium-gray fw-600 text-dark-gray d-flex align-items-center pt-15px pb-15px">
<div class="feature-box-icon feature-box-icon-rounded w-35px h-35px rounded-circle bg-solitude-blue me-10px text-center d-flex align-items-center justify-content-center flex-shrink-0"><i class="fa-solid fa-check fs-13 text-base-color"></i></div>
Grow and connect with developers.
</li>
</ul>
<a href="demo-hosting-pricing.html" class="btn btn-large btn-dark-gray btn-box-shadow btn-rounded btn-switch-text">
<span>
<span class="btn-double-text" data-text="Lowest pricing">Premium pricing</span>
<span><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
<div class="row align-items-center justify-content-center border border-color-extra-medium-gray border-radius-100px md-border-radius-6px p-50px lg-p-20px m-0 box-shadow-quadruple-large" data-bottom-top="transform:scale(1.1, 1.1) translateY(30px);" data-top-bottom="transform:scale(1, 1) translateY(-30px);">
<div class="col-lg-4 col-md-6 process-step-style-07 position-relative md-mb-30px">
<div class="process-step-item d-flex align-items-center">
<div class="process-step-icon-wrap position-relative">
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-60px w-60px bg-base-color fs-17 fw-500">
<span class="number position-relative z-index-1 text-white">01</span>
</div>
</div>
<div class="process-content ps-20px last-paragraph-no-margin">
<span class="d-block fw-600 text-dark-gray fs-17 ls-minus-05px alt-font">Choose a hosting plan</span>
<p>Lorem ipsum simply printing</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 process-step-style-07 position-relative md-mb-30px">
<div class="process-step-item d-flex align-items-center">
<div class="process-step-icon-wrap position-relative">
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-60px w-60px bg-base-color fs-17 fw-500">
<span class="number position-relative z-index-1 text-white">02</span>
</div>
</div>
<div class="process-content ps-20px last-paragraph-no-margin">
<span class="d-block fw-600 text-dark-gray fs-17 ls-minus-05px alt-font">Select a domain name</span>
<p>Lorem ipsum simply printing</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 process-step-style-07 position-relative">
<div class="process-step-item d-flex align-items-center">
<div class="process-step-icon-wrap position-relative">
<div class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-60px w-60px bg-base-color fs-17 fw-500">
<span class="number position-relative z-index-1 text-white">03</span>
</div>
</div>
<div class="process-content ps-20px last-paragraph-no-margin">
<span class="d-block fw-600 text-dark-gray fs-17 ls-minus-05px alt-font">Upload your website</span>
<p>Lorem ipsum simply printing</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background section-dark bg-midnight-dark-blue" style="background-image: url('images/demo-hosting-home-02.png')" data-0-top="background-color:rgb(25,30,61);" data-center-bottom="background-color:rgb(14,16,29);">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-8 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 900, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-white opacity-5 mb-5px text-uppercase d-block">What we offers</span>
<h2 class="text-white fw-700 ls-minus-1px">Affordable services</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 justify-content-center ps-8 pe-8 lg-px-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;scale&quot;:[0.8,1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 500, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col icon-with-text-style-04 transition-inner-all mb-30px">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-18 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-URL-Window icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">Domain name<br>generator</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all mb-30px">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-18 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-Cloud-Email icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">SQL server<br>hosting</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all mb-30px">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-18 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-Network-Window icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">Cheap web<br>hosting</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all mb-30px">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-18 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-Envelope icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">Website email<br>hosting</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all md-mb-30px">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-18 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-Wordpress icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">WordPress<br>installation</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all md-mb-30px">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-18 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-Big-Data icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">Game server<br>hosting</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all xs-mb-30px">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-15 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-Data-Password icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">VPS server<br>hosting</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
<div class="col icon-with-text-style-04 transition-inner-all">
<div class="feature-box hover-box h-100 transition light-hover border-radius-6px p-18 xs-p-12 last-paragraph-no-margin overflow-hidden border border-1 box-shadow-quadruple-large-hover border-color-transparent-white-light border-color-transparent-on-hover">
<div class="feature-box-icon">
<i class="line-icon-Globe icon-extra-large text-white mb-15px"></i>
</div>
<div class="feature-box-content">
<span class="d-inline-block text-white fw-500 lh-24">Free website<br>hosting</span>
</div>
<div class="feature-box-overlay bg-white"></div>
</div>
</div>
</div>
<div class="row justify-content-center mt-6">
<div class="col-auto icon-with-text-style-08 sm-mb-10px" data-anime="{ &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 900, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-envelope icon-small text-yellow"></i>
</div>
<div class="feature-box-content">
<span class="alt-font text-white fs-18">Looking for help? <a href="demo-hosting.html#" class="text-decoration-line-bottom text-white fw-500">Submit a ticket</a></span>
</div>
</div>
</div>
<div class="col-auto icon-with-text-style-08" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-10px">
<i class="bi bi-chat-dots icon-small text-yellow"></i>
</div>
<div class="feature-box-content">
<span class="alt-font text-white fs-18">Keep in Touch. <a href="demo-hosting.html#" class="text-decoration-line-bottom text-white fw-500">Like us on Facebook</a></span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pb-0">
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-lg-8 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-base-color fw-600 mb-5px text-uppercase d-block">Pricing plans</span>
<h2 class="fw-600 text-dark-gray text-dark-gray fw-700 ls-minus-2px">Hosting plans</h2>
</div>
</div>
<div class="row align-items-center justify-content-center mb-6 md-mb-8">
<div class="col-lg-4 col-md-8 pricing-table-style-08 md-mb-30px" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 md-ps-12 md-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Standard</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-3px"><sup class="fs-30">$</sup>250</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="demo-hosting-pricing.html" class="btn btn-large btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px"><span class="opacity-6">Full backup systems</span></li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px"><span class="opacity-6">Unlimited database</span></li>
</ul>
</div>
<div class="pricing-footer">
<a href="demo-hosting-pricing.html" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-500 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-08 md-mb-30px" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 md-ps-12 md-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Business</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-3px"><sup class="fs-30">$</sup>350</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="demo-hosting-pricing.html" class="btn btn-large btn-yellow btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Full backup systems</li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px"><span class="opacity-6">Unlimited database</span></li>
</ul>
</div>
<div class="pricing-footer">
<a href="demo-hosting-pricing.html" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-500 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 pricing-table-style-08" data-anime="{ &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="pricing-table text-center pt-16 pb-35px bg-white box-shadow-quadruple-large border-radius-6px">
<div class="pricing-header ps-18 pe-18 md-ps-12 md-pe-12">
<div class="d-inline-block fs-12 text-uppercase bg-white ps-20px pe-20px fw-600 text-dark-gray mb-30px border-radius-100px box-shadow-large border border-1 border-color-extra-medium-gray">Ultimate</div>
<h2 class="text-dark-gray fw-600 mb-10px ls-minus-3px"><sup class="fs-30">$</sup>450</h2>
<p class="mb-25px lh-28">All the basics for businesses that are just getting started.</p>
<a href="demo-hosting-pricing.html" class="btn btn-large btn-dark-gray btn-round-edge btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Choose package">Choose package</span>
</span>
</a>
<span class="fs-13 w-100 d-block mt-5px">Monthly billing</span>
</div>
<div class="pricing-body pt-15px pb-25px">
<ul class="list-style-01 ps-0 mb-0">
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Unlimited bandwidth</li>
<li class="border-color-transparent-dark-very-light pt-10px pb-10px">Full backup systems</li>
<li class="border-color-transparent-dark-very-light border-bottom pt-10px pb-10px">Unlimited database</li>
</ul>
</div>
<div class="pricing-footer">
<a href="demo-hosting-pricing.html" class="text-decoration-line-bottom d-inline-block text-dark-gray fw-500 ls-minus-05px">Get your 30 day free trial</a>
</div>
</div>
</div>
</div>
<div class="row" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 text-center">
<div class="bg-dark-gray fw-600 text-white text-uppercase border-radius-30px ps-20px pe-20px fs-12 me-10px xs-m-5px d-inline-block align-middle">Limited offer</div>
<div class="text-dark-gray fw-500 d-inline-block align-middle ls-minus-05px fs-18">Save 20% on annual plans. <a href="demo-hosting-pricing.html" class="text-decoration-line-bottom text-dark-gray d-inline-block">Explore pricing plans<span class="bg-dark-gray"></span></a></div>
</div>
</div>
</div>
</section>
<section class="overflow-hidden">
<div class="container">
<div class="row align-items-center justify-content-center border-radius-8px p-4 xs-p-7 text-center text-lg-start g-0 cover-background" style="background-image: url('images/demo-hosting-home-03.jpg')" data-bottom-top="transform:scale(1.1, 1.1) translateY(30px);" data-top-bottom="transform:scale(1.0, 1.0) translateY(-30px);">
<div class="col-lg-6 col-md-9 md-mb-10px icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
<div class="feature-box-icon feature-box-icon-rounded w-100px h-100px rounded-circle border border-2 border-color-transparent-white-light me-30px xs-me-25px">
<img src="images/demo-hosting-home-icon.svg" class="w-50px h-50px" alt>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<h5 class="d-inline-block fw-600 text-white mb-0">Are you ready for a better productive business?</h5>
</div>
</div>
</div>
<div class="col-lg-6 text-center text-lg-end">
<div class="text-white d-inline-block last-paragraph-no-margin me-20px xs-m-10px">
<p class="opacity-8 d-inline-block">Starting at only</p>
<span class="fw-600 d-inline-block text-decoration-line-bottom">$2.78 per month</span>
</div>
<a href="demo-hosting.html#" class="btn btn-medium btn-yellow btn-rounded fw-600 btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Sign up free">Sign up free</span>
</span>
</a>
</div>
</div>
</div>
</section>
<section class="pt-0">
<div class="container">
<div class="row justify-content-center align-items-center mb-3">
<div class="col-lg-7 col-md-8 sm-mb-15px" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h2 class="text-dark-gray fw-700 ls-minus-1px mb-0">Have a question?</h2>
</div>
<div class="col-lg-3 col-md-4 text-start text-md-end" data-anime="{ &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-dark-gray fs-30 align-middle fancy-text-style-4 ls-minus-1px">&#128075; Say <span class="fw-600" data-fancy-text="{ &quot;effect&quot;: &quot;rotate&quot;, &quot;string&quot;: [&quot;hello!&quot;, &quot;hallå!&quot;, &quot;salve!&quot;] }"></span></span>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="accordion accordion-style-02" id="accordion-style-02" data-active-icon="icon-feather-chevron-up" data-inactive-icon="icon-feather-chevron-down" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="accordion-item active-accordion">
<div class="accordion-header border-bottom border-color-extra-medium-gray">
<a href="demo-hosting.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-01" aria-expanded="true" data-bs-parent="#accordion-style-02">
<div class="accordion-title mb-0 position-relative text-dark-gray pe-30px">
<i class="feather icon-feather-chevron-up icon-extra-medium"></i><span class="fw-600 fs-18">How long is this site live?</span>
</div>
</a>
</div>
<div id="accordion-style-02-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-style-02">
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header border-bottom border-color-extra-medium-gray">
<a href="demo-hosting.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-02" aria-expanded="false" data-bs-parent="#accordion-style-02">
<div class="accordion-title mb-0 position-relative text-dark-gray pe-30px">
<i class="feather icon-feather-chevron-down icon-extra-medium"></i><span class="fw-600 fs-18">Can i install/upload anything is want on there?</span>
</div>
</a>
</div>
<div id="accordion-style-02-02" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header border-bottom border-color-light-medium-gray">
<a href="demo-hosting.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-03" aria-expanded="false" data-bs-parent="#accordion-style-02">
<div class="accordion-title mb-0 position-relative text-dark-gray pe-30px">
<i class="feather icon-feather-chevron-down icon-extra-medium"></i><span class="fw-600 fs-18">How can i migrate to another site?</span>
</div>
</a>
</div>
<div id="accordion-style-02-03" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header border-bottom border-color-transparent">
<a href="demo-hosting.html#" data-bs-toggle="collapse" data-bs-target="#accordion-style-02-04" aria-expanded="false" data-bs-parent="#accordion-style-02">
<div class="accordion-title mb-0 position-relative text-dark-gray pe-30px">
<i class="feather icon-feather-chevron-down icon-extra-medium"></i><span class="fw-600 fs-18">Can i change the domain you give me?</span>
</div>
</a>
</div>
<div id="accordion-style-02-04" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-transparent">
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="overflow-hidden p-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-xl-5 col-lg-7 col-md-8 position-relative text-center text-xl-start lg-mb-15px" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="text-base-color fw-600 mb-15px text-uppercase d-block">Client feedback</span>
<h3 class="alt-font fw-700 ls-minus-1px text-dark-gray mb-20px mx-auto">What do people say about our services?</h3>
<div class="d-block mb-30px fs-18 ls-minus-05px">
See our 437 reviews on <a href="demo-hosting.html#" class="align-middle position-relative top-minus-2px"><img src="images/demo-hosting-home-04.jpg" alt></a>
</div>
<div class="d-flex justify-content-center justify-content-xl-start">
<div class="slider-one-slide-prev-1 text-dark-gray swiper-button-prev slider-navigation-style-04 border border-1 border-color-extra-medium-gray" tabindex="0" role="button" aria-label="Previous slide"><i class="fa-solid fa-arrow-left"></i></div>
<div class="slider-one-slide-next-1 text-dark-gray swiper-button-next slider-navigation-style-04 border border-1 border-color-extra-medium-gray" tabindex="0" role="button" aria-label="Next slide"><i class="fa-solid fa-arrow-right"></i></div>
</div>
</div>
<div class="col-xl-7 col-lg-10 overflow-hidden" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="outside-box-right-15 xl-outside-box-right-20 sm-outside-box-right-0">
<div class="swiper slider-one-slide slider-shadow-right sm-slider-shadow-none magic-cursor overflow-visible ps-25px sm-p-0" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 40, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-one-slide-pagination&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 3000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;992&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper pt-30px pb-30px">
<div class="swiper-slide review-style-06">
<div class="d-flex justify-content-center h-100 flex-column bg-white box-shadow-medium p-45px md-p-35px border-radius-6px last-paragraph-no-margin">
<div class="mb-20px d-flex align-items-center">
<img class="rounded-circle w-90px h-90px me-20px" src="images/avtar-05.jpg" alt>
<div class="d-inline-block align-middle last-paragraph-no-margin">
<div class="alt-font text-dark-gray fw-600 fs-18">Herman Miller</div>
<p class="lh-24 d-block">Digital marketer</p>
</div>
<div class="border-radius-30px bg-yellow ps-15px pe-15px fs-14 fw-700 text-dark-gray d-inline-block align-middle ms-auto md-position-absolute md-right-15px md-top-15px"><i class="fa-solid fa-star me-5px"></i>5.0</div>
</div>
<p>We help our clients succeed by creating brand identities, digital experiences, and print materials that communicate.</p>
</div>
</div>
<div class="swiper-slide review-style-06">
<div class="d-flex justify-content-center h-100 flex-column bg-white box-shadow-medium p-45px md-p-35px border-radius-6px last-paragraph-no-margin">
<div class="mb-20px d-flex align-items-center">
<img class="rounded-circle w-90px h-90px me-20px" src="images/avtar-04.jpg" alt>
<div class="d-inline-block align-middle last-paragraph-no-margin">
<div class="alt-font text-dark-gray fw-600 fs-18">Alexander Harad</div>
<p class="lh-24 d-block">Digital marketer</p>
</div>
<div class="border-radius-30px bg-yellow ps-15px pe-15px fs-14 fw-700 text-dark-gray d-inline-block align-middle ms-auto md-position-absolute md-right-15px md-top-15px"><i class="fa-solid fa-star me-5px"></i>4.5</div>
</div>
<p>They have provided superior quality of content marketing services. Very satisfied by choosing them. Thank you!</p>
</div>
</div>
<div class="swiper-slide review-style-06">
<div class="d-flex justify-content-center h-100 flex-column bg-white box-shadow-medium p-45px md-p-35px border-radius-6px last-paragraph-no-margin">
<div class="mb-20px d-flex align-items-center">
<img class="rounded-circle w-90px h-90px me-20px" src="images/avtar-03.jpg" alt>
<div class="d-inline-block align-middle last-paragraph-no-margin">
<div class="alt-font text-dark-gray fw-600 fs-18">Shoko Mugikura</div>
<p class="lh-24 d-block">Digital marketer</p>
</div>
<div class="border-radius-30px bg-yellow ps-15px pe-15px fs-14 fw-700 text-dark-gray d-inline-block align-middle ms-auto md-position-absolute md-right-15px md-top-15px"><i class="fa-solid fa-star me-5px"></i>5.0</div>
</div>
<p>We help our clients succeed by creating brand identities, digital experiences, and print materials that communicate.</p>
</div>
</div>
<div class="swiper-slide review-style-06">
<div class="d-flex justify-content-center h-100 flex-column bg-white box-shadow-medium p-45px md-p-35px border-radius-6px last-paragraph-no-margin">
<div class="mb-20px d-flex align-items-center">
<img class="rounded-circle w-90px h-90px me-20px" src="images/avtar-07.jpg" alt>
<div class="d-inline-block align-middle last-paragraph-no-margin">
<div class="alt-font text-dark-gray fw-600 fs-18">Jacob Kalling</div>
<p class="lh-24 d-block">Digital marketer</p>
</div>
<div class="border-radius-30px bg-yellow ps-15px pe-15px fs-14 fw-700 text-dark-gray d-inline-block align-middle ms-auto md-position-absolute md-right-15px md-top-15px"><i class="fa-solid fa-star me-5px"></i>5.0</div>
</div>
<p>We help our clients succeed by creating brand identities, digital experiences, and print materials that communicate.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pt-4">
<div class="container">
<div class="row position-relative clients-style-08" data-anime="{ &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col swiper text-center feather-shadow" data-slider-options="{ &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;:0, &quot;speed&quot;: 4000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:0, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 2 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-paypal.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-walmart.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-amazon.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-logitech.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting.html#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt /></a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-dark bg-dark-blue pb-0 cover-background background-position-left-top" style="background-image: url('images/demo-hosting-footer-bg.jpg')">
<div class="container">
<div class="row justify-content-center mb-5 md-mb-8 sm-mb-40px">
<div class="col-6 col-lg-3 last-paragraph-no-margin order-sm-1 md-mb-40px xs-mb-30px">
<a href="demo-hosting.html" class="footer-logo mb-15px d-inline-block"><img src="images/demo-hosting-logo-white.png" data-at2x="images/demo-hosting-logo-white@2x.png" alt></a>
<p class="w-90 lg-w-100">Lorem ipsum amet adipiscing elit to eiusmod ad tempor incididunt enim.</p>
<div class="elements-social social-icon-style-02 mt-20px xs-mt-15px">
<ul class="small-icon light">
<li class="my-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="my-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li class="my-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="my-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-6 col-lg-2 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
<span class="fs-17 fw-500 d-block text-white mb-5px">Company</span>
<ul>
<li><a href="demo-hosting-about.html">About</a></li>
<li><a href="demo-hosting-hosting.html">Hosting</a></li>
<li><a href="demo-hosting-domain.html">Domain</a></li>
<li><a href="demo-hosting-pricing.html">Pricing</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 col-sm-4 xs-mb-30px order-sm-4 order-lg-3">
<span class="fs-17 fw-500 d-block text-white mb-5px">Customer</span>
<ul>
<li><a href="demo-hosting-support.html">Client support</a></li>
<li><a href="demo-hosting-support.html">Help center</a></li>
<li><a href="demo-hosting-about.html">System status</a></li>
<li><a href="demo-hosting-contact.html">Feedback</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 col-sm-4 xs-mb-30px order-sm-5 order-lg-4">
<span class="fs-17 fw-500 d-block text-white mb-5px">Say hello</span>
<span class="d-inline-flex w-100">Need support?</span>
<a href="cdn-cgi/l/email-protection.html#375f5e7753585a565e591954585a" class="text-white lh-22 text-decoration-line-bottom d-inline-block mb-20px"><span class="__cf_email__" data-cfemail="fe9697be9a91939f9790d09d9193">[email&#160;protected]</span></a>
<span class="d-inline-flex w-100">Customer care</span>
<a href="tel:12345678910" class="text-white lh-22 d-inline-flex">+1 234 567 8910</a>
</div>
<div class="col-lg-3 col-sm-6 ps-30px sm-ps-15px md-mb-40px xs-mb-0 order-sm-2 order-lg-5">
<span class="fs-17 fw-500 d-block text-white mb-5px">Subscribe our newsletter</span>
<p class="mb-20px">Subscribe our newsletter to get the latest news and updates!</p>
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-15px">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="input-small bg-transparent-white-light border-color-transparent w-100 form-control pe-50px ps-20px lg-ps-15px required" type="email" name="email" placeholder="Enter your email" />
<input type="hidden" name="redirect" value>
<button class="btn pe-20px submit" aria-label="submit"><i class="icon bi bi-envelope icon-small text-white"></i></button>
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-14 lh-22 mt-10px w-100 text-center position-absolute d-none"></div>
</form>
</div>
<div class="footer-card">
<a href="demo-hosting.html#" class="d-inline-block me-5px xxl-me-0 align-middle"><img src="images/demo-decor-store-payment-icon-01.png" alt></a>
<a href="demo-hosting.html#" class="d-inline-block me-5px xxl-me-0 align-middle"><img src="images/demo-decor-store-payment-icon-02.png" alt></a>
<a href="demo-hosting.html#" class="d-inline-block me-5px xxl-me-0 align-middle"><img src="images/demo-decor-store-payment-icon-03.png" alt></a>
<a href="demo-hosting.html#" class="d-inline-block me-5px xxl-me-0 align-middle"><img src="images/demo-decor-store-payment-icon-04.png" alt></a>
</div>
</div>
</div>
<div class="border-top border-color-transparent-white-light pt-35px pb-35px text-center">
<span class="fs-13 w-60 lg-w-70 md-w-100 d-block mx-auto lh-22">This site is protected by reCAPTCHA and the Google <a href="demo-hosting.html#" class="text-white text-decoration-line-bottom">privacy policy</a> and <a href="demo-hosting.html#" class="text-white text-decoration-line-bottom">terms of service</a> apply. You must not use this website if you disagree with any of these website standard terms and conditions.</span>
</div>
</div>
</footer>
<div class="sticky-wrap z-index-1 d-none d-xl-inline-block" data-animation-delay="100" data-shadow-animation="true">
<div class="elements-social social-icon-style-10">
<ul class="fs-14">
<li class="me-30px"><a class="facebook" href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook-f me-10px"></i>
<span class="alt-font">Facebook</span>
</a>
</li>
<li class="me-30px">
<a class="dribbble" href="http://www.dribbble.com" target="_blank">
<i class="fa-brands fa-dribbble me-10px"></i>
<span class="alt-font">Dribbble</span>
</a>
</li>
<li class="me-30px">
<a class="twitter" href="https://www.twitter.com" target="_blank">
<i class="fa-brands fa-twitter me-10px"></i>
<span class="alt-font">Twitter</span>
</a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com" target="_blank">
<i class="fa-brands fa-instagram me-10px"></i>
<span class="alt-font">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-hosting.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>