198 lines
8.2 KiB
PHP
198 lines
8.2 KiB
PHP
|
<?php include('../includes/header.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</title>
|
||
|
|
<link rel="stylesheet" href="../assests/css/styles.css">
|
||
|
|
<link rel="stylesheet" href="../assests/css/header.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
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css" />
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<section id="home">
|
||
|
|
<div
|
||
|
|
id="carouselExampleCaptions"
|
||
|
|
class="relative"
|
||
|
|
data-twe-carousel-init
|
||
|
|
data-twe-ride="carousel">
|
||
|
|
<!--Carousel indicators-->
|
||
|
|
<div
|
||
|
|
class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
|
||
|
|
data-twe-carousel-indicators>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
data-twe-target="#carouselExampleCaptions"
|
||
|
|
data-twe-slide-to="0"
|
||
|
|
data-twe-carousel-active
|
||
|
|
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
|
||
|
|
aria-current="true"
|
||
|
|
aria-label="Slide 1"></button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
data-twe-target="#carouselExampleCaptions"
|
||
|
|
data-twe-slide-to="1"
|
||
|
|
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
|
||
|
|
aria-label="Slide 2"></button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
data-twe-target="#carouselExampleCaptions"
|
||
|
|
data-twe-slide-to="2"
|
||
|
|
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
|
||
|
|
aria-label="Slide 3"></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--Carousel items-->
|
||
|
|
<div
|
||
|
|
class="relative w-full overflow-hidden after:clear-both after:block after:content-[''] z-0">
|
||
|
|
<!--First item-->
|
||
|
|
<div
|
||
|
|
class="relative float-left -mr-[100%] md:h-[510px] hidden w-full transition-transform duration-[700ms] ease-in-out motion-reduce:transition-none"
|
||
|
|
data-twe-carousel-active
|
||
|
|
data-twe-carousel-item
|
||
|
|
style="backface-visibility: hidden">
|
||
|
|
<img
|
||
|
|
src="../assests/images/carousel-img-one.jpg"
|
||
|
|
class="block w-full"
|
||
|
|
alt="..." />
|
||
|
|
<div
|
||
|
|
class="absolute inset-x-[15%] bottom-[30%] hidden py-5 flex flex-col items-start text-white space-y-4 md:block">
|
||
|
|
<h5 class="text-5xl font-bold">Meat, Eat, Enjoy <br>The True Taste</h5>
|
||
|
|
<div class="flex space-x-4">
|
||
|
|
<button
|
||
|
|
class="px-4 py-2 text-white bg-[#C03030] rounded hover:bg-red-600 transition duration-300">
|
||
|
|
Order Now
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="px-4 py-2 text-red-500 border border-red-500 rounded hover:bg-[#C03030] hover:text-white transition duration-300">
|
||
|
|
Learn More
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--Second item-->
|
||
|
|
<div
|
||
|
|
class="relative float-left -mr-[100%] md:h-[510px] hidden w-full transition-transform duration-[700ms] ease-in-out motion-reduce:transition-none"
|
||
|
|
data-twe-carousel-item
|
||
|
|
style="backface-visibility: hidden">
|
||
|
|
<img
|
||
|
|
src="../assests/images/carousel-img-two.jpg"
|
||
|
|
class="block w-full"
|
||
|
|
alt="..." />
|
||
|
|
<div
|
||
|
|
class="absolute inset-x-[15%] bottom-[30%] hidden py-5 flex flex-col items-start text-white space-y-4 md:block">
|
||
|
|
<h5 class="text-5xl font-bold">We Only Serve Real Steak</h5>
|
||
|
|
<div class="flex space-x-4">
|
||
|
|
<button
|
||
|
|
class="px-4 py-2 text-white bg-[#C03030] rounded hover:bg-red-600 transition duration-300">
|
||
|
|
Order Now
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="px-4 py-2 text-red-500 border border-red-500 rounded hover:bg-[#C03030] hover:text-white transition duration-300">
|
||
|
|
Learn More
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--Third item-->
|
||
|
|
<div
|
||
|
|
class="relative float-left -mr-[100%] md:h-[510px] hidden w-full transition-transform duration-[700ms] ease-in-out motion-reduce:transition-none"
|
||
|
|
data-twe-carousel-item
|
||
|
|
style="backface-visibility: hidden">
|
||
|
|
<img
|
||
|
|
src="../assests/images/carousel-img-three.jpg"
|
||
|
|
class="block w-full"
|
||
|
|
alt="..." />
|
||
|
|
<div
|
||
|
|
class="absolute inset-x-[15%] bottom-[30%] hidden py-5 flex flex-col items-start text-white space-y-4 md:block">
|
||
|
|
<h5 class="text-5xl font-bold">A Moment of <br>Full Crunchiness</h5>
|
||
|
|
<div class="flex space-x-4">
|
||
|
|
<button
|
||
|
|
class="px-4 py-2 text-white bg-[#C03030] rounded hover:bg-red-600 transition duration-300">
|
||
|
|
Order Now
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="px-4 py-2 text-red-500 border border-red-500 rounded hover:bg-[#C03030] hover:text-white transition duration-300">
|
||
|
|
Learn More
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--Carousel controls - prev item-->
|
||
|
|
<button
|
||
|
|
class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
|
||
|
|
type="button"
|
||
|
|
data-twe-target="#carouselExampleCaptions"
|
||
|
|
data-twe-slide="prev">
|
||
|
|
<span class="inline-block h-8 w-8">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke-width="1.5"
|
||
|
|
stroke="currentColor"
|
||
|
|
class="h-6 w-6">
|
||
|
|
<path
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
|
||
|
|
>Previous</span
|
||
|
|
>
|
||
|
|
</button>
|
||
|
|
<!--Carousel controls - next item-->
|
||
|
|
<button
|
||
|
|
class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
|
||
|
|
type="button"
|
||
|
|
data-twe-target="#carouselExampleCaptions"
|
||
|
|
data-twe-slide="next">
|
||
|
|
<span class="inline-block h-8 w-8">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke-width="1.5"
|
||
|
|
stroke="currentColor"
|
||
|
|
class="h-6 w-6">
|
||
|
|
<path
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
|
||
|
|
>Next</span
|
||
|
|
>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<?php include('about.php'); ?>
|
||
|
|
<?php include('menu.php'); ?>
|
||
|
|
<?php include '../includes/testimonials.php'; ?>
|
||
|
|
<?php include('events.php'); ?>
|
||
|
|
<?php include('reservation.php'); ?>
|
||
|
|
<?php include('../includes/footer.php'); ?>
|
||
|
|
<script src="./scripts/nav.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|