56 lines
3.0 KiB
PHP
56 lines
3.0 KiB
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">
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<section class="bgmenu" id="menu">
|
||
|
|
<div class="md:container mx-auto px-6 sm:px-14 py-8 relative md:top-0 top-[220px]">
|
||
|
|
<div class="grid grid-cols-2 gap-8">
|
||
|
|
<?php
|
||
|
|
// Data for menu items (could be fetched from a database or array)
|
||
|
|
$menuItems = [
|
||
|
|
['title' => 'Dinner', 'image' => '../assests/images/menu-image-one.jpg', 'link' => '#dinner-menu'],
|
||
|
|
['title' => 'Lunch', 'image' => '../assests/images/menu-image-two.jpg', 'link' => '#lunch-menu'],
|
||
|
|
['title' => 'Bar', 'image' => '../assests/images/menu-image-three.jpg', 'link' => '#lunch-menu'],
|
||
|
|
['title' => 'Desserts', 'image' => '../assests/images/menu-image-four.jpg', 'link' => '#lunch-menu']
|
||
|
|
];
|
||
|
|
|
||
|
|
foreach ($menuItems as $item) {
|
||
|
|
echo '
|
||
|
|
<div class="relative md:bottom-[0px] bottom-[50px] bg-white shadow-lg rounded-lg overflow-hidden group border-4 border-solid border-white">
|
||
|
|
<!-- Inner White Border -->
|
||
|
|
<div class="absolute inset-0 border-2 border-white m-2 rounded-lg z-10"></div>
|
||
|
|
<img src="' . $item['image'] . '" alt="' . $item['title'] . '" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
|
||
|
|
|
||
|
|
<!-- Overlay -->
|
||
|
|
<div class="menu-overlay"></div>
|
||
|
|
|
||
|
|
<!-- Title and Link Positioned Outside of Overlay -->
|
||
|
|
<div class="absolute inset-0 flex justify-center items-center text-center z-20">
|
||
|
|
<div>
|
||
|
|
<h3 class="text-xl sm:text-2xl lg:text-3xl font-bold text-white">' . $item['title'] . '</h3>
|
||
|
|
<a href="' . $item['link'] . '" class="mt-4 text-sm sm:text-base lg:text-lg inline-block py-2 px-4 rounded-full
|
||
|
|
text-white hover:text-[#EE2842] transition duration-300">View Menu<i class="fa-solid fa-arrow-right ml-2"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>';
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|