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

508 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/corporate/corporate.css" />
</head>
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="modern" data-mobile-nav-bg-color="#242E45">
<div class="box-layout">
<header>
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed">
<div class="container-fluid">
<div class="col-auto col-xl-3 col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="demo-corporate.html">
<img src="images/demo-corporate-logo-black.png" data-at2x="images/demo-corporate-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-corporate-logo-black.png" data-at2x="images/demo-corporate-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-corporate-logo-black.png" data-at2x="images/demo-corporate-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-xl-6 col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" 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 justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="demo-corporate.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-corporate-about.html" class="nav-link">About</a></li>
<li class="nav-item dropdown dropdown-with-icon-style02">
<a href="demo-corporate-services.html" class="nav-link">Services</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="demo-corporate-services-details.html"><i class="line-icon-Medal-2"></i>Business planning</a></li>
<li><a href="demo-corporate-services-details.html"><i class="line-icon-Archery-2"></i>Market research</a></li>
<li><a href="demo-corporate-services-details.html"><i class="line-icon-Financial"></i>Business consulting</a></li>
<li><a href="demo-corporate-services-details.html"><i class="line-icon-Money-Bag"></i>Audience analysis</a></li>
</ul>
</li>
<li class="nav-item"><a href="demo-corporate-customer-stories.html" class="nav-link">Testimonials</a></li>
<li class="nav-item"><a href="demo-corporate-pricing.html" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="demo-corporate-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-corporate-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-xl-3 col-lg-2 text-end md-pe-0">
<div class="header-icon">
<div class="header-search-icon icon">
<a href="demo-corporate-customer-stories.html#" class="search-form-icon header-search-form"><i class="feather icon-feather-search"></i></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 text-center fw-600 mb-4 ls-minus-1px">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-20px d-none d-xl-inline-block">
<a href="demo-corporate-contact.html" class="btn btn-rounded btn-transparent-light-gray border-1 btn-medium btn-switch-text text-transform-none">
<span>
<span class="btn-double-text fw-600" data-text="Free consultation">Free consultation</span>
<span><i class="fa-regular fa-envelope"></i></span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="top-space-margin page-title-big-typography border-radius-6px lg-border-radius-0px p-0" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-corporate-customer-stories-bg.jpg')">
<div class="opacity-extra-medium bg-blue-whale"></div>
<div class="container">
<div class="row align-items-center justify-content-center small-screen">
<div class="col-lg-8 position-relative text-center page-title-extra-large" 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; }">
<h1 class="m-auto text-white text-shadow-double-large fw-600 ls-minus-2px">Customer stories</h1>
</div>
<div class="down-section text-center" 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; }">
<a href="demo-corporate-customer-stories.html#down-section" class="section-link">
<div class="text-white">
<i class="feather icon-feather-chevron-down icon-very-medium"></i>
</div>
</a>
</div>
</div>
</div>
</section>
<section id="down-section" class="position-relative">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-6 md-mb-60px" 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; }">
<figure class="position-relative m-0 text-center text-md-center">
<img src="images/demo-corporate-customer-stories-01.jpg" alt>
<figcaption class="position-absolute bg-white right-0px left-0px m-auto border-radius-6px p-25px xs-p-10px box-shadow-double-large bottom-minus-20px w-350px xs-w-290px text-start last-paragraph-no-margin">
<div class="row align-items-center justify-content-center text-dark-gray">
<div class="col-4 col-sm-5 pe-25px text-end border-end border-color-extra-medium-gray xs-pe-15px">
<h2 class="mb-0 fs-50 fw-800 ls-minus-4px lh-40">4.9</h2>
</div>
<div class="col-7 ps-25px text-star last-paragraph-no-margin xs-ps-15px">
<div class="review-star-icon fs-20 lh-22 d-inline-block text-gradient-orange-sky-blue xs-fs-16">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="fs-16 lh-22 fw-600 d-block">Best rated agency</span>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="col-lg-6 ps-6 md-ps-15px" 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; }">
<img src="images/demo-corporate-services-06.png" alt class="mb-20px">
<h3 class="text-dark-gray fw-700 ls-minus-1px w-85 lg-w-100">Exceeded all my expectations.</h3>
<p class="w-85 lg-w-100 mb-30px sm-mb-25px">We strive to develop real-world web solutions that are ideal for small to large projects with bespoke project requirements. We create compelling web designs, which are the right-fit for your target.</p>
<div class="icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon feature-box-icon-rounded w-75px h-75px rounded-circle bg-light-red me-20px">
<i class="fa-brands fa-twitter d-inline-block icon-very-medium text-base-color"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block fw-700 text-dark-gray fs-19">Alexander Johnson</span>
<span class="d-block fs-15 lh-24">Themezaa, Co founder</span>
</div>
</div>
</div>
</div>
</div>
<div class="row position-relative clients-style-08 mt-8 sm-mt-11" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;:100, &quot;staggervalue&quot;: 150, &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;: 3000, &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;pauseOnMouseEnter&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;: 5 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;576&quot;: { &quot;slidesPerView&quot;: 2 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper marquee-slide">
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-walmart-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-netflix-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-invision-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-yahoo-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-amazon-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-walmart-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-netflix-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-invision-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-yahoo-dark-blue.svg" alt /></a>
</div>
<div class="swiper-slide">
<a href="demo-corporate-customer-stories.html#"><img src="images/logo-amazon-dark-blue.svg" alt /></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gradient-quartz-white border-radius-6px lg-border-radius-0px">
<div class="container background-no-repeat background-position-center-bottom" style="background-image: url('images/demo-corporate-bg-02.png')">
<div class="row justify-content-center align-items-center mb-2" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-4 col-lg-2 col-sm-3 xs-mb-25px">
<div class="swiper rounded-circle" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 1000, &quot;disableOnInteraction&quot;: false }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;fade&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="border-radius-50 w-100" src="images/demo-corporate-services-07.jpg" alt />
</div>
<div class="swiper-slide">
<img class="border-radius-50 w-100" src="images/demo-corporate-services-08.jpg" alt />
</div>
<div class="swiper-slide">
<img class="border-radius-50 w-100" src="images/demo-corporate-services-09.jpg" alt />
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-7 text-center text-sm-start">
<h5 class="alt-font text-dark-gray lh-40 fw-500 ls-minus-1px mb-0 ms-10px lg-ms-0" data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 500, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Trusted by <span class="fw-800 text-base-color text-decoration-line-bottom-medium">25,000+</span> happy customers are using crafto.</h5>
</div>
<div class="col-xl-2 offset-xl-2 col-lg-3 offset-lg-1 col-sm-4 md-mt-35px text-center text-lg-start">
<h2 class="alt-font text-dark-gray fw-800 ls-minus-3px mb-5px" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 300, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">200+</h2>
<span class="text-dark-gray fw-500 lh-24 d-inline-block w-90 lg-w-80 sm-w-100" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 400, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">Creative team to care for projects.</span>
</div>
<div class="col-lg-2 col-sm-4 ps-40px md-ps-15px md-mt-35px text-center text-lg-start">
<h2 class="alt-font text-dark-gray fw-800 ls-minus-3px mb-5px" data-anime="{ &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">4.9</h2>
<div class="review-star-icon fs-17 lh-20 d-block" data-anime="{ &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 200, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
<span class="text-dark-gray fw-500" data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;delay&quot;: 300, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">2,488 Rating</span>
</div>
</div>
<div class="row mb-3">
<div class="col-12" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="swiper slider-one-slide magic-cursor dark" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 25, &quot;loop&quot;: true, &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;1400&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;1200&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &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-07">
<div class="d-flex justify-content-center h-100 flex-column border-radius-6px p-12 bg-white box-shadow-extra-large xl-p-10">
<div class="mb-20px">
<img src="images/avtar-24.jpg" class="rounded-circle w-90px lg-w-65px me-15px" alt>
<div class="d-inline-block align-middle">
<div class="text-dark-gray fs-18 fw-600">Alex sanchez</div>
<div class="lh-24 fs-16">Google design</div>
</div>
</div>
<p class="mb-15px md-w-85 sm-w-100">Excellent content and assignments that build on your knowledge, reinforce and then expand.</p>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="text-dark-gray fw-700 float-start fs-15 me-10px">4.5</div>
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
</div>
</div>
<div class="d-inline-block fw-500 text-uppercase border-radius-30px ps-15px pe-15px fs-12 lh-28 bg-dark-gray text-white">30 Nov</div>
</div>
</div>
</div>
<div class="swiper-slide review-style-07">
<div class="d-flex justify-content-center h-100 flex-column border-radius-6px p-12 bg-white box-shadow-extra-large xl-p-10">
<div class="mb-20px">
<img src="images/avtar-25.jpg" class="rounded-circle w-90px lg-w-65px me-15px" alt>
<div class="d-inline-block align-middle">
<div class="text-dark-gray fs-18 fw-600">Matthew taylor</div>
<div class="lh-24 fs-16">Microsoft word</div>
</div>
</div>
<p class="mb-15px md-w-85 sm-w-100">I liked that the course included step-by-step exercises and tutorials plus assignments.</p>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="text-dark-gray fw-700 float-start fs-15 me-10px">5.0</div>
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
<div class="d-inline-block fw-500 text-uppercase border-radius-30px ps-15px pe-15px fs-12 lh-28 bg-dark-gray text-white">28 Nov</div>
</div>
</div>
</div>
<div class="swiper-slide review-style-07">
<div class="d-flex justify-content-center h-100 flex-column border-radius-6px p-12 bg-white box-shadow-extra-large xl-p-10">
<div class="mb-20px">
<img src="images/avtar-26.jpg" class="rounded-circle w-90px lg-w-65px me-15px" alt>
<div class="d-inline-block align-middle">
<div class="text-dark-gray fs-18 fw-600">Leonel mooney</div>
<div class="lh-24 fs-16">Apple store</div>
</div>
</div>
<p class="mb-15px md-w-85 sm-w-100">I have taken many online courses. None have offered teleconference as part of the course.</p>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="text-dark-gray fw-700 float-start fs-15 me-10px">5.0</div>
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
<div class="d-inline-block fw-500 text-uppercase border-radius-30px ps-15px pe-15px fs-12 lh-28 bg-dark-gray text-white">26 Nov</div>
</div>
</div>
</div>
<div class="swiper-slide review-style-07">
<div class="d-flex justify-content-center h-100 flex-column border-radius-6px p-12 bg-white box-shadow-extra-large xl-p-10">
<div class="mb-20px">
<img src="images/avtar-27.jpg" class="rounded-circle w-90px lg-w-65px me-15px" alt>
<div class="d-inline-block align-middle">
<div class="text-dark-gray fs-18 fw-600">Jacob kalling</div>
<div class="lh-24 fs-16">System design</div>
</div>
</div>
<p class="mb-15px md-w-85 sm-w-100">Got almost immediate responses when I turned in assignments and she had wonderful feedback!</p>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="text-dark-gray fw-700 float-start fs-15 me-10px">5.0</div>
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
<div class="d-inline-block fw-500 text-uppercase border-radius-30px ps-15px pe-15px fs-12 lh-28 bg-dark-gray text-white">20 Nov</div>
</div>
</div>
</div>
<div class="swiper-slide review-style-07">
<div class="d-flex justify-content-center h-100 flex-column border-radius-6px p-12 bg-white box-shadow-extra-large xl-p-10">
<div class="mb-20px">
<img src="images/avtar-25.jpg" class="rounded-circle w-90px lg-w-65px me-15px" alt>
<div class="d-inline-block align-middle">
<div class="text-dark-gray fs-18 fw-600">Matthew taylor</div>
<div class="lh-24 fs-16">Microsoft word</div>
</div>
</div>
<p class="mb-15px md-w-85 sm-w-100">I liked that the course included step-by-step exercises and tutorials plus assignments.</p>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="text-dark-gray fw-700 float-start fs-15 me-10px">5.0</div>
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
<div class="d-inline-block fw-500 text-uppercase border-radius-30px ps-15px pe-15px fs-12 lh-28 bg-dark-gray text-white">28 Nov</div>
</div>
</div>
</div>
<div class="swiper-slide review-style-07">
<div class="d-flex justify-content-center h-100 flex-column border-radius-6px p-12 bg-white box-shadow-extra-large xl-p-10">
<div class="mb-20px">
<img src="images/avtar-26.jpg" class="rounded-circle w-90px lg-w-65px me-15px" alt>
<div class="d-inline-block align-middle">
<div class="text-dark-gray fs-18 fw-600">Leonel mooney</div>
<div class="lh-24 fs-16">Apple store</div>
</div>
</div>
<p class="mb-15px md-w-85 sm-w-100">I have taken many online courses. None have offered teleconference as part of the course.</p>
<div class="d-flex align-items-center">
<div class="d-inline-block me-auto">
<div class="text-dark-gray fw-700 float-start fs-15 me-10px">5.0</div>
<div class="review-star-icon float-start">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
</div>
</div>
<div class="d-inline-block fw-500 text-uppercase border-radius-30px ps-15px pe-15px fs-12 lh-28 bg-dark-gray text-white">26 Nov</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col text-center" data-anime="{ &quot;translateX&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="fs-24 fw-500 text-dark-gray d-inline-block align-middle ls-minus-1px me-20px lg-m-10px lg-mt-0">More than <span class="fw-700 text-decoration-line-bottom-medium">10000+</span> happy customers reviews on</div>
<a href="https://www.trustpilot.com/" target="_blank"><img src="images/demo-corporate-11.png" class="d-inline-block align-middle" alt></a>
</div>
</div>
</div>
</section>
<footer class="p-0 fs-16 border-top border-color-extra-medium-gray">
<div class="container">
<div class="row justify-content-center pt-6 sm-pt-40px">
<div class="col-6 col-xl-3 col-lg-12 col-sm-6 last-paragraph-no-margin text-xl-start text-lg-center order-sm-1 lg-mb-50px sm-mb-30px">
<a href="demo-corporate.html" class="footer-logo mb-15px d-inline-block"><img src="images/demo-corporate-logo-black.png" data-at2x="images/demo-corporate-logo-black@2x.png" alt></a>
<p class="lh-30 w-90 xl-w-100 mx-lg-auto mx-xl-0">Gearing your company through an innovative strategy.</p>
<div class="elements-social social-icon-style-02 mt-20px xs-mt-15px">
<ul class="medium-icon dark">
<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-xl-2 col-lg-3 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
<span class="fs-17 fw-600 d-block text-dark-gray mb-5px">Company</span>
<ul>
<li><a href="demo-corporate-about.html">Who we are</a></li>
<li><a href="demo-corporate-services.html">Our services</a><div class="bg-dark-gray fw-600 text-white lh-22 text-uppercase border-radius-30px ps-10px pe-10px fs-10 ms-10px d-inline-block align-middle">Hot</div></li>
<li><a href="demo-corporate-customer-stories.html">Our clients</a></li>
<li><a href="demo-corporate-contact.html">Contact us</a></li>
</ul>
</div>
<div class="col-6 col-xl-2 col-lg-3 col-sm-4 xs-mb-30px order-sm-4 order-lg-3">
<span class="fs-17 fw-600 d-block text-dark-gray mb-5px">Services</span>
<ul>
<li><a href="demo-corporate-services-details.html">Planning</a></li>
<li><a href="demo-corporate-services-details.html">Research</a></li>
<li><a href="demo-corporate-services-details.html">Consulting</a></li>
<li><a href="demo-corporate-services-details.html">Analysis</a></li>
</ul>
</div>
<div class="col-6 col-xl-2 col-lg-3 col-sm-4 xs-mb-30px order-sm-5 order-lg-4">
<span class="fs-17 fw-600 d-block text-dark-gray mb-5px">Customer</span>
<ul>
<li><a href="demo-corporate-customer-stories.html">Client support</a></li>
<li><a href="demo-corporate-customer-stories.html">Help center</a></li>
<li><a href="demo-corporate-customer-stories.html">System status</a></li>
<li><a href="demo-corporate-customer-stories.html">Feedback</a></li>
</ul>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6 md-mb-50px sm-mb-30px xs-mb-0 order-sm-2 order-lg-5">
<span class="fs-17 fw-600 d-block text-dark-gray mb-5px">Subscribe newsletter</span>
<p class="lh-30 w-95 sm-w-100 mb-15px">Subscribe our newsletter to get the latest news and updates!</p>
<div class="d-inline-block w-100 newsletter-style-02 position-relative">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative">
<input class="border-color-extra-medium-gray bg-transparent border-radius-4px w-100 form-control input-small pe-50px required" type="email" name="email" placeholder="Enter your email" />
<input type="hidden" name="redirect" value>
<button class="btn pe-20px submit lh-16" aria-label="submit"><i class="feather icon-feather-mail icon-small text-dark-gray"></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>
</div>
<div class="row justify-content-center align-items-center pt-2">
<div class="col-12">
<div class="divider-style-03 divider-style-03-01 border-color-transparent-white-light"></div>
</div>
<div class="col-lg-5 pt-35px pb-35px md-pt-0 order-2 order-lg-1 text-center text-lg-start last-paragraph-no-margin"><p>&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-dark-gray fw-600 text-decoration-line-bottom">ThemeZaa</a></p></div>
<div class="col-lg-7 pt-35px pb-35px md-pt-25px md-pb-5px order-1 order-lg-2 text-center text-lg-end">
<ul class="footer-navbar sm-lh-normal">
<li><a href="demo-corporate-customer-stories.html#" class="nav-link">Privacy policy</a></li>
<li><a href="demo-corporate-customer-stories.html#" class="nav-link">Terms and conditions</a></li>
<li><a href="demo-corporate-customer-stories.html#" class="nav-link">Copyright</a></li>
</ul>
</div>
</div>
</div>
</footer>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-corporate-customer-stories.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>
</div>
<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>