119 lines
6.5 KiB
PHP
119 lines
6.5 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</title>
|
|
<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">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="../assests/js/nav.js"></script>
|
|
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
padding-top: 4rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<section>
|
|
<nav class="bg-black border-gray-200 dark:bg-gray-900 navbar-fixed shadow-md" id="navbar">
|
|
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto py-4 px-6">
|
|
<!-- Logo Section -->
|
|
<a href="./" class="flex items-center space-x-3 rtl:space-x-reverse">
|
|
<img src="../assests/images/logo-1.png" class="h-8 w-[160px]" alt="Flowbite Logo" id="logo" />
|
|
</a>
|
|
<!-- Hamburger menu for mobile -->
|
|
<button data-collapse-toggle="navbar-default" type="button"
|
|
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
|
aria-controls="navbar-default" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M1 1h15M1 7h15M1 13h15" />
|
|
</svg>
|
|
</button>
|
|
<!-- Navbar Links -->
|
|
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
|
<ul class="headul font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
|
<li>
|
|
<a href="http://localhost/hotelsite/templates/#home"
|
|
class="home block py-2 px-3 text-[#EE2842] bg-blue-700 rounded md:bg-transparent md:text-[#EE2842] md:p-0 dark:text-[#EE2842] md:dark:text-[#EE2842]">
|
|
Home
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://localhost/hotelsite/templates/#about"
|
|
class="block py-2 px-3 text-[#8a8a8a] rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#EE2842] md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
About
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://localhost/hotelsite/templates/#menu"
|
|
class="block py-2 px-3 text-[#8a8a8a] rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#EE2842] md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
Menu
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://localhost/hotelsite/templates/#testimonials"
|
|
class="block py-2 px-3 text-[#8a8a8a] rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#EE2842] md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
Testimonials
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://localhost/hotelsite/templates/#events"
|
|
class="block py-2 px-3 text-[#8a8a8a] rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#EE2842] md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
Events
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://localhost/hotelsite/templates/#reservation"
|
|
class="block py-2 px-3 text-[#8a8a8a] rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#EE2842] md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
|
Reservations
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</section>
|
|
|
|
<script>
|
|
const navbar = document.getElementById('navbar');
|
|
const navLinks = document.querySelectorAll('#navbar ul a');
|
|
const logo = document.getElementById('logo');
|
|
|
|
window.onscroll = function () {
|
|
if (window.scrollY > 50) {
|
|
navbar.style.backgroundColor = '#C03030';
|
|
navLinks.forEach(link => {
|
|
link.style.color = '#FFFFFF';
|
|
});
|
|
|
|
logo.src = "../assests/images/logo-2.png";
|
|
} else {
|
|
navbar.style.backgroundColor = '#000000';
|
|
navLinks.forEach(link => {
|
|
link.style.color = '';
|
|
});
|
|
|
|
logo.src = "../assests/images/logo-1.png";
|
|
}
|
|
};
|
|
</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>
|