karthikeyan

Frontend Challenge Perfect Landing Submission 🍲🥧

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Amma's Kitchen — a premium, immersive landing page for a fictional South Indian restaurant that celebrates the comfort food I grew up eating. "Amma" means "Mother" in Tamil, and this page is a love letter to the dishes that taste like home — from crispy masala dosas to filter coffee served in a brass tumbler.

✨ Key Highlights

  • 🎨 Pure CSS Art — The hero features a full South Indian thali (brass plate with 6 katori bowls of sambar, rasam, poriyal, chutney, dal, curd and a central rice mound) — all rendered entirely in CSS using gradients, box-shadows, and border-radius. No images!
  • 🍛 5 CSS Food Illustrations — The gallery section showcases hand-crafted CSS art of idli, filter coffee (tumbler & davara), dum biryani, medu vada, and payasam
  • 🍳 CSS Art Dosa — The specials section features a crispy ghee roast dosa on a plate with chutney and sambar cups, built purely with CSS
  • 🏠 CSS Kitchen Scene — The story section includes a CSS-illustrated kitchen with a cooking pot, flames, steam, hanging utensils, and a spice shelf
  • 💨 Micro-Animations — Steam rising from dishes, floating spice particles, scroll-reveal animations, parallax mouse tracking on the thali, and counter animations
  • 📱 Fully Responsive — Adapts beautifully from desktop to mobile with a hamburger menu and adjusted layouts
  • 🍽️ Interactive Menu — 15 authentic South Indian dishes across 5 filterable categories (Breakfast, Rice & Mains, Snacks, Desserts, Drinks)
  • 📝 Working Reservation Form — Complete with date picker, guest selector, and an animated confirmation message

🎨 Design Philosophy

The warm color palette is inspired by the ingredients themselves — turmeric gold, curry leaf green, chili red, and clay brown — creating an atmosphere that feels like stepping into a traditional South Indian home. The dark theme with gold accents gives it a premium, modern feel while honoring tradition.

🛠️ Tech Stack

Layer Technology
Structure Semantic HTML5
Styling Vanilla CSS (2,680 lines — the star of the show ⭐)
Interactions Vanilla JavaScript (~200 lines, kept light and purposeful)
Typography Google Fonts — Playfair Display, Inter, Outfit
Images Zero. Every visual is pure CSS art 🎨

Demo

🔗 Live Site: https://karthic-keyan.github.io/Comfort-Food-Edition/

📦 Source Code: https://github.com/karthic-keyan/Comfort-Food-Edition

Hero Section — CSS Art Thali with floating animation and warm gold palette

Interactive Menu — 15 dishes across 5 filterable categories

CSS Art Gallery — Idli, Filter Coffee, Biryani, Vada, Payasam

Journey

🌱 The Inspiration

Growing up in South India, comfort food wasn't just about taste — it was about the ritual. The sound of batter being poured on a hot tava. The aroma of freshly tempered sambar. The way filter coffee smells when it's poured between a tumbler and davara. I wanted to capture all of that in a single landing page.

🎨 The CSS Art Challenge

The most rewarding (and challenging!) part was creating the CSS art thali in the hero section. Each katori bowl is positioned absolutely on a circular brass plate, with:

  • Radial gradients for the liquid food surfaces (sambar orange, rasam red, chutney green)
  • Box-shadows for depth and metallic shine
  • Pseudo-elements for tiny details like floating vegetables in sambar, pepper specks in rasam, and coconut shreds on poriyal
  • CSS animations for the steam rising effect

The gallery section was equally fun — building recognizable food items like a medu vada (with its characteristic hole!), a filter coffee tumbler and davara set, and a dum biryani pot with visible rice layers.

💡 What I'm Proud Of

  1. Zero images — Every visual element is CSS. The thali, the dosa, the kitchen scene, the gallery items — all pure CSS art.
  2. The thali floats — A subtle translateY animation makes the brass thali gently float, and on desktop, it responds to mouse movement with parallax. Small touch, big impact.
  3. The color palette — Deriving colors from actual spices (turmeric → #E8A838, curry leaf → #3A6B35, chili → #C0392B) made the design feel authentic without being kitschy.
  4. The reservation form — It actually "works" with a satisfying confirmation animation that shows your name, date, and guest count before resetting.

Built with ❤️ and a craving for sambar rice.