83 lines
5.4 KiB
PHP
83 lines
5.4 KiB
PHP
<?php include '../assests/data/testimonialsdata.php'; ?>
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hotel Website - About Us</title>
|
|
<link rel="stylesheet" href="../assests/css/styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
|
|
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="./style/animation.css">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body>
|
|
<section class="bgtest" id="testimonials">
|
|
<div id="default-carousel" class="relative w-full px-2 md:py-0 py-4 md:px-[200px] top-[140px]" data-carousel="slide">
|
|
<!-- Carousel wrapper -->
|
|
<div class="relative h-80 overflow-hidden rounded-lg sm:h-72 md:h-96">
|
|
<?php foreach ($testimonials as $index => $testimonial): ?>
|
|
<div class="<?= $index === 0 ? '' : 'hidden'; ?> duration-700 ease-in-out" data-carousel-item>
|
|
<div class="flex-shrink-0 w-full p-4">
|
|
<div class="bg-white shadow-lg rounded-lg p-6">
|
|
<p class="text-[#ffd700] text-2xl font-bold text-center mb-4">
|
|
<?= str_repeat('★', $testimonial['rating']); ?>
|
|
</p>
|
|
<p class="text-[#C03030] font-bold italic text-center mb-6">
|
|
“<?= $testimonial['review']; ?>”
|
|
</p>
|
|
<p class="text-gray-600 text-center font-medium">
|
|
<?= $testimonial['author']; ?>
|
|
</p>
|
|
<div class="flex justify-center mt-2">
|
|
<img src="<?= $testimonial['image']; ?>" alt="Reviewer" class="w-12 h-auto">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<!-- Slider indicators -->
|
|
<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
|
|
<button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
|
|
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
|
|
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
|
|
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
|
|
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
|
|
</div>
|
|
<!-- Slider controls -->
|
|
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
|
|
</svg>
|
|
<span class="sr-only">Previous</span>
|
|
</span>
|
|
</button>
|
|
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
|
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
|
</svg>
|
|
<span class="sr-only">Next</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bgfixedimg">
|
|
<div class="flex items-center justify-center h-full bg-cover bg-center" style="background-image: url('path-to-your-image.jpg');">
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|