Skip to content

Mandar123454/Hotel-Menu-Card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🍽️ Hotel Menu Card with Stylish Order Confirmation

This project is a fully styled and animated hotel menu card designed using HTML and CSS, with JavaScript functionality for dynamic total bill calculation. It includes item categories, professional icons, custom fonts, and realistic animations for an engaging user experience.


🚀 Features

  • Animated & Styled Menu UI
  • Professional Fonts & Icons for Each Item
  • Eight Categories: Snacks, Soups, Dinner, Starters, Ice Creams, Juices, Fruits
  • Confirm Order Button with transition to a thank-you screen
  • Total Bill Calculation based on selected items
  • "Back to Menu" or "Order Again" button
  • Animated Footer with customizable message
  • Right & Left Side Unique Animations

📁 Project Structure


🧾 How It Works

  1. Users browse the animated menu with styled categories.
  2. They select items using checkboxes (each with fixed price).
  3. The total bill auto-updates based on selections.
  4. On clicking "Confirm Order", the app:
    • Displays a styled thank-you message
    • Shows the total bill
    • Animates the content
    • Provides a button to order again

💡 Technologies Used

  • HTML5 – Semantic structure
  • CSS3 – Styling, transitions, keyframe animations, gradients
  • Google Fonts – Stylish & modern typography
  • Font Awesome – Icons for items and sections
  • JavaScript (Vanilla) – Dynamic total bill calculation

About

This project is a fully styled and animated hotel menu card designed using HTML and CSS, with JavaScript functionality for dynamic total bill calculation. It includes item categories, professional icons, custom fonts, and realistic animations for an engaging user experience.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors