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

491 lines
28 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#097a7c7979667b7d496d6664686067276a6664" 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="bdcec8cdcdd2cfc9fdd9d2d0dcd4d393ded2d0">[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-about.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-about.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="page-title-big-typography bg-dark-gray ipad-top-space-margin cover-background md-py-0" style="background-image: url('images/demo-hosting-about-bg.jpg')">
<div class="container">
<div class="row align-items-center small-screen">
<div class="col-lg-5 col-sm-7 position-relative page-title-extra-small">
<h1 class="mb-15px text-white opacity-7 fw-300 overflow-hidden">
<span class="d-inline-block" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 500, &quot;staggervalue&quot;: 300 }">About crafto hosting</span>
</h1>
<h2 class="m-auto pb-5px pt-5px text-white fw-600 ls-minus-1px overflow-hidden">
<span class="d-inline-block" data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0, 1], &quot;easing&quot;: &quot;easeOutCubic&quot;, &quot;duration&quot;: 500, &quot;staggervalue&quot;: 300, &quot;delay&quot;: 200 }">Empower our community</span>
</h2>
</div>
</div>
</div>
</section>
<section class="pb-0">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-6 col-md-10 md-mb-50px animation-float" 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-hosting-01.jpg" alt>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 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">Simple and intuitive</span>
<h2 class="fw-700 text-dark-gray ls-minus-1px">Secure & reliable hosting company.</h2>
<p class="w-95 lg-w-100 mb-30px">Lorem ipsum dolor sit amet consectetur adipiscing do eiusmod tempor incididunt ut labore et dolore.</p>
<div class="mb-40px">
<div class="col icon-with-text-style-08 mb-15px">
<div class="feature-box feature-box-left-icon-middle bg-very-light-gray border-radius-5px pt-15px pb-15px ps-25px pe-25px">
<div class="feature-box-icon feature-box-icon-rounded w-25px h-25px rounded-circle bg-base-color box-shadow-large me-10px">
<i class="fa-solid fa-check fs-11 text-white"></i>
</div>
<div class="feature-box-content">
<span class="d-block fs-17 text-dark-gray fw-500 ls-minus-05px">Easy way to broadcast the content on website.</span>
</div>
</div>
</div>
<div class="col icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle bg-very-light-gray border-radius-5px pt-15px pb-15px ps-25px pe-25px">
<div class="feature-box-icon feature-box-icon-rounded w-25px h-25px rounded-circle bg-base-color box-shadow-large me-10px">
<i class="fa-solid fa-check fs-11 text-white"></i>
</div>
<div class="feature-box-content">
<span class="d-block fs-17 text-dark-gray fw-500 ls-minus-05px">Secure way to keep your data under a account.</span>
</div>
</div>
</div>
</div>
<a href="demo-hosting-hosting.html" class="btn btn-large btn-dark-gray btn-rounded btn-switch-text btn-box-shadow">
<span>
<span class="btn-double-text" data-text="Get started now">Hosting services</span>
<span><i class="feather icon-feather-arrow-right"></i></span>
</span>
</a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center mb-3">
<div class="col-12 text-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 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="fw-700 text-dark-gray ls-minus-1px mb-25px d-block">Business timeline</h2>
</div>
</div>
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center g-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-30, 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 process-step-style-06 text-center last-paragraph-no-margin hover-box md-mb-50px">
<h4 class="d-block text-dark-gray mb-0 fw-700 ls-minus-2px">2010</h4>
<div class="process-step-icon-box position-relative mt-25px mb-25px">
<span class="progress-step-separator bg-dark-gray w-100 separator-line-1px opacity-1"></span>
<div class="step-box d-flex align-items-center justify-content-center bg-white box-shadow-medium-bottom border-radius-100 mx-auto w-30px h-30px">
<span class="w-8px h-8px bg-base-color border-radius-100"></span>
</div>
</div>
<span class="d-inline-block alt-font fw-600 text-dark-gray fs-18 mb-5px ls-minus-05px">Business founded</span>
<p class="w-75 sm-w-85 d-inline-block ">Lorem ipsum is simply text of the printing typesetting.</p>
</div>
<div class="col process-step-style-06 text-center last-paragraph-no-margin hover-box md-mb-50px">
<h4 class="d-block text-dark-gray mb-0 fw-700 ls-minus-2px">2014</h4>
<div class="process-step-icon-box position-relative mt-25px mb-25px">
<span class="progress-step-separator bg-dark-gray w-100 separator-line-1px opacity-1"></span>
<div class="step-box d-flex align-items-center justify-content-center bg-white box-shadow-medium-bottom border-radius-100 mx-auto w-30px h-30px">
<span class="w-8px h-8px bg-base-color border-radius-100"></span>
</div>
</div>
<span class="d-inline-block alt-font fw-600 text-dark-gray fs-18 mb-5px ls-minus-05px">Build new office</span>
<p class="w-75 sm-w-85 d-inline-block ">Lorem ipsum is simply text of the printing typesetting.</p>
</div>
<div class="col process-step-style-06 text-center last-paragraph-no-margin hover-box xs-mb-50px">
<h4 class="d-block text-dark-gray mb-0 fw-700 ls-minus-2px">2016</h4>
<div class="process-step-icon-box position-relative mt-25px mb-25px">
<span class="progress-step-separator bg-dark-gray w-100 separator-line-1px opacity-1"></span>
<div class="step-box d-flex align-items-center justify-content-center bg-white box-shadow-medium-bottom border-radius-100 mx-auto w-30px h-30px">
<span class="w-8px h-8px bg-base-color border-radius-100"></span>
</div>
</div>
<span class="d-inline-block alt-font fw-600 text-dark-gray fs-18 mb-5px ls-minus-05px">Relocates headquarter</span>
<p class="w-75 sm-w-85 d-inline-block ">Lorem ipsum is simply text of the printing typesetting.</p>
</div>
<div class="col process-step-style-06 text-center last-paragraph-no-margin hover-box">
<h4 class="d-block text-dark-gray mb-0 fw-700 ls-minus-2px">2020</h4>
<div class="process-step-icon-box position-relative mt-25px mb-25px">
<span class="progress-step-separator bg-dark-gray w-100 separator-line-1px opacity-1"></span>
<div class="step-box d-flex align-items-center justify-content-center bg-white box-shadow-medium-bottom border-radius-100 mx-auto w-30px h-30px">
<span class="w-8px h-8px bg-base-color border-radius-100"></span>
</div>
</div>
<span class="d-inline-block alt-font fw-600 text-dark-gray fs-18 mb-5px ls-minus-05px">Revenue of millions</span>
<p class="w-75 sm-w-85 d-inline-block ">Lorem ipsum is simply text of the printing typesetting.</p>
</div>
</div>
<div class="row justify-content-center mt-6 xs-mt-12" data-anime="{ &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; }">
<div class="col-xl-8 col-lg-10">
<div class="row align-items-center justify-content-center bg-yellow border-radius-100px sm-border-radius-6px p-15px sm-p-20px sm-mx-0">
<div class="col-lg-6 border-end border-color-transparent-dark-very-light text-center ls-minus-05px align-items-center d-flex justify-content-center md-border-end-0 md-mb-10px">
<i class="fa-regular fa-face-smile text-dark-gray icon-extra-medium me-10px"></i>
<span class="text-dark-gray fs-18 fw-600 text-start lh-28">Join the <span class="fw-700">10000+</span> clients trusting us</span>
</div>
<div class="col-lg-6 text-center ls-minus-05px align-items-center d-flex justify-content-center">
<i class="bi bi-star text-dark-gray icon-extra-medium me-10px"></i>
<span class="text-dark-gray fs-18 fw-600 text-start lh-28">4.9 out of 5 - <span class="fw-700">8549</span> Total reviews</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cover-background" style="background-image: url('images/demo-hosting-about-02.jpg')">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10 text-center" 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="d-inline-block mb-45px sm-mb-25px">
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="position-relative bg-white d-inline-block text-center rounded-circle video-icon-box video-icon-large popup-youtube">
<span>
<span class="video-icon">
<i class="fa-solid fa-play text-base-color"></i>
<span class="video-icon-sonar">
<span class="video-icon-sonar-bfr bg-white"></span>
</span>
</span>
</span>
</a>
</div>
<h2 class="text-white fw-700 ls-minus-1px mb-0">Are you ready for better productive business?</h2>
<span class="d-block text-white opacity-5 text-uppercase mt-20px">We're a trusted sources of web hosting</span>
</div>
</div>
</div>
</section>
<section class="overflow-hidden pb-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 <img src="images/demo-hosting-home-04.jpg" class="align-middle position-relative top-minus-2px" alt></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 sm-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;992&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<a href="demo-hosting-about.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting-about.html#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting-about.html#"><img src="images/logo-paypal.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting-about.html#"><img src="images/logo-walmart.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting-about.html#"><img src="images/logo-amazon.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting-about.html#"><img src="images/logo-logitech.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting-about.html#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-hosting-about.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#d6bebf96b2b9bbb7bfb8f8b5b9bb" class="text-white lh-22 text-decoration-line-bottom d-inline-block mb-20px"><span class="__cf_email__" data-cfemail="eb8382ab8f84868a8285c5888486">[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-about.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-about.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-about.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-about.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-about.html#" class="text-white text-decoration-line-bottom">privacy policy</a> and <a href="demo-hosting-about.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="scroll-progress d-none d-xxl-block">
<a href="demo-hosting-about.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>