Initial commit
This commit is contained in:
Aashish_Nepal
commit
bfb8fc5fb4
37
assests/css/header.css
Normal file
37
assests/css/header.css
Normal file
@ -0,0 +1,37 @@
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
|
||||
.navbar-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
width: 100%;
|
||||
padding: 0 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-fixed.bg-red-500 a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar-fixed ul {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.navbar-fixed.bg-red-500 ul {
|
||||
background-color: #C03030;
|
||||
}
|
||||
|
||||
|
||||
75
assests/css/styles.css
Normal file
75
assests/css/styles.css
Normal file
@ -0,0 +1,75 @@
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.group:hover .menu-overlay {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.headul{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.headul .home{
|
||||
font-weight: bolder
|
||||
}
|
||||
|
||||
.headul a{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bgabout {
|
||||
background-image: url(https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2021/01/1920x744_bg1.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
|
||||
.bgmenu {
|
||||
background-image: url(https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2021/01/tomatos.png);
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.bgtest{
|
||||
background-image: url(https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2020/12/1920x664_bg1.jpg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.bgfixedimg{
|
||||
background-image: url('https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2021/01/1920x1000_bg1.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.bgevents{
|
||||
background-image: url('https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2021/01/1920x648_bg1.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bgfoot{
|
||||
background-image: url('https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2020/12/1920x568_fbg1.jpg');
|
||||
}
|
||||
27
assests/data/aboutdata.php
Normal file
27
assests/data/aboutdata.php
Normal file
@ -0,0 +1,27 @@
|
||||
<?php
|
||||
|
||||
|
||||
$aboutdata = [
|
||||
[
|
||||
'name' => 'Premium Quality',
|
||||
'description' => 'Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, cursus elementum vel cursus.',
|
||||
'icon' => 'fas fa-thumbs-up',
|
||||
'bg_color' => 'bg-red-100',
|
||||
'icon_color' => 'text-red-500',
|
||||
],
|
||||
[
|
||||
'name' => '100% ECO Ingredients',
|
||||
'description' => 'Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus.',
|
||||
'icon' => 'fas fa-leaf',
|
||||
'bg_color' => 'bg-green-100',
|
||||
'icon_color' => 'text-green-500',
|
||||
],
|
||||
[
|
||||
'name' => 'Wood-burned Grill',
|
||||
'description' => 'Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue.',
|
||||
'icon' => 'fas fa-fire',
|
||||
'bg_color' => 'bg-yellow-100',
|
||||
'icon_color' => 'text-yellow-500',
|
||||
]
|
||||
];
|
||||
?>
|
||||
23
assests/data/contactdata.php
Normal file
23
assests/data/contactdata.php
Normal file
@ -0,0 +1,23 @@
|
||||
<?php
|
||||
// Example data for the "Contact Us" section
|
||||
$contactdata = [
|
||||
[
|
||||
"icon" => "fas fa-phone", // Font Awesome class or custom icon
|
||||
"icon_color" => "text-red-500", // Tailwind color classes
|
||||
"name" => "Contact Us",
|
||||
"description" => "+1 800 603 6035<br>mail@companyname.com"
|
||||
],
|
||||
[
|
||||
"icon" => "fas fa-map-marker-alt",
|
||||
"icon_color" => "text-green-500",
|
||||
"name" => "Get Direction",
|
||||
"description" => "56 12th Ave,<br>New York, NY 10011"
|
||||
],
|
||||
[
|
||||
"icon" => "fas fa-clock",
|
||||
"icon_color" => "text-blue-500",
|
||||
"name" => "Opening Hours",
|
||||
"description" => "Monday – Saturday:<br>Noon – 11:30 PM"
|
||||
]
|
||||
];
|
||||
?>
|
||||
24
assests/data/testimonialsdata.php
Normal file
24
assests/data/testimonialsdata.php
Normal file
@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
$testimonials = [
|
||||
[
|
||||
'rating' => 5,
|
||||
'review' => 'Ut tellus doloruris fermentum dictum magna. Sed laoreet aliquam leo dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis.',
|
||||
'author' => 'Rebecca Johnson, CA, USA',
|
||||
'image' => 'https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2020/09/visor.png'
|
||||
],
|
||||
[
|
||||
'rating' => 5,
|
||||
'review' => 'Ut tellus doloruris fermentum dictum magna. Sed laoreet aliquam leo dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis.',
|
||||
'author' => 'Marta Healy, CA, USA',
|
||||
'image' => 'https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2020/09/visor.png'
|
||||
],
|
||||
[
|
||||
'rating' => 5,
|
||||
'review' => 'Ut tellus doloruris fermentum dictum magna. Sed laoreet aliquam leo dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis.',
|
||||
'author' => 'Mark & Rebecca Johnson, CA, USA',
|
||||
'image' => 'https://velikorodnov.com/wordpress/steakhouse/wp-content/uploads/2020/09/visor.png'
|
||||
]
|
||||
];
|
||||
|
||||
?>
|
||||
BIN
assests/images/about-image.jpg
Normal file
BIN
assests/images/about-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
assests/images/carousel-img-one.jpg
Normal file
BIN
assests/images/carousel-img-one.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
assests/images/carousel-img-three.jpg
Normal file
BIN
assests/images/carousel-img-three.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
assests/images/carousel-img-two.jpg
Normal file
BIN
assests/images/carousel-img-two.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
assests/images/event-image.png
Normal file
BIN
assests/images/event-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
BIN
assests/images/footer-image.png
Normal file
BIN
assests/images/footer-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
assests/images/logo-1.png
Normal file
BIN
assests/images/logo-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
assests/images/logo-2.png
Normal file
BIN
assests/images/logo-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
assests/images/logo.png
Normal file
BIN
assests/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
assests/images/menu-image-four.jpg
Normal file
BIN
assests/images/menu-image-four.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
assests/images/menu-image-one.jpg
Normal file
BIN
assests/images/menu-image-one.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
assests/images/menu-image-three.jpg
Normal file
BIN
assests/images/menu-image-three.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
BIN
assests/images/menu-image-two.jpg
Normal file
BIN
assests/images/menu-image-two.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
1
assests/js/nav.js
Normal file
1
assests/js/nav.js
Normal file
@ -0,0 +1 @@
|
||||
import 'flowbite';
|
||||
35
assests/js/testimonials.js
Normal file
35
assests/js/testimonials.js
Normal file
@ -0,0 +1,35 @@
|
||||
let currentIndex = 0;
|
||||
const carousel = document.getElementById('carousel');
|
||||
const slides = carousel.children;
|
||||
const totalSlides = slides.length;
|
||||
const dots = document.querySelectorAll("[id^='dot-']");
|
||||
|
||||
// Update the carousel's position and the active pagination dot
|
||||
function updateCarousel() {
|
||||
carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
|
||||
dots.forEach((dot, index) => {
|
||||
dot.classList.toggle('bg-gray-600', index === currentIndex);
|
||||
dot.classList.toggle('bg-gray-400', index !== currentIndex);
|
||||
});
|
||||
}
|
||||
|
||||
// Go to the next slide
|
||||
function nextSlide() {
|
||||
currentIndex = (currentIndex + 1) % totalSlides;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
// Go to the previous slide
|
||||
function prevSlide() {
|
||||
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
// Navigate to a specific slide
|
||||
function goToSlide(index) {
|
||||
currentIndex = index;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
// Auto-slide functionality
|
||||
setInterval(nextSlide, 5000); // Slide changes every 5 seconds
|
||||
76
includes/footer.php
Normal file
76
includes/footer.php
Normal 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 © <?php echo date("Y"); ?> Hotels.com. All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
118
includes/header.php
Normal file
118
includes/header.php
Normal 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
82
includes/testimonials.php
Normal 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>
|
||||
81
templates/about.php
Normal file
81
templates/about.php
Normal 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">→</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
93
templates/events.php
Normal 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
198
templates/home.php
Normal 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
28
templates/index.php
Normal 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
55
templates/menu.php
Normal 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
64
templates/reservation.php
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user