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

81
templates/about.php Normal file
View File

@ -0,0 +1,81 @@
<?php
// Include the about data
include('../assests/data/aboutdata.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="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="../assests/css/styles.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section id="about" class="bg-gray-100 bgabout">
<div class="md:container mx-auto py-12 px-4 sm:px-6 lg:px-8">
<!-- About Section -->
<div class="grid grid-cols-1 md:grid-cols-2 items-center gap-8">
<!-- Text Content -->
<div class="max-w-lg">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">About Us</h2>
<p class="mt-4 text-gray-600 text-base sm:text-lg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros at lacus feugiat hendrerit sed ut tortor. Suspendisse et magna quis elit efficitur consequat. Mauris eleifend velit a pretium iaculis. Donec sagittis velit et magna euismod, vel aliquet nulla malesuada. Nunc pharetra massa lectus, a fermentum arcu volutpat vel.
</p>
<div class="mt-8">
<a href="#" class="text-blue-500 hover:text-blue-600 font-medium">
Learn more about us <span class="ml-2">&#8594;</span>
</a>
</div>
</div>
<!-- Image Content -->
<div class="mt-12 md:mt-0">
<img src="../assests/images/about-image.jpg"
alt="About Us Image"
class="object-cover rounded-lg shadow-md w-full max-w-sm md:max-w-4xl mx-auto md:h-[350px] h-[0px]">
</div>
</div>
<!-- Icon Section -->
<div class="grid md:grid-cols-1 gap-8 mt-[75px]">
<?php foreach (array_chunk($aboutdata, 3) as $chunk) : ?>
<div class="p-4 shadow-xl bg-white border-double border-t-8 border-[#C03030] relative bottom-[80px]">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<?php foreach ($chunk as $item) : ?>
<div class="text-start flex items-start">
<!-- Icon -->
<div>
<div class="flex items-center justify-center h-12 w-12 rounded-full mr-4 <?php echo $item['icon_color']; ?> bg-gray-200">
<i class="<?php echo $item['icon']; ?> text-2xl"></i>
</div>
</div>
<!-- Content -->
<div>
<h3 class="mt-2 text-lg font-semibold text-gray-900">
<?php echo $item['name']; ?>
</h3>
<p class="mt-1 text-gray-600 text-sm">
<?php echo $item['description']; ?>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
</body>
</html>

93
templates/events.php Normal file
View File

@ -0,0 +1,93 @@
<?php
// Include the about data
include('../assests/data/contactdata.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events</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="bgevents" id="events">
<div class="container mx-auto py-12 sm:px-6 lg:px-8">
<!-- Event Section -->
<div class="grid grid-cols-1 md:grid-cols-2 items-center gap-8">
<!-- Text Content -->
<div>
<h2 class="text-5xl font-bold text-gray-800 mb-4">Upcoming Event</h2>
<h3 class="text-2xl font-semibold text-[#C03030] mb-2">BBQ Party | April 28, 2021 | 6 PM - 9 PM</h3>
<p class="text-gray-600 mb-6">
Aenean auctor wisi et urna, Aliquam erat volutpat. Duis ac turpis, Integer rutrum ante eu lacus.
Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus.
</p>
<a href="#reservation" class="bg-[#C03030] text-white font-semibold py-2 px-6 rounded-lg hover:bg-red-600 transition duration-300">
Make a Reservation
</a>
</div>
<!-- Image Content -->
<div class="mt-12 md:mt-0">
<img src="../assests/images/event-image.png"
alt="Event Image"
class="object-cover rounded-lg shadow-md w-full max-w-sm md:max-w-5xl mx-auto">
</div>
</div>
</div>
</section>
<section class="map animation-trigger">
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d56516.27776826243!2d85.2849327133915!3d27.709030242271083!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb198a307baabf%3A0xb5137c1bf18db1ea!2sKathmandu%2044600!5e0!3m2!1sen!2snp!4v1733210258251!5m2!1sen!2snp"
width="100%"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="iframe-map"
></iframe>
</div>
</section>
<section class="contactInfo">
<div class="grid grid-cols-1 gap-8 mt-20">
<div class="p-6 shadow-xl bg-white border-double border-t-8 border-[#C03030] relative bottom-[80px]">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<?php foreach ($contactdata as $item) : ?>
<div class="text-start flex items-start">
<!-- Icon -->
<div>
<div class="flex items-center justify-center h-12 w-12 rounded-full mr-4 <?php echo $item['icon_color']; ?> bg-gray-200">
<i class="<?php echo $item['icon']; ?> text-2xl"></i>
</div>
</div>
<!-- Content -->
<div>
<h3 class="mt-2 text-lg font-semibold text-gray-900">
<?php echo $item['description']; ?>
</h3>
<p class="mt-1 text-gray-600 text-sm">
<?php echo $item['name']; ?>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
</body>
</html>

198
templates/home.php Normal file
View File

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

28
templates/index.php Normal file
View File

@ -0,0 +1,28 @@
<?php
$section = $_GET['section'] ?? 'home';
switch ($section) {
case 'home':
include 'home.php';
break;
case 'about':
include 'about.php';
break;
case 'menu':
include 'menu.php';
break;
case 'testimonials':
include 'testimonials.php';
break;
case 'events':
include 'events.php';
break;
case 'reservations':
include 'reservations.php';
break;
default:
include '404.php';
break;
}
?>

55
templates/menu.php Normal file
View File

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

64
templates/reservation.php Normal file
View File

@ -0,0 +1,64 @@
<!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="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="" id="reservation">
<div class="bg-[#C03030] w-full max-w-full mx-auto p-4 md:p-8 flex flex-col md:flex-row items-center justify-between">
<!-- Left Side: Reservation Title -->
<div class="md:w-1/2 mb-6 md:mb-0 ">
<h1 class="text-2xl md:text-left md:text-5xl font-bold text-white">Make a <span class="md:flex md:flex-col">Reservation</span></h1>
</div>
<!-- Right Side: Reservation Form -->
<div class="w-full md:w-1/2">
<form action="#" class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-2">
<!-- Date Input -->
<div class="flex items-center space-x-2 w-full md:w-auto">
<span class="text-[#F2A057] text-lg">
<i class="fas fa-calendar-alt"></i>
</span>
<div class="flex flex-col ">
<input type="date" class="py-2 px-4 rounded-lg shadow-sm text-gray-700 md:mt-[28px]" placeholder="Date">
<p class="text-white mt-2 text-sm">Powered by OpenTable</p>
</div>
</div>
<!-- Time Input -->
<div class="flex items-center space-x-2 w-full md:w-auto">
<span class="text-[#F2A057] text-lg">
<i class="fas fa-clock"></i>
</span>
<input type="time" class="py-2 px-4 rounded-lg shadow-sm text-gray-700" value="14:00">
</div>
<!-- Guest Number -->
<div class="flex items-center space-x-2 w-full md:w-auto">
<span class="text-[#F2A057] text-lg">
<i class="fas fa-users"></i>
</span>
<input type="number" class="py-2 px-4 rounded-lg shadow-sm text-gray-700" placeholder="Guest Number">
</div>
<!-- Book a Table Button -->
<button type="submit" class="bg-gray-800 text-white py-2 px-8 rounded-lg shadow hover:bg-white hover:text-gray-800 transition duration-300 mt-4 md:mt-0 w-full md:w-auto">
Book a Table
</button>
</form>
</div>
</div>
</section>
</body>
</html>