nothing much added the darkmode for the testimonial's and fixed the responsive issue's
This commit is contained in:
merajjahir
214
public/componets/testimonial/10_testimonial.html
Normal file
214
public/componets/testimonial/10_testimonial.html
Normal file
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
|
||||
<title>Testimonial 10</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- testimonial 10 start -->
|
||||
<section class="section_divider" id="testimonial_10">
|
||||
<div>Testimonial 10</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
|
||||
<div class="max-w-xl mx-auto text-center">
|
||||
<h2 class="text-4xl font-bold tracking-tight sm:text-5xl dark:text-emerald-400">
|
||||
Read trusted reviews from our customers
|
||||
</h2>
|
||||
|
||||
<p class="max-w-lg mx-auto mt-4 text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
|
||||
praesentium natus sapiente commodi. Aliquid sunt tempore iste
|
||||
repellendus explicabo dignissimos placeat, autem harum dolore
|
||||
reprehenderit quis! Quo totam dignissimos earum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 gap-8 pt-16 mt-16 border-t border-gray-100 sm:grid-cols-2 lg:grid-cols-3 sm:gap-16"
|
||||
>
|
||||
<blockquote
|
||||
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
||||
>
|
||||
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
||||
</h5>
|
||||
|
||||
<footer class="flex items-center mt-6 text-gray-500">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-12 h-12 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-3 text-left">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400 ">Barry Scott</p>
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
||||
Digital Marketing at Studio
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote
|
||||
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
||||
>
|
||||
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
||||
</h5>
|
||||
|
||||
<footer class="flex items-center mt-8 text-gray-500">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-12 h-12 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-3 text-left">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
||||
Digital Marketing at Studio
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote
|
||||
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
||||
>
|
||||
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300 ">
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
||||
</h5>
|
||||
|
||||
<footer class="flex items-center mt-8 text-gray-500">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-12 h-12 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-3 text-left">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300 ">
|
||||
Digital Marketing at Studio
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote
|
||||
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
||||
>
|
||||
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
||||
</h5>
|
||||
|
||||
<footer class="flex items-center mt-8 text-gray-500">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-12 h-12 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-3 text-left">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
||||
Digital Marketing at Studio
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote
|
||||
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
||||
>
|
||||
|
||||
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
||||
</h5>
|
||||
|
||||
<footer class="flex items-center mt-8 text-gray-500 ">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-12 h-12 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-3 text-left">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
||||
Digital Marketing at Studio
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote
|
||||
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
||||
>
|
||||
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
||||
</h5>
|
||||
|
||||
<footer class="flex items-center mt-8 text-gray-500">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-12 h-12 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-3 text-left">
|
||||
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
||||
Digital Marketing at Studio
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- testimonial 10 end -->
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -17,268 +17,268 @@
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- testimonial 11 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonail 11</div>
|
||||
</section>
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<section class="bg-white">
|
||||
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
|
||||
<h2 class="text-4xl font-bold tracking-tight text-center sm:text-5xl">
|
||||
Read trusted reviews from our customers
|
||||
</h2>
|
||||
|
||||
<div class="mt-12 swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100 rounded-lg">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4">
|
||||
<div class="flex space-x-0.5 justify-center text-green-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
|
||||
<div>Testimonail 11</div>
|
||||
</section>
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800 dark:text-emerald-300 overflow-hidden">
|
||||
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
|
||||
<h2 class="text-4xl font-bold tracking-tight text-center sm:text-5xl">
|
||||
Read trusted reviews from our customers
|
||||
</h2>
|
||||
|
||||
<div class="mt-12 slider-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide " >
|
||||
<blockquote class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800 dark:border-2 dark:border-emerald-500 ">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4">
|
||||
<div class="flex space-x-0.5 justify-center text-green-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4 text-emerald-500 "
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-lg font-medium text-gray-700 dark:text-emerald-500">Katie</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
||||
voluptatem alias ut provident sapiente repellendus.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100 rounded-lg">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4">
|
||||
<div class="flex space-x-0.5 justify-center text-green-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
||||
voluptatem alias ut provident sapiente repellendus.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800 dark:border-2 dark:border-emerald-500">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4">
|
||||
<div class="flex space-x-0.5 justify-center text-green-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-lg font-medium text-gray-700 dark:text-emerald-500">Katie</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
||||
voluptatem alias ut provident sapiente repellendus.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100 rounded-lg">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4">
|
||||
<div class="flex space-x-0.5 justify-center text-green-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
||||
voluptatem alias ut provident sapiente repellendus.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800 dark:border-2 dark:border-emerald-500">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4">
|
||||
<div class="flex space-x-0.5 justify-center text-green-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-lg font-medium text-gray-700 dark:text-emerald-500">Katie</p>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
||||
voluptatem alias ut provident sapiente repellendus.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
||||
voluptatem alias ut provident sapiente repellendus.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const swiper = new Swiper('.swiper-container', {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 32,
|
||||
centeredSlides: true,
|
||||
autoplay: {
|
||||
delay: 8000,
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const swiper = new Swiper('.slider-container', {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 32,
|
||||
centeredSlides: true,
|
||||
autoplay: {
|
||||
delay: 8000,
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 1.5,
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 1.5,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<!-- testimonial 11 end -->
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<!-- testimonial 11 end -->
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
|
||||
202
public/componets/testimonial/12_testimonial.html
Normal file
202
public/componets/testimonial/12_testimonial.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
|
||||
<title>Testimonial 11</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- testimonial 12 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div> Testimonail 12</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.swiper-pagination {
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="max-w-screen-xl py-16 ml-auto sm:pl-6 lg:pl-0 mx-auto">
|
||||
<div class="mt-12 swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100 dark:bg-gray-800 dark:border-2 dark:border-emerald-600 dark:rounded ">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4 text-sm">
|
||||
<p class="font-medium">Jeff Wezos</p>
|
||||
<p class="mt-1">CEO of Shipping Company</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="relative mt-4 text-gray-500">
|
||||
<span class="text-xl">“</span>
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
|
||||
assumenda officiis sit amet itaque eveniet accusantium corporis
|
||||
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
|
||||
repellat, commodi in esse quisquam.
|
||||
|
||||
<span class="text-xl">”</span>
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4 text-sm">
|
||||
<p class="font-medium">Jeff Wezos</p>
|
||||
<p class="mt-1">CEO of Shipping Company</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="relative mt-4 text-gray-500">
|
||||
<span class="text-xl">“</span>
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
|
||||
assumenda officiis sit amet itaque eveniet accusantium corporis
|
||||
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
|
||||
repellat, commodi in esse quisquam.
|
||||
|
||||
<span class="text-xl">”</span>
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4 text-sm">
|
||||
<p class="font-medium">Jeff Wezos</p>
|
||||
<p class="mt-1">CEO of Shipping Company</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="relative mt-4 text-gray-500">
|
||||
<span class="text-xl">“</span>
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
|
||||
assumenda officiis sit amet itaque eveniet accusantium corporis
|
||||
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
|
||||
repellat, commodi in esse quisquam.
|
||||
|
||||
<span class="text-xl">”</span>
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="p-8 bg-gray-100">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
||||
alt=""
|
||||
class="object-cover w-16 h-16 rounded-full"
|
||||
/>
|
||||
|
||||
<div class="ml-4 text-sm">
|
||||
<p class="font-medium">Jeff Wezos</p>
|
||||
<p class="mt-1">CEO of Shipping Company</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="relative mt-4 text-gray-500">
|
||||
<span class="text-xl">“</span>
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
|
||||
assumenda officiis sit amet itaque eveniet accusantium corporis
|
||||
tempora, soluta perspiciatis rerum, ratione animi nemo inventore
|
||||
repellat, commodi in esse quisquam.
|
||||
|
||||
<span class="text-xl">”</span>
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const swiper = new Swiper('.slider-container', {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 32,
|
||||
centeredSlides: true,
|
||||
autoplay: {
|
||||
delay: 8000,
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 1.5,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<!-- testimonial 12 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
public/componets/testimonial/13_testimonial.html
Normal file
41
public/componets/testimonial/13_testimonial.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
|
||||
<title>Testimonial 11</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
public/componets/testimonial/14_testimonial.html
Normal file
41
public/componets/testimonial/14_testimonial.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
|
||||
<title>Testimonial 11</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
133
public/componets/testimonial/15_testimonial.html
Normal file
133
public/componets/testimonial/15_testimonial.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
|
||||
<title>Testimonial 11</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- testimonail 15 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonail 15</div>
|
||||
</section>
|
||||
<section class=" dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container flex flex-col items-center mx-auto mb-12 md:p-10 md:px-12">
|
||||
<h1 class="p-4 text-4xl font-semibold leading-none text-center">What our customers are saying about us</h1>
|
||||
</div>
|
||||
<div class="container flex flex-col items-center justify-center mx-auto lg:flex-row lg:flex-wrap lg:justify-evenly lg:px-10">
|
||||
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
|
||||
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
|
||||
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
|
||||
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
|
||||
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
|
||||
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
|
||||
<img src="https://source.unsplash.com/50x50/?portrait?1" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
|
||||
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
|
||||
<p class="text-sm uppercase">Aliquam illum</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
|
||||
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
|
||||
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
|
||||
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
|
||||
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
|
||||
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
|
||||
<img src="https://source.unsplash.com/50x50/?portrait?2" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
|
||||
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
|
||||
<p class="text-sm uppercase">Aliquam illum</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
|
||||
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
|
||||
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
|
||||
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
|
||||
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
|
||||
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
|
||||
<img src="https://source.unsplash.com/50x50/?portrait?3" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
|
||||
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
|
||||
<p class="text-sm uppercase">Aliquam illum</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
|
||||
<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12 dark:bg-coolGray-900">
|
||||
<p class="relative px-6 py-1 text-lg italic text-center dark:text-coolGray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z"></path>
|
||||
<path d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"></path>
|
||||
</svg>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus quibusdam, eligendi exercitationem molestias possimus facere.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="absolute right-0 w-8 h-8 dark:text-indigo-400">
|
||||
<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z"></path>
|
||||
<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z"></path>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center p-8 rounded-b-lg dark:bg-indigo-400 dark:text-coolGray-900">
|
||||
<img src="https://source.unsplash.com/50x50/?portrait?4" alt="" class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full dark:bg-coolGray-500 dark:bg-coolGray-700">
|
||||
<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
|
||||
<p class="text-sm uppercase">Aliquam illum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- testimonail 15 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
public/componets/testimonial/16_testimonial.html
Normal file
67
public/componets/testimonial/16_testimonial.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
|
||||
<title>Testimonial 16</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- testimonail 16 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonail 16</div>
|
||||
</section>
|
||||
<section class="p-6 dark:bg-gray-800">
|
||||
<div class="container max-w-xl mx-auto " >
|
||||
<div class="flex flex-col items-center w-full p-6 space-y-8 rounded-md lg:h-full lg:p-8 dark:bg-gray-900 dark:text-gray-100">
|
||||
<img src="https://source.unsplash.com/random/100x100?4" alt="" class="w-20 h-20 rounded-full dark:bg-gray-500">
|
||||
<blockquote class="max-w-lg text-lg italic font-medium text-center">"Et, dignissimos obcaecati. Recusandae praesentium doloribus vitae? Rem unde atque mollitia!"</blockquote>
|
||||
<div class="text-center dark:text-gray-400">
|
||||
<p>Leroy Jenkins</p>
|
||||
<p>CEO of Company Co.</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button type="button" aria-label="Page 1" class="w-2 h-2 rounded-full dark:bg-gray-50"></button>
|
||||
<button type="button" aria-label="Page 2" class="w-2 h-2 rounded-full dark:bg-gray-600"></button>
|
||||
<button type="button" aria-label="Page 3" class="w-2 h-2 rounded-full dark:bg-gray-600"></button>
|
||||
<button type="button" aria-label="Page 4" class="w-2 h-2 rounded-full dark:bg-gray-600"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- testimonail 16 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
142
public/componets/testimonial/18_testimonial.html
Normal file
142
public/componets/testimonial/18_testimonial.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<title>Testimonial 18</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- testimonail 18 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 18</div>
|
||||
</section>
|
||||
|
||||
<section class="antialiased sans-serif bg-gray-200 dark:bg-gray-800 text-gray-600 p-3">
|
||||
|
||||
<div class="my-10 md:my-24 container mx-auto flex flex-col md:flex-row shadow-sm overflow-hidden" x-data="{ testimonialActive: 2 }" x-cloak>
|
||||
<div class="relative w-full py-2 md:py-24 bg-indigo-700 md:w-1/2 flex flex-col item-center justify-center">
|
||||
|
||||
<div class="absolute top-0 left-0 z-10 grid-indigo w-16 h-16 md:w-40 md:h-40 md:ml-20 md:mt-24"></div>
|
||||
|
||||
<div class="relative text-2xl md:text-5xl py-2 px-6 md:py-6 md:px-1 md:w-64 md:mx-auto text-indigo-100 font-semibold leading-tight tracking-tight mb-0 z-20">
|
||||
<span class="md:block">What Our</span>
|
||||
<span class="md-block">Customers</span>
|
||||
<span class="block">Are Saying!</span>
|
||||
</div>
|
||||
|
||||
<div class="absolute right-0 bottom-0 mr-4 mb-4 hidden md:block">
|
||||
<button
|
||||
class="rounded-l-full border-r bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10"
|
||||
x-on:click="testimonialActive = testimonialActive === 1 ? 3 : testimonialActive - 1">
|
||||
←
|
||||
</button><button
|
||||
class="rounded-r-full bg-gray-100 text-gray-500 focus:outline-none hover:text-indigo-500 font-bold w-12 h-10"
|
||||
x-on:click="testimonialActive = testimonialActive >= 3 ? 1 : testimonialActive + 1">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-100 md:w-1/2">
|
||||
<div class="flex flex-col h-full relative">
|
||||
|
||||
<div class="absolute top-0 left-0 mt-3 ml-4 md:mt-5 md:ml-12">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="text-indigo-200 fill-current w-12 h-12 md:w-16 md:h-16" viewBox="0 0 24 24"><path d="M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35.208-.086.39-.16.539-.222.302-.125.474-.197.474-.197L9.758 4.03c0 0-.218.052-.597.144C8.97 4.222 8.737 4.278 8.472 4.345c-.271.05-.56.187-.882.312C7.272 4.799 6.904 4.895 6.562 5.123c-.344.218-.741.4-1.091.692C5.132 6.116 4.723 6.377 4.421 6.76c-.33.358-.656.734-.909 1.162C3.219 8.33 3.02 8.778 2.81 9.221c-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539.017.109.025.168.025.168l.026-.006C2.535 17.474 4.338 19 6.5 19c2.485 0 4.5-2.015 4.5-4.5S8.985 10 6.5 10zM17.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35.208-.086.39-.16.539-.222.302-.125.474-.197.474-.197L20.758 4.03c0 0-.218.052-.597.144-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162C14.219 8.33 14.02 8.778 13.81 9.221c-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539.017.109.025.168.025.168l.026-.006C13.535 17.474 15.338 19 17.5 19c2.485 0 4.5-2.015 4.5-4.5S19.985 10 17.5 10z"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="h-full relative z-10">
|
||||
<div x-show.immediate="testimonialActive === 1">
|
||||
<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 1">
|
||||
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div x-show.immediate="testimonialActive === 2">
|
||||
<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 2">
|
||||
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div x-show.immediate="testimonialActive === 3">
|
||||
<p class="text-gray-600 serif font-normal italic px-6 py-6 md:px-16 md:py-10 text-xl md:text-2xl" x-show.transition="testimonialActive == 3">
|
||||
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex my-4 justify-center items-center">
|
||||
<button
|
||||
@click.prevent="testimonialActive = 1"
|
||||
class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline inline-block rounded-full mx-2"
|
||||
:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 1, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 1 }"
|
||||
>JD</button>
|
||||
<button
|
||||
@click.prevent="testimonialActive = 2"
|
||||
class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline h-16 w-16 inline-block bg-indigo-600 rounded-full mx-2"
|
||||
:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 2, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 2 }"
|
||||
>WD</button>
|
||||
<button
|
||||
@click.prevent="testimonialActive = 3"
|
||||
class="text-center font-bold shadow-xs focus:outline-none focus:shadow-outline h-12 w-12 inline-block bg-indigo-600 rounded-full mx-2"
|
||||
:class="{'h-12 w-12 opacity-25 bg-indigo-300 text-gray-600': testimonialActive != 3, 'h-16 w-16 opacity-100 bg-indigo-600 text-white': testimonialActive == 3 }"
|
||||
>JW</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center px-6 pt-2 pb-6 md:py-6">
|
||||
<div class="text-center" x-show="testimonialActive == 1">
|
||||
<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">John Doe</h2>
|
||||
<small class="text-gray-500 text-xs md:text-sm truncate">CEO, ABC Inc.</small>
|
||||
</div>
|
||||
|
||||
<div class="text-center" x-show="testimonialActive == 2">
|
||||
<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">Winter Doe</h2>
|
||||
<small class="text-gray-500 text-xs md:text-sm truncate">CTO, XYZ Corp.</small>
|
||||
</div>
|
||||
|
||||
<div class="text-center" x-show="testimonialActive == 3">
|
||||
<h2 class="text-sm md:text-base font-bold text-gray-700 leading-tight">John Wick</h2>
|
||||
<small class="text-gray-500 text-xs md:text-sm truncate">Product Manager, Fake Corp.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
|
||||
<!-- testimonail 18 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
62
public/componets/testimonial/19_testimonial.html
Normal file
62
public/componets/testimonial/19_testimonial.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<title>Testimonial 1</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- testimonail 19 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonail 19</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 py-4">
|
||||
<div class="max-w-md mx-auto px-8 border-2 shadow-lg rounded-lg my-20">
|
||||
<div class="flex justify-center md:justify-end -mt-16">
|
||||
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-gray-800 dark:text-white text-3xl font-semibold">Design Tools</h2>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- testimonail 19 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
79
public/componets/testimonial/20_testimonial.html
Normal file
79
public/componets/testimonial/20_testimonial.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<title>Testimonial 1</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- testimonial 20 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 20</div>
|
||||
</section>
|
||||
|
||||
<div class="flex items-center justify-center px-5 py-5 dark:bg-gray-800">
|
||||
<div class="w-full mx-auto max-w-xl rounded-lg bg-white dark:bg-gray-800 shadow-lg px-5 pt-5 pb-10 text-gray-800 dark:text-gray-50">
|
||||
<div class="w-full pt-1 text-center pb-5 -mt-16 mx-auto">
|
||||
<a href="#" class="block relative">
|
||||
<img class="mx-auto object-cover rounded-full h-20 w-20 border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full mb-10">
|
||||
<div class="text-3xl text-indigo-500 text-left leading-tight h-3">
|
||||
“
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-100 text-center px-5">
|
||||
To get social media testimonials like these, keep your customers engaged with your social media accounts by posting regularly yourself
|
||||
</p>
|
||||
<div class="text-3xl text-indigo-500 text-right leading-tight h-3 -mt-3">
|
||||
”
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<p class="text-md text-indigo-500 font-bold text-center">
|
||||
Tom Hardy
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-300 text-center">
|
||||
@thom.hardy
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- testimonial 20 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
111
public/componets/testimonial/21_testimonial.html
Normal file
111
public/componets/testimonial/21_testimonial.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<title>Testimonial 1</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- testimonial 21 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 21</div>
|
||||
</section>
|
||||
<section class=" w-full pb-6 bg-gray-800">
|
||||
<div class="mx-auto bg-gradient-to-b from-blue-500 w-full md:w-60 to-blue-600 rounded-lg p-4 shadow ">
|
||||
<div class="flex items-center text-left">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="inline-block relative">
|
||||
<a href="#" class="block relative">
|
||||
<img alt="" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="mx-auto object-cover rounded-full h-16 w-16 "/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-6">
|
||||
<p class="flex items-baseline">
|
||||
<span class="text-white">
|
||||
Charlie Rabiller
|
||||
</span>
|
||||
</p>
|
||||
<div class="flex items-center mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
|
||||
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
|
||||
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
|
||||
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
|
||||
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 1792 1792">
|
||||
<path d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<p class="mt-1 max-w-xs font-light text-white">
|
||||
My first job of scanning photos at the Memories 2 Digital Photo Scanning was fantastic. She completed the work quickly while I was waiting. Thanks for a great service..
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-start text-gray-100 mt-6">
|
||||
<button class="mr-4 hover:text-white">
|
||||
<svg width="25" height="25" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1664 596q0-81-21.5-143t-55-98.5-81.5-59.5-94-31-98-8-112 25.5-110.5 64-86.5 72-60 61.5q-18 22-49 22t-49-22q-24-28-60-61.5t-86.5-72-110.5-64-112-25.5-98 8-94 31-81.5 59.5-55 98.5-21.5 143q0 168 187 355l581 560 580-559q188-188 188-356zm128 0q0 221-229 450l-623 600q-18 18-44 18t-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="hover:text-white">
|
||||
<svg width="25" height="25" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1344 1024q133 0 226.5 93.5t93.5 226.5-93.5 226.5-226.5 93.5-226.5-93.5-93.5-226.5q0-12 2-34l-360-180q-92 86-218 86-133 0-226.5-93.5t-93.5-226.5 93.5-226.5 226.5-93.5q126 0 218 86l360-180q-2-22-2-34 0-133 93.5-226.5t226.5-93.5 226.5 93.5 93.5 226.5-93.5 226.5-226.5 93.5q-126 0-218-86l-360 180q2 22 2 34t-2 34l360 180q92-86 218-86z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- testimonial 21 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
77
public/componets/testimonial/22_testimonial.html
Normal file
77
public/componets/testimonial/22_testimonial.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<title>Testimonial 1</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- testimonial 22 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonail 22</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="dark:bg-gray-800 py-20">
|
||||
<div class="bg-white dark:bg-gray-800 dark:border-2 dark:border-emerald-300 w-72 shadow-lg mx-auto rounded-xl p-4">
|
||||
<p class="text-gray-600 dark:text-white">
|
||||
<span class="font-bold text-indigo-500 text-lg">
|
||||
“
|
||||
</span>
|
||||
To get social media testimonials like these, keep your customers engaged with your social media accounts by posting regularly yourself
|
||||
<span class="font-bold text-indigo-500 text-lg">
|
||||
”
|
||||
</span>
|
||||
</p>
|
||||
<div class="flex items-center mt-4">
|
||||
<a href="#" class="block relative">
|
||||
<img alt="profil" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="mx-auto object-cover rounded-full h-10 w-10 "/>
|
||||
</a>
|
||||
<div class="flex flex-col ml-2 justify-between">
|
||||
<span class="font-semibold text-indigo-500 text-sm">
|
||||
Jean Miguel
|
||||
</span>
|
||||
<span class="dark:text-gray-400 text-xs flex items-center">
|
||||
User of Tail-Kit
|
||||
<img src="#__" class="ml-2 h-4 w-4"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- testimonial 22 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
88
public/componets/testimonial/23_testimonial.html
Normal file
88
public/componets/testimonial/23_testimonial.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<title>Testimonial 1</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- testimonial 23 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 23</div>
|
||||
</section>
|
||||
|
||||
<section class="dark:bg-gray-800">
|
||||
<div class="mx-auto py-10 px-4 w-full max-w-7xl dark:bg-gray-800 bg-gray-50">
|
||||
<div class="relative mx-auto w-full h-full max-w-5xl flex shadow-xl">
|
||||
|
||||
<div class="z-10 relative py-10 pl-8 pr-2 w-full md:w-3/5 min-h-360px rounded md:rounded-r-none bg-blue-600 bg-opacity-70 md:bg-opacity-100 text-white">
|
||||
<div class="mx-auto max-w-md flex flex-col">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="w-10 lg:w-12 h-10 lg:h-12" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
|
||||
</div>
|
||||
<p class="text-xl sm:text-2xl lg:text-3xl font-extrabold leading-normal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur aliquid, illo reiciendis voluptatum asperiores.</p>
|
||||
<h3 class="mt-2 text-base font-bold">Adam Negan </h3>
|
||||
<p class="text-sm">CEO of Bismart Enterprise</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="absolute md:relative w-full md:w-2/5 min-h-full rounded-r overflow-hidden bg-blue-600">
|
||||
<img src="https://fancytailwind.com/static/profile13-9abe52b1e8851f9e4afde349f2789d3e.jpg" alt="" class="absolute top-0 left-0 w-full h-full object-cover filter grayscale brightness-125" />
|
||||
</div>
|
||||
|
||||
<div class="z-10 absolute -bottom-5 right-1/2 md:-right-3 py-1 px-3 space-x-3 flex bg-yellow-500 text-yellow-100 transform translate-x-1/2 md:translate-x-0">
|
||||
<button type="button" aria-label="previous" class="flex-shrink-0 hover:text-white" onClick={previousTestimony}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" aria-label="next" class="flex-shrink-0 hover:text-white" onClick={nextTestimony}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- testimonial 23 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -30,24 +30,24 @@
|
||||
<a href="#_" class="flex items-center justify-center px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10">View Case Studies</a>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/2">
|
||||
<blockquote class="flex items-center justify-between w-full col-span-1 p-6 bg-white rounded-lg shadow">
|
||||
<div class="flex flex-col pr-8">
|
||||
<div class="relative pl-12">
|
||||
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
|
||||
</svg>
|
||||
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">Awesome product! And the customer service is exceptionally well.</p>
|
||||
</div>
|
||||
<blockquote class="sm:flex justify-center sm:justify-between w-full col-span-1 p-6 bg-white rounded-lg shadow">
|
||||
<div class="flex flex-col pr-8">
|
||||
<div class="relative pl-12">
|
||||
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
|
||||
</svg>
|
||||
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">Awesome product! And the customer service is exceptionally well.</p>
|
||||
</div>
|
||||
|
||||
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
|
||||
Jane Cooper
|
||||
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
||||
</h3>
|
||||
</div>
|
||||
<img class="flex-shrink-0 w-20 h-20 bg-gray-300 rounded-full xl:w-24 xl:h-24" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||
</blockquote>
|
||||
<blockquote class="flex items-center justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
|
||||
<div class="flex flex-col pr-10">
|
||||
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
|
||||
Jane Cooper
|
||||
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
||||
</h3>
|
||||
</div>
|
||||
<img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full xl:w-24 xl:h-24" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||
</blockquote>
|
||||
<blockquote class="sm:flex justify-center sm:justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
|
||||
<div class="flex flex-col pr-10 mx-auto">
|
||||
<div class="relative pl-12">
|
||||
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
|
||||
@@ -60,9 +60,9 @@
|
||||
</h3>
|
||||
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||
</div>
|
||||
<img class="flex-shrink-0 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||
<img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||
</blockquote>
|
||||
<blockquote class="flex items-center justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
|
||||
<blockquote class="sm:flex justify-center sm:justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
|
||||
<div class="flex flex-col pr-10">
|
||||
<div class="relative pl-12">
|
||||
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||
@@ -77,7 +77,7 @@
|
||||
</h3>
|
||||
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||
</div>
|
||||
<img class="flex-shrink-0 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rrb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||
<img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rrb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,82 @@
|
||||
</button>
|
||||
|
||||
|
||||
<!-- testimonial 6 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 6</div>
|
||||
</section>
|
||||
<section class="py-20 dark:bg-gray-800 ">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="max-w-lg mx-auto mb-12 text-center">
|
||||
<img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
|
||||
<h2 class="my-2 text-3xl md:text-4xl font-bold font-heading dark:text-emerald-500">Lorem ipsum dolor sit amet consectutar domor</h2>
|
||||
<p class="text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap max-w-5xl mx-auto mb-6">
|
||||
<div class="w-full md:w-1/2 px-3 mb-6">
|
||||
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
||||
<div class="pl-4">
|
||||
<p class="text-xl dark:text-white">John Bailey</p>
|
||||
<p class="text-teal-600">CEO</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-loose text-black dark:text-gray-300">
|
||||
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 px-3 mb-6">
|
||||
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
||||
<div class="pl-4">
|
||||
<p class="text-xl dark:text-white">Julie Bailey</p>
|
||||
<p class="text-teal-600">Head of Development</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-loose text-black dark:text-gray-300">
|
||||
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 px-3 mb-6">
|
||||
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
||||
<div class="pl-4">
|
||||
<p class="text-xl dark:text-white">Julie Bailey</p>
|
||||
<p class="text-teal-600">Head of Operations</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-loose text-black dark:text-gray-300">
|
||||
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 px-3 mb-6">
|
||||
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
||||
<div class="flex items-center mb-4">
|
||||
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
||||
<div class="pl-4">
|
||||
<p class="text-xl dark:text-white">Tom Brown</p>
|
||||
<p class="text-teal-600">Head of Development</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="leading-loose text-black dark:text-gray-300">
|
||||
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center"><a class="inline-block py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Show more Testimonials</a></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- testimonial 6 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -16,6 +16,70 @@
|
||||
|
||||
|
||||
|
||||
<!-- testimonial 7 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 7</div>
|
||||
</section>
|
||||
<div class="flex items-center justify-center min-h-screen dark:bg-gray-800 bg-white min-w-screen">
|
||||
<div class="px-10 ">
|
||||
<div class="container flex flex-col items-center justify-center py-12 mx-auto">
|
||||
<p class="text-lg font-medium tracking-wider text-teal-500 uppercase">Testimonials</p>
|
||||
<h2 class="max-w-3xl pr-12 text-5xl font-bold dark:text-white text-center">People Like Us 🥰</h2>
|
||||
<div class="items-center justify-center w-full mt-16 mb-4 lg:flex">
|
||||
<div class="flex flex-col items-start justify-start w-full h-auto mb-12 lg:w-1/3 lg:mb-0">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
|
||||
<img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
|
||||
class="object-cover w-full h-full">
|
||||
</div>
|
||||
<div class="flex flex-col items-start justify-center">
|
||||
<h4 class="font-bold text-gray-800 dark:text-white">John Doe</h4>
|
||||
<p class="text-gray-600 dark:text-teal-500">CEO of Something</p>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="mt-8 text-lg text-gray-500">"This is some rad shit! Pop lockin, Boom shockin
|
||||
radical. I
|
||||
immediately wet my pants after trying this service."</blockquote>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-start justify-start w-full h-auto px-0 mx-0 mb-12 border-l border-r border-transparent lg:w-1/3 lg:mb-0 lg:px-8 lg:mx-8 lg:border-gray-200">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
|
||||
<img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2547&q=80"
|
||||
class="object-cover w-full h-full">
|
||||
</div>
|
||||
<div class="flex flex-col items-start justify-center">
|
||||
<h4 class="font-bold text-gray-800 dark:text-white">Jane Doe</h4>
|
||||
<p class="text-gray-600 dark:text-teal-500">CTO of Business</p>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="mt-8 text-lg text-gray-500">"Thanks for creating this service. My life is so much
|
||||
easier.
|
||||
Thanks for making such a great product."</blockquote>
|
||||
</div>
|
||||
<div class="flex flex-col items-start justify-start w-full h-auto lg:w-1/3">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-16 h-16 mr-4 overflow-hidden bg-gray-200 rounded-full">
|
||||
<img src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1256&q=80"
|
||||
class="object-cover w-full h-full">
|
||||
</div>
|
||||
<div class="flex flex-col items-start justify-center">
|
||||
<h4 class="font-bold text-gray-800 dark:text-white">John Smith</h4>
|
||||
<p class="text-gray-600 dark:text-teal-500">Creator of Stuff</p>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="mt-8 text-lg text-gray-500">"Packed with awesome content and exactly what I was
|
||||
looking
|
||||
for. I would highly recommend this to anyone."</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- testimonial 7 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
@@ -14,6 +14,104 @@
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- testimonial 8 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 8</div>
|
||||
</section>
|
||||
<div class="bg-gray-100 dark:bg-gray-800">
|
||||
<div class="max-w-6xl px-6 py-8 mx-auto md:px-12">
|
||||
<div class="items-center -mx-6 md:flex md:-mx-12">
|
||||
<div class="w-full px-10 mt-16 md:w-1/2 md:mt-0">
|
||||
<div class="overflow-hidden bg-white dark:bg-gray-800 dark:border-2 dark:border-emerald-500 rounded-lg shadow-xl">
|
||||
<img class="w-full" loading="lazy"
|
||||
src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"
|
||||
alt="Portrait of Irene Sims, VP of Sales">
|
||||
<div class="p-12">
|
||||
<blockquote class="text-lg italic dark:text-emerald-400 text-gray-800">
|
||||
<div class="absolute -mt-2 -ml-2 pin-t pin-l">
|
||||
<svg class="w-8 h-8" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.264 19.552C15.264 23.2 17.664 25.12 20.352 25.12C23.328 25.12 26.112 22.624 26.112 19.456C26.112 16.864 24.288 15.136 22.08 15.136C21.888 15.136 21.408 15.136 21.312 15.136C22.368 12.064 25.824 8.8 29.376 7.072L26.4 4C20.448 6.976 15.264 13.504 15.264 19.552ZM0 19.552C0 23.2 2.304 25.12 5.088 25.12C8.064 25.12 10.848 22.624 10.848 19.456C10.848 16.864 8.928 15.136 6.72 15.136C6.528 15.136 6.048 15.136 5.952 15.136C7.008 12.064 10.56 8.8 14.016 7.072L11.136 4C5.184 6.976 0 13.504 0 19.552Z"
|
||||
class="text-gray-300 dark:text-emerald-300 dark:opacity-25 fill-current"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<p>
|
||||
This service rocks on a whole new level. You've got to try it out for yourself.
|
||||
</p>
|
||||
</div>
|
||||
</blockquote>
|
||||
<div class="mt-10">
|
||||
<div>
|
||||
<div class="font-semibold tracking-wider text-gray-900 dark:text-white uppercase">
|
||||
Irene Sims
|
||||
</div>
|
||||
<div class="text-gray-700 dark:text-emerald-400">VP of Sales, SomeCompany</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-6 md:w-1/2 md:px-12 pt-5 md:pt-0">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white dark:border-b-2 dark:text-center dark:border-emerald-400">Crafted with Awesomeness</h2>
|
||||
<div class="flex mt-10 dark:text-emerald-500">
|
||||
<div>
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-2 ml-4">
|
||||
<div class="text-lg font-semibold">Radical Feature Set</div>
|
||||
<p class="mt-2 text-gray-700 dark:text-gray-300">
|
||||
Filled to the rim with radical features and rock'n sock'n tools. You'll be glad you signed
|
||||
up.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-10 dark:text-emerald-500">
|
||||
<div>
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-2 ml-4">
|
||||
<div class="text-lg font-semibold">Lightning Fast Speed</div>
|
||||
<p class="mt-2 text-gray-700 dark:text-gray-300">
|
||||
Built and crafted with speed to take your game back to the next-level. 1.21 GigaWatts!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-10 dark:text-emerald-500">
|
||||
<div>
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-2 ml-4">
|
||||
<div class="text-lg font-semibold">Fully Customizable</div>
|
||||
<p class="mt-2 text-gray-700 dark:text-gray-300">
|
||||
Every element and component is customizable to fit the needs of your application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- testimonial 8 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<title>Testimonial 9</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -14,6 +16,208 @@
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- testimonial 9 start -->
|
||||
<section class="section_divider">
|
||||
<div>Testimonial 9</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bg-gray-100 dark:bg-gray-800">
|
||||
<div class="px-4 py-16 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 max-w-[1340px]">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
|
||||
<div class="max-w-xl space-y-8">
|
||||
<h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
|
||||
|
||||
<p class="max-w-lg text-lg text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
|
||||
fugit a culpa sunt id!
|
||||
</p>
|
||||
|
||||
<div class="hidden lg:flex">
|
||||
<button
|
||||
class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 transform -rotate-180"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="-mx-6 lg:col-span-2 lg:mx-0 ">
|
||||
<div class="swiper-container overflow-hidden">
|
||||
<div class="swiper-wrapper ">
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
|
||||
<div>
|
||||
<div class="flex space-x-0.5 text-green-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="mt-4 text-lg text-gray-600">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
|
||||
quasi sunt necessitatibus dolorem ab laudantium vel.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
|
||||
<div>
|
||||
<div class="flex space-x-0.5 text-green-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="mt-4 text-lg text-gray-600">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
|
||||
quasi sunt necessitatibus dolorem ab laudantium vel.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-8 lg:hidden">
|
||||
<button
|
||||
class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 transform -rotate-180"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
||||
aria-label="next-slide"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const swiper = new Swiper('.swiper-container', {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 32,
|
||||
autoplay: {
|
||||
delay: 2000,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.next-button',
|
||||
prevEl: '.prev-button',
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 1.5,
|
||||
centeredSlides: true,
|
||||
},
|
||||
1024: {
|
||||
centeredSlides: false,
|
||||
slidesPerView: 1.5,
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- testimonial 9 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user