Luxury Stay Hotel Website

A sophisticated, modern static website for a luxury hotel featuring elegant design, smooth animations, and a premium user experience.

🌟 Overview

Luxury Stay is a premium hotel website that showcases elegant accommodations, amenities, and services. Built with clean HTML, CSS, and JavaScript, this static website delivers a luxurious browsing experience with smooth animations and responsive design.

✨ Features

• Responsive Design - Fully optimized for desktop, tablet, and mobile devices
• Modern UI/UX - Clean, elegant interface with premium aesthetics
• Smooth Animations - Reveal animations and smooth transitions throughout
• Multiple Pages - Home, Rooms, About, Gallery, and Contact pages
• Interactive Gallery - Filterable image gallery with category sorting
• Room Showcase - Detailed room listings with amenities and pricing
• Contact Form - Reservation request form with date selection
• Mobile Navigation - Hamburger menu for seamless mobile browsing

📁 Project Structure

luxury-stay/
│
├── index.html              # Homepage
├── rooms.html              # Room listings page
├── about.html              # About us page
├── gallery.html            # Photo gallery page
├── contact.html            # Contact/reservation page
│
├── css/
│   └── style.css          # Main stylesheet
│
├── js/
│   └── main.js            # JavaScript functionality
│
└── images/                # Image assets
    ├── ro1.webp
    ├── ro2.webp
    ├── r1.jpg
    ├── r2.jpg
    ├── r3.jpg
    ├── d1.webp
    ├── s1.webp
    ├── spaw.webp
    ├── din.webp
    ├── fo.jfif
    ├── h5.jfif
    ├── h6.jpg
    ├── 81.jpg
    ├── f10.webp
    ├── ef.webp
    └── our-family.png

🎨 Design Elements

Color Palette

• Dark Background: #0a0a0a, #1a1a1a
• Gold Accents: #d4af37, #f4e4c1
• White Text: #ffffff, #e8e8e8

Typography

• Headings: Cormorant Garamond (serif, elegant)
• Body Text: Poppins (sans-serif, modern)

Key Components

• Animated navigation bar with scroll effects
• Hero sections with background images
• Reveal-on-scroll animations
• Interactive gallery filters
• Responsive card layouts
• Custom form styling

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A local web server (optional, for development)

Installation

1. Clone or download the repository

   git clone https://github.com/yourusername/luxury-stay.git
   cd luxury-stay

2. Open in browser

   • Simply open index.html in your web browser
   • Or use a local development server:

   Using Python:

   # Python 3
   python -m http.server 8000
   
   # Python 2
   python -m SimpleHTTPServer 8000

   Using Node.js (with http-server):

   npx http-server

   Using VS Code:

   • Install "Live Server" extension
   • Right-click index.html and select "Open with Live Server"

3. Visit the website

   • Navigate to http://localhost:8000 (or the appropriate port)

📄 Pages Overview

Home (index.html)

• Hero section with call-to-action
• Featured rooms showcase
• Amenities highlights
• Customer testimonials
• Special offers section

Rooms (rooms.html)

• Complete room listings with details
• Pricing information
• Amenity lists
• Direct booking links
• Six room types from Deluxe to Royal Penthouse

About (about.html)

• Hotel history and story
• Core values and philosophy
• Leadership team profiles
• Mission statement

Gallery (gallery.html)

• Filterable photo gallery
• Categories: All, Rooms, Pool, Dining, Spa, Gardens
• High-quality images
• Smooth category transitions

Contact (contact.html)

• Reservation request form
• Contact information
• Interactive form fields
• Map placeholder
• Operating hours

🛠️ Customization

Updating Content

To change hotel information:

1. Edit the HTML files directly
2. Update text content within the respective sections
3. Modify contact details in the footer (present on all pages)

To add/remove rooms:

1. Open rooms.html
2. Duplicate a .room-page-card div
3. Update image source, title, amenities, and pricing

To modify gallery images:

1. Open gallery.html
2. Update image sources in .gallery-page-item elements
3. Ensure images are in the images/ folder
4. Update data-category attribute for filtering

Styling Changes

Colors:

• Edit CSS custom properties in style.css:

  :root {
    --dark: #0a0a0a;
    --gold: #d4af37;
    --gold-light: #f4e4c1;
  }

Fonts:

• Modify Google Fonts imports in HTML <head> sections
• Update font-family declarations in CSS

🔧 Dependencies

External Libraries

• Bootstrap 5.3.2 - CSS framework for responsive grid
• Font Awesome 6.5.1 - Icon library
• Google Fonts - Cormorant Garamond & Poppins typefaces

CDN Links

All external dependencies are loaded via CDN (no local installation required):

<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet" />

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet" />

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

🎯 Features in Detail

Interactive Elements

• Scroll Animations: Elements reveal as you scroll down
• Gallery Filtering: Click category buttons to filter images
• Mobile Menu: Responsive hamburger navigation
• Hover Effects: Smooth transitions on buttons and cards
• Form Validation: Date selection and dropdown menus

Responsive Breakpoints

• Desktop: 1200px and above
• Tablet: 768px - 1199px
• Mobile: Below 768px

📝 To-Do / Future Enhancements

• Add booking system integration
• Implement real Google Maps integration
• Add multi-language support
• Create admin panel for content management
• Add customer review system
• Integrate payment gateway
• Add room availability calendar
• Implement email notification system
• Add blog/news section
• Create virtual tour feature

🤝 Contributing

Contributions are welcome! If you'd like to improve this project:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Luxury Stay Team

• Website: www.luxurystay.com
• Email: reservations@luxurystay.com
• Phone: +1 (800) 555-0199

🙏 Acknowledgments

• Images sourced from Unsplash
• Icons from Font Awesome
• Fonts from Google Fonts
• Design inspiration from premium hotel websites

📞 Support

For support or questions, please contact:

• Email: reservations@luxurystay.com
• Phone: +1 (800) 555-0199
• Available: 24/7

---

Made with ❤️ for hospitality excellence

Last Updated: February 2025