MealTrek is a feature-rich and visually engaging food delivery platform built as part of an academic capstone project for the SNW subject. The project demonstrates modern web development best practices using HTML5 and CSS3 (Phase 1), with a modular structure that is ready for JavaScript enhancements (Phase 2). MealTrek is fully responsive and designed to give users a smooth food ordering experience.
/Mealtrek
│
├── /pages # All main pages
│ ├── index.html
│ ├── about.html
│ ├── contact.html
│ ├── restaurants.html
│ ├── last-minute-deal.html
│ ├── login.html
│ ├── signup.html
│ └── /restaurants # Individual restaurant detail pages
│ ├── restaurant1.html
│ ├── restaurant2.html
│ └── ...
│
├── /assets
│ ├── /css # All CSS files (one for each page)
│ │ ├── index.css
│ │ ├── about.css
│ │ ├── contact.css
│ │ ├── restaurants.css
│ │ ├── last-minute-deal.css
│ │ ├── login.css
│ │ └── signup.css
│ ├── /js # JS files (for Phase 2)
│ └── /images # All image assets
│
└── README.md # Project documentation (this file)
-
Home Page (
index.html)- Sticky NavBar and clear navigation
- Hero section with search for location/cuisine
- Food category highlights
- Featured restaurants with ratings, price, delivery time, and badges
- Features/benefits for using MealTrek
- Last minute deals section with urgency/badges
- Call-to-action and a professional footer
-
About Us (
about.html)- Company story, mission, and vision
- Core values and statistics
- Leadership team section
- Awards and recognitions
- Why choose us highlights
-
Contact Us (
contact.html)- Contact info cards (phone, email, address, business hours)
- Social links
- Validated contact form with all necessary fields
- FAQ and support methods (Live chat, Email, Call, Help Center)
- Google Maps embed for office location
-
Restaurants Page (
restaurants.html)- Search bar for location and restaurant/cuisine
- Advanced filter sidebar (rating, cuisine, time, price, features)
- Sort by rating/delivery time/price
- Grid of restaurant cards (images, badges, offers, clickable)
- “Load More” and clear filters feature
-
Last Minute Deals (
last-minute-deal.html)- Flash sale themed hero with urgency messaging
- Filter, sort, and search through deals
- Cards for mega/hot/ending deals with countdown timers and savings
- “How it Works” guide & “Why choose these deals” benefits
-
Login (
login.html) & Signup (signup.html)- Branding, benefits, and statistics panels
- Clean forms with validation placeholders
- Show/hide password and password strength
- Social login/signup placeholders
- Success and error messaging areas
- HTML5: Semantic, accessible markup
- CSS3: Grid, Flexbox, CSS variables, transitions, gradients
- Fully Responsive: Desktop → mobile support
- Color Palette: Orange (#ff6b35), Warm golds, Navy, Neutrals, Green/Red for feedback
- Typography: Segoe UI, Tahoma, Geneva, Verdana, sans-serif
- Download or clone this repository to your local machine.
- Open
/pages/index.htmlin your browser, or - Use a local server like Live Server (VS Code),
python -m http.server, ornpx http-serverin the root folder.
- Main HTML Pages: 7+
- CSS Files: 7
- Images: 20+ (restaurants, deals, branding)
- Restaurant Detail Pages: 8+ (
/pages/restaurants/) - Fully Responsive: Yes
- Planned (Phase 2): Add JavaScript features for search, filter, countdowns, form validation, and user authentication
- JavaScript for all forms (login, signup, contact)
- Restaurant and deals filtering, search, and sorting
- Countdown timers for deals
- Cart/checkout and order tracking (basic)
- Modal, alert, and notification handling
Aryan Damara
SNW Capstone Project
November 2025
This README documents the structure, content, styling, and usage of the MealTrek project as completed in Phase 1. For Phase 2, see the /assets/js folder for scripts and further feature additions.
Made with ❤️ for food lovers and future developers!