Scribd
Upload
11 views15 pages

PHP

The document outlines the structure and design of a website for the Grand Palace Hotel, featuring a navigation bar, sidebar, and main content sections. It highlights luxury accommodations, dining options, and amenities such as a swimming pool and spa. The site includes interactive elements for booking rooms and displaying various hotel features.

Uploaded by

linzskybes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views15 pages

PHP

The document outlines the structure and design of a website for the Grand Palace Hotel, featuring a navigation bar, sidebar, and main content sections. It highlights luxury accommodations, dining options, and amenities such as a swimming pool and spa. The site includes interactive elements for booking rooms and displaying various hotel features.

Uploaded by

linzskybes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 15

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grand Palace Hotel - Luxury Experience</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/
all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}

/* Navigation Bar */
.navbar {
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}

.logo {
font-size: 1.8rem;
font-weight: bold;
display: flex;
align-items: center;
}

.logo i {
margin-right: 0.5rem;
color: #f39c12;
}

.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}

.nav-menu a {
color: white;
text-decoration: none;
transition: color 0.3s;
padding: 0.5rem 1rem;
border-radius: 5px;
}

.nav-menu a:hover {
background: rgba(255,255,255,0.1);
color: #f39c12;
}

.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
padding: 0.5rem;
}

.hamburger span {
width: 25px;
height: 3px;
background: white;
margin: 3px 0;
transition: 0.3s;
}

/* Sidebar */
.sidebar {
position: fixed;
left: -300px;
top: 0;
width: 300px;
height: 100vh;
background: linear-gradient(180deg, #2c3e50, #34495e);
transition: left 0.3s ease;
z-index: 1001;
padding-top: 80px;
}

.sidebar.active {
left: 0;
}

.sidebar-menu {
list-style: none;
padding: 2rem 0;
}

.sidebar-menu li {
border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-menu a {
display: block;
color: white;
text-decoration: none;
padding: 1rem 2rem;
transition: all 0.3s;
}

.sidebar-menu a:hover {
background: rgba(52, 152, 219, 0.2);
padding-left: 2.5rem;
}

.sidebar-menu i {
margin-right: 1rem;
width: 20px;
}

/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}

.overlay.active {
opacity: 1;
visibility: visible;
}

/* Main Content */
.main-content {
margin-top: 80px;
min-height: calc(100vh - 80px);
}

.section {
display: none;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
animation: fadeIn 0.5s ease-in;
}

.section.active {
display: block;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Home Section */
.hero {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('/api/placeholder/1200/600');
background-size: cover;
background-position: center;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
margin: -2rem -2rem 2rem -2rem;
}

.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
font-size: 1.3rem;
margin-bottom: 2rem;
}

.btn {
display: inline-block;
background: #f39c12;
color: white;
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s;
border: none;
cursor: pointer;
font-size: 1rem;
}

.btn:hover {
background: #e67e22;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Features Grid */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}

.feature-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}

.feature-card i {
font-size: 3rem;
color: #3498db;
margin-bottom: 1rem;
}

.feature-card h3 {
margin-bottom: 1rem;
color: #2c3e50;
}

/* Room Cards */
.room-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.room-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}

.room-card:hover {
transform: translateY(-5px);
}

.room-card img {
width: 100%;
height: 250px;
object-fit: cover;
}

.room-info {
padding: 1.5rem;
}

.room-info h3 {
color: #2c3e50;
margin-bottom: 1rem;
}

.price {
font-size: 1.5rem;
color: #f39c12;
font-weight: bold;
margin: 1rem 0;
}

/* Forms */
.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #2c3e50;
font-weight: 500;
}

.form-control {
width: 100%;
padding: 0.8rem;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s;
}

.form-control:focus {
outline: none;
border-color: #3498db;
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}

/* Pool Section */
.pool-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
margin: 2rem 0;
}

.pool-image {
border-radius: 10px;
overflow: hidden;
position: relative;
}

.pool-image img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.3s;
}

.pool-image:hover img {
transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 768px) {
.hamburger {
display: flex;
}

.nav-menu {
display: none;
}

.hero-content h1 {
font-size: 2.5rem;
}

.hero-content p {
font-size: 1.1rem;
}

.form-row {
grid-template-columns: 1fr;
}

.nav-container {
padding: 0 1rem;
}

.section {
padding: 1rem;
}
}

/* Section Titles */
.section-title {
text-align: center;
font-size: 2.5rem;
color: #2c3e50;
margin-bottom: 2rem;
position: relative;
}

.section-title::after {
content: '';
width: 100px;
height: 3px;
background: #f39c12;
display: block;
margin: 1rem auto;
border-radius: 2px;
}

/* Status Messages */
.alert {
padding: 1rem;
margin: 1rem 0;
border-radius: 5px;
border-left: 4px solid;
}

