Foodie — Food Delivery UI (Capstone Project)

Project Title & Theme

Foodie — A responsive Food Delivery landing page UI built with HTML5 & CSS3.

Short description of sections implemented

• Header & Navigation with Skip-to-main link
• Hero / Banner with headline, description, CTA, and hero image (from PDF)
• Search card (location + category + search)
• Categories grid (Pizza, Burgers, Sushi, Indian, Chinese, Desserts)
• Featured Restaurants grid (4 cards)
• Promo Offers section
• Testimonials section
• App CTA (download badges)
• Footer with cities served, contact, and social links
• All images have alt text; form fields have labels for accessibility.

Layout techniques & breakpoints

• Header/Footer: Flexbox for alignment
• Cards/Grids: CSS Grid for restaurants/testimonials and Flexbox for simpler components
• CSS variables for colors, spacing, and radii
• Responsive breakpoints:
  • Desktop: ≥1024px
  • Tablet: 1024px → 768px (adjusts grids to 3/2 columns)
  • Mobile: ≤768px (single-column hero, stacked sections)
  • Small phones: ≤420px (single-column lists + compact typography)

---