Aashish_Nepal/Hotel-Website-Landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Aashish_Nepal
2024-12-11 15:19:08 +05:45
commit bfb8fc5fb4
29 changed files with 1017 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
includes/footer.php Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer</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="bgfoot" id="footer">
<footer class="py-10 text-gray-200">
<div class="container mx-auto px-4">
<!-- Top Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center md:text-left">
<!-- Mailing List -->
<div>
<h2 class="text-xl font-bold">Join Our Mailing List</h2>
<p class="text-sm mt-2">Sign up now and get news and special offers.</p>
<form action="#" method="POST" class="mt-4 flex justify-center md:justify-start">
<input type="email" name="email" placeholder="Enter Your Email Address"
class="p-2 w-full md:w-auto flex-grow rounded-l-lg bg-white text-black">
<button type="submit"
class="bg-red-500 px-4 py-2 rounded-r-lg text-white hover:bg-red-600">
<i class="fas fa-envelope"></i>
</button>
</form>
</div>
<!-- Social Media Links -->
<div>
<h2 class="text-xl font-bold">Stay Connected</h2>
<p class="text-sm mt-2">Follow us on social media channels</p>
<div class="flex justify-center md:justify-start mt-4 space-x-4 text-xl">
<a href="#" class="text-[#F2A057] hover:text-white"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-[#F2A057] hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-[#F2A057] hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-[#F2A057] hover:text-white"><i class="fab fa-youtube"></i></a>
</div>
</div>
<!-- Awards -->
<div>
<h2 class="text-xl font-bold">Our Awards</h2>
<div class="flex justify-center md:justify-start mt-4 space-x-4">
<img src="../assests/images/footer-image.png" alt="Award 1" class="h-12">
</div>
</div>
</div>
<!-- Bottom Section -->
<div class="border-t border-gray-700 mt-8 pt-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<nav class="space-x-4 text-sm text-gray-400">
<a href="#" class="hover:text-orange-500">Home</a>
<a href="#" class="hover:text-orange-500">About</a>
<a href="#" class="hover:text-orange-500">Menu</a>
<a href="#" class="hover:text-orange-500">News</a>
<a href="#" class="hover:text-orange-500">Contact</a>
<a href="#" class="hover:text-orange-500">Reservation</a>
</nav>
<p class="mt-4 md:mt-0 text-sm text-gray-400">
Copyright &copy; <?php echo date("Y"); ?> Hotels.com. All Rights Reserved.
</p>
</div>
</div>
</div>
</footer>
</section>
</body>
</html>

118
includes/header.php Normal file
View File

@ -0,0 +1,118 @@
<!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>

82
includes/testimonials.php Normal file
View File

@ -0,0 +1,82 @@
<?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>