.alert-success {
background: #d4edda;
border-color: #27ae60;
color: #155724;
}

.alert-error {
background: #f8d7da;
border-color: #e74c3c;
color: #721c24;
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<i class="fas fa-hotel"></i>
Grand Palace Hotel
</div>
<div class="hamburger" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav-menu">
<li><a href="#" onclick="showSection('home')">Home</a></li>
<li><a href="#"
onclick="showSection('accommodation')">Rooms</a></li>
<li><a href="#"
onclick="showSection('restaurant')">Restaurant</a></li>
<li><a href="#"
onclick="showSection('recreation')">Recreation</a></li>
<li><a href="#" onclick="showSection('pool')">Swimming
Pool</a></li>
<li><a href="#" onclick="showSection('contact')">Contact</a></li>
</ul>
</div>
</nav>

<!-- Sidebar -->


<div class="sidebar" id="sidebar">
<ul class="sidebar-menu">
<li><a href="#" onclick="showSection('home'); closeSidebar();"><i
class="fas fa-home"></i>Home</a></li>
<li><a href="#" onclick="showSection('accommodation');
closeSidebar();"><i class="fas fa-bed"></i>Accommodation</a></li>
<li><a href="#" onclick="showSection('restaurant'); closeSidebar();"><i
class="fas fa-utensils"></i>Restaurant</a></li>
<li><a href="#" onclick="showSection('recreation'); closeSidebar();"><i
class="fas fa-gamepad"></i>Recreation</a></li>
<li><a href="#" onclick="showSection('pool'); closeSidebar();"><i
class="fas fa-swimming-pool"></i>Swimming Pool</a></li>
<li><a href="#" onclick="showSection('spa'); closeSidebar();"><i
class="fas fa-spa"></i>Spa & Wellness</a></li>
<li><a href="#" onclick="showSection('events'); closeSidebar();"><i
class="fas fa-calendar"></i>Events</a></li>
<li><a href="#" onclick="showSection('contact'); closeSidebar();"><i
class="fas fa-phone"></i>Contact</a></li>
</ul>
</div>
<!-- Overlay -->
<div class="overlay" id="overlay" onclick="closeSidebar()"></div>

<!-- Main Content -->


<main class="main-content">
<!-- Home Section -->
<section id="home" class="section active">
<div class="hero">
<div class="hero-content">
<h1>Welcome to Grand Palace Hotel</h1>
<p>Experience luxury and comfort like never before</p>
<a href="#" class="btn"
onclick="showSection('accommodation')">Book Your Stay</a>
</div>
</div>

<div class="features">
<div class="feature-card">
<i class="fas fa-bed"></i>
<h3>Luxury Rooms</h3>
<p>Spacious and elegantly designed rooms with modern amenities
and breathtaking views.</p>
</div>
<div class="feature-card">
<i class="fas fa-utensils"></i>
<h3>Fine Dining</h3>
<p>World-class restaurants serving international cuisine
prepared by renowned chefs.</p>
</div>
<div class="feature-card">
<i class="fas fa-swimming-pool"></i>
<h3>Swimming Pool</h3>
<p>Olympic-sized pool with stunning city views and poolside
service.</p>
</div>
<div class="feature-card">
<i class="fas fa-spa"></i>
<h3>Spa & Wellness</h3>
<p>Rejuvenate your body and mind at our full-service spa and
fitness center.</p>
</div>
</div>
</section>

<!-- Accommodation Section -->


<section id="accommodation" class="section">
<h2 class="section-title">Our Accommodation</h2>
<div class="room-grid">
<div class="room-card">
<img src="/api/placeholder/400/250" alt="Deluxe Room">
<div class="room-info">
<h3>Deluxe Room</h3>
<p>Elegant room with city view, king-size bed, and modern
amenities.</p>
<div class="price">$299/night</div>
<button class="btn" onclick="bookRoom('Deluxe Room')">Book
Now</button>
</div>
</div>
<div class="room-card">
<img src="/api/placeholder/400/250" alt="Executive Suite">
<div class="room-info">
<h3>Executive Suite</h3>
<p>Spacious suite with separate living area and premium
city views.</p>
<div class="price">$499/night</div>
<button class="btn" onclick="bookRoom('Executive
Suite')">Book Now</button>
</div>
</div>
<div class="room-card">
<img src="/api/placeholder/400/250" alt="Presidential Suite">
<div class="room-info">
<h3>Presidential Suite</h3>
<p>Ultimate luxury with panoramic views, private terrace,
and butler service.</p>
<div class="price">$999/night</div>
<button class="btn" onclick="bookRoom('Presidential
Suite')">Book Now</button>
</div>
</div>
</div>

<!-- Booking Form -->


<div id="booking-form" style="display: none; margin-top: 3rem;
background: #f8f9fa; padding: 2rem; border-radius: 10px;">
<h3>Book Your Room</h3>
<form onsubmit="submitBooking(event)">
<div class="form-row">
<div class="form-group">
<label>Check-in Date</label>
<input type="date" class="form-control" id="checkin"
required>
</div>
<div class="form-group">
<label>Check-out Date</label>
<input type="date" class="form-control" id="checkout"
required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" id="guestName"
required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control"
id="guestEmail" required>
</div>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" class="form-control" id="guestPhone"
required>
</div>
<input type="hidden" id="selectedRoom">
<button type="submit" class="btn">Confirm Booking</button>
<button type="button" class="btn" style="background: #6c757d;
margin-left: 1rem;" onclick="hideBookingForm()">Cancel</button>
</form>
</div>
</section>

<!-- Restaurant Section -->


<section id="restaurant" class="section">
<h2 class="section-title">Fine Dining Experience</h2>
<div class="features">
<div class="feature-card">
<i class="fas fa-wine-glass"></i>
<h3>The Sapphire Restaurant</h3>
<p>Fine dining restaurant serving contemporary international
cuisine with an extensive wine collection.</p>
<p><strong>Hours:</strong> 6:00 PM - 11:00 PM</p>
</div>
<div class="feature-card">
<i class="fas fa-coffee"></i>
<h3>Café Royale</h3>
<p>Casual dining with fresh pastries, artisan coffee, and light
meals throughout the day.</p>
<p><strong>Hours:</strong> 6:00 AM - 10:00 PM</p>
</div>
<div class="feature-card">
<i class="fas fa-cocktail"></i>
<h3>Sky Lounge Bar</h3>
<p>Rooftop bar with signature cocktails and panoramic city
views.</p>
<p><strong>Hours:</strong> 5:00 PM - 2:00 AM</p>
</div>
</div>

<!-- Menu Reservation -->


<div style="background: #f8f9fa; padding: 2rem; border-radius: 10px;
margin-top: 2rem;">
<h3>Reserve Your Table</h3>
<form onsubmit="submitReservation(event)">
<div class="form-row">
<div class="form-group">
<label>Restaurant</label>
<select class="form-control" required>
<option value="">Select Restaurant</option>
<option value="sapphire">The Sapphire
Restaurant</option>
<option value="cafe">Café Royale</option>
<option value="skylounge">Sky Lounge Bar</option>
</select>
</div>
<div class="form-group">
<label>Date</label>
<input type="date" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Time</label>
<input type="time" class="form-control" required>
</div>
<div class="form-group">
<label>Number of Guests</label>
<select class="form-control" required>
<option value="">Select</option>
<option value="1">1 Guest</option>
<option value="2">2 Guests</option>
<option value="3">3 Guests</option>
<option value="4">4 Guests</option>
<option value="5+">5+ Guests</option>
</select>
</div>
</div>
<div class="form-group">
<label>Contact Name</label>
<input type="text" class="form-control" required>
</div>
<button type="submit" class="btn">Reserve Table</button>
</form>
</div>
</section>

<!-- Recreation Section -->


<section id="recreation" class="section">
<h2 class="section-title">Recreation & Activities</h2>
<div class="features">
<div class="feature-card">
<i class="fas fa-dumbbell"></i>
<h3>Fitness Center</h3>
<p>State-of-the-art gym with modern equipment, personal
trainers, and group fitness classes.</p>
<p><strong>Hours:</strong> 5:00 AM - 11:00 PM</p>
</div>
<div class="feature-card">
<i class="fas fa-gamepad"></i>
<h3>Game Room</h3>
<p>Entertainment center with pool tables, arcade games, and
gaming consoles for all ages.</p>
<p><strong>Hours:</strong> 10:00 AM - 12:00 AM</p>
</div>
<div class="feature-card">
<i class="fas fa-book"></i>
<h3>Library & Reading Room</h3>
<p>Quiet space with extensive book collection, magazines, and
comfortable reading areas.</p>
<p><strong>Hours:</strong> 24/7</p>
</div>
<div class="feature-card">
<i class="fas fa-shopping-bag"></i>
<h3>Shopping Arcade</h3>
<p>Luxury boutiques, souvenir shops, and convenience stores
within the hotel premises.</p>
<p><strong>Hours:</strong> 9:00 AM - 10:00 PM</p>
</div>
<div class="feature-card">
<i class="fas fa-music"></i>
<h3>Live Entertainment</h3>
<p>Weekly live music performances, cultural shows, and special
events in our grand ballroom.</p>
<p><strong>Check schedule at reception</strong></p>
</div>
<div class="feature-card">
<i class="fas fa-car"></i>
<h3>Concierge Services</h3>
<p>City tours, transportation arrangements, ticket bookings,
and local recommendations.</p>
<p><strong>Available 24/7</strong></p>
</div>
</div>
</section>

<!-- Swimming Pool Section -->


<section id="pool" class="section">
<h2 class="section-title">Swimming Pool & Aquatic Facilities</h2>
<p style="text-align: center; font-size: 1.2rem; margin-bottom: 2rem;
color: #666;">
Dive into luxury at our world-class aquatic facilities featuring
multiple pools and water attractions.
</p>

<div class="pool-gallery">
<div class="pool-image">
<img src="/api/placeholder/400/250" alt="Main Pool">
</div>
<div class="pool-image">
<img src="/api/placeholder/400/250" alt="Kids Pool">
</div>
<div class="pool-image">
<img src="/api/placeholder/400/250" alt="Infinity Pool">
</div>
</div>

<div class="features">
<div class="feature-card">
<i class="fas fa-swimming-pool"></i>
<h3>Olympic Pool</h3>
<p>50-meter Olympic-sized pool perfect for serious swimmers and
water sports enthusiasts.</p>
<p><strong>Hours:</strong> 6:00 AM - 10:00 PM</p>
</div>
<div class="feature-card">
<i class="fas fa-child"></i>
<h3>Kids Pool</h3>
<p>Safe and fun shallow pool area designed specifically for
children with water slides and toys.</p>
<p><strong>Hours:</strong> 8:00 AM - 8:00 PM</p>
</div>
<div class="feature-card">
<i class="fas fa-infinity"></i>
<h3>Infinity Pool</h3>
<p>Stunning rooftop infinity pool with panoramic city views and
poolside bar service.</p>
<p><strong>Hours:</strong> 10:00 AM - 11:00 PM</p>
</div>
<div class="feature-card">
<i class="fas fa-hot-tub"></i>
<h3>Jacuzzi & Hot Tub</h3>
<p>Relaxing therapeutic hot tub and jacuzzi facilities for
ultimate relaxation.</p>
<p><strong>Hours:</strong> 24/7</p>
</div>
</div>
</section>

<!-- Spa Section -->


<section id="spa" class="section">
<h2 class="section-title">Spa & Wellness Center</h2>
<div class="features">
<div class="feature-card">
<i class="fas fa-spa"></i>
<h3>Full Service Spa</h3>
<p>Comprehensive spa treatments including massages, facials,
and body treatments by certified therapists.</p>
</div>
<div class="feature-card">
<i class="fas fa-leaf"></i>
<h3>Wellness Programs</h3>
<p>Yoga classes, meditation sessions, and wellness workshops
for mind and body rejuvenation.</p>
</div>
<div class="feature-card">
<i class="fas fa-thermometer-half"></i>
<h3>Sauna & Steam</h3>
<p>Traditional Finnish sauna and eucalyptus steam rooms for
detoxification and relaxation.</p>
</div>
</div>
</section>

<!-- Events Section -->


<section id="events" class="section">
<h2 class="section-title">Events & Meetings</h2>
<div class="features">
<div class="feature-card">
<i class="fas fa-calendar"></i>
<h3>Wedding Venue</h3>
<p>Elegant ballrooms and outdoor spaces perfect for weddings
and special celebrations.</p>
</div>
<div class="feature-card">
<i class="fas fa-briefcase"></i>
<h3>Business Centers</h3>
<p>Modern conference rooms and meeting facilities equipped with
latest technology.</p>
</div>
<div class="feature-card">
<i class="fas fa-birthday-cake"></i>
<h3>Private Events</h3>
<p>Customized event planning services for birthdays,
anniversaries, and corporate functions.</p>
</div>
</div>
</section>

<!-- Contact Section -->


<section id="contact" class="section">
<h2 class="section-title">Contact Us</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
margin-top: 2rem;">
<div>
<h3>Get in Touch</h3>
<div style="margin: 1.5rem 0;">
<i class="fas fa-map-marker-alt" style="color: #3498db;
margin-right: 1rem;"></i>
<strong>Address:</strong> 123 Luxury Avenue, Downtown, City
12345
</div>
<div style="margin: 1.5rem 0;">
<i class="fas fa-phone" style="color: #3498db; margin-
right: 1rem;"></i>
<strong>Phone:</strong> +1 (555) 123-4567
</div>
<div style="margin: 1.5rem 0;">
<i class="fas fa-envelope" style="color: #3498db; margin-
right: 1rem;"></i>
<strong>Email:</strong> [email protected]
</div>
<div style="margin: 1.5rem 0;">
<i class="fas fa-clock" style="color: #3498db; margin-
right: 1rem;"></i>
<strong>Reception:</strong> 24/7
</div>
</div>
<div>
<h3>Send us a Message</h3>
<form onsubmit="submitContact(event)">
<div class="form-group">
<label>Name</label>

You might also like