🏛️ Athena Greek Coffee House

About the Project A modern, responsive multi-page web application celebrating authentic Greek coffee, Turkish-style brewing, and Mediterranean café culture. Built with vanilla HTML5, custom CSS properties, and native Web Components for the WEB1201 final assessment. 👥 Group Members Member 1 Ramazan Karahan (Student ID: 24006801) — Role / Menu & Contact Us form Member 2 Muhammad Abbas (Student ID: 26052019) — Role / Login & Reservation and footer UI Member 3 Hafiz Raziq Obiyathulla (Student ID: 23059454) — Role / Team page Member 4 Wayne Bertrand Lesperance (Student ID: 25018177) — Role / Website Home page and design language

---

Site Snapshots

(Click to expand / collapse)

📷 Slide 1: Athena Landing Page

ATHENA Home page

📷 Slide 2: Our delicacies

Enjoy our hot & cold drinks with handmade daily pastries, baklava, and honeyed treats.

📷 Slide 3: Reservation Page/b>

Reserve your seat before it's too late!

✨ Features

• 🎨 Theme Switcher: Fully customizable Dark and Light modes using CSS variables and interactive SVGs with local storage persistence.
• 📱 Fully Responsive: Mobile-first design optimized across desktop, tablet, and mobile breakpoints using CSS Grid and Flexbox.
• ⚙️ Custom Web Components: Modular <site-footer> custom element built with native Web Components to eliminate code duplication across pages.
• 📋 Multi-Step Reservation Form: 3-step interactive login page with a greeting message after login validation and progress tracker bar
• ♿ Accessibility First: Includes skip navigation links, explicit aria- labels, dynamic high-contrast adjustments, and keyboard navigation support.

🛠️ Tech Stack and Assets Used

• Frontend: HTML5, CSS3 (Modern Flexbox & CSS Grid), JavaScript (ES6+)
• Architecture: Modular component architecture (Vanilla Web Components)
• Fonts: Google Fonts (Cormorant Garamond, Manrope)
• Icons: SVG iconography
• Logos: Custom created by M.Abbas

📂 File Directories

WEB1201-WEB-FUNDAMENTALS-FINAL-PROJECT/
├── assets/                  # Brand assets, logos, and images
├── css/
│   ├── styles.css           # Global stylesheets, layout grids, variables
│   └── register.css         # Page-specific reservation styling
├── js/
│   ├── script.js            # Core interactive scripts & theme toggles
│   ├── register.js          # Multi-step form logic & validation
│   └── footer-component.js  # Reusable <site-footer> Web Component
├── index.html               # Home Page
├── menu.html                # Coffee & Pastry Menu
├── reservation.html         # Multi-step Reservation Page
├── reviews.html             # Customer Testimonials
├── team.html                # Staff info
└── contact.html             # contact us page