A beautifully designed, fully accessible client-side restaurant website for RAFALE, an upscale French dining establishment. Built with modern web technologies and WCAG compliance at its core.
RAFALE is a complete restaurant experience brought online:
- 🏠 Home Page - Hero section with immersive video, restaurant story, and featured dishes
- 📋 Menu System - Browse appetizers, mains, desserts, and beverages with intelligent filtering
- 🛒 Online Ordering - Add items to cart, fill delivery details, calculate totals in real-time
- 🖼️ Gallery - Showcase restaurant ambiance and dining moments
- 📝 About & Contact - Learn the restaurant's story and get in touch
Filter menu items by:
- Category (Appetizers, Mains, Desserts, Beverages)
- Popularity (Popular items only)
- Dietary (Vegetarian / Non-Vegetarian)
- Price Range (Below Rs.1000 / Above Rs.2500)
- Choose dishes and adjust quantities
- Enter personal details (name, email, phone)
- Select pickup or home delivery
- Add delivery address and date
- Special requests field
- Live total calculation
- Terms & conditions acceptance
- WCAG Compliance - Following Web Content Accessibility Guidelines
- Semantic HTML - Proper heading hierarchy, form labels, fieldsets
- ARIA Labels - Social links and interactive elements properly labeled
- Keyboard Navigation - Full keyboard support for all interactions
- Responsive Design - Mobile, tablet, and desktop friendly
- Font Family - Typography optimized for readability
| Language | Purpose | % |
|---|---|---|
| HTML5 | Structure & Semantic markup | 52.8% |
| CSS3 | Responsive styling & layouts | 27.1% |
| JavaScript | Dynamic interactions & filtering | 20.1% |
- XML - Menu data storage
- Font Awesome - Icon library for social links
- Google Fonts - Cinzel Decorative & Raleway typefaces
- No Framework - Pure vanilla HTML, CSS, JavaScript
├── Home.html # Landing page
├── Menu.html # Menu with filters
├── OnlineOrder.html # Order placement form
├── About.html # Restaurant story
├── Contact.html # Contact form
├── Gallery.html # Image gallery
├── thankYou.html # Order confirmation
│
├── menuData.xml # Menu items data source
│
├── mainStyles.css # Shared styles (nav, footer)
├── homeStyle.css # Home page styling
├── menuStyle.css # Menu page styling
├── onlineStyle.css # Order form styling
├── aboutStyle.css # About page styling
├── contactStyles.css # Contact page styling
├── galleryStyles.css # Gallery styling
│
├── menuScript.js # Menu filtering logic
├── onlineOrderScript.js # Order form handling
└── contactScript.js # Contact form validation
✅ User-Centric - Intuitive navigation and clear calls-to-action
✅ Accessible - WCAG compliance ensures everyone can enjoy it
✅ Responsive - Works beautifully on all devices
✅ Performance - Pure client-side, no backend required
✅ Elegant - French upscale aesthetic with modern design
✅ Functional - Complete restaurant experience online
This project demonstrates:
- Clean, semantic HTML5 structure
- Advanced CSS3 layouts (Flexbox, Grid)
- Vanilla JavaScript for DOM manipulation
- XML data parsing and rendering
- Form validation and handling
- Responsive design principles
- WCAG accessibility standards
- UX/UI best practices