Rasam House: Comfort Food Landing Page for DEV Frontend Challenge

A food-memory inspired landing page for South Indian rasam rice, built with responsive HTML, CSS, and JavaScript.

What I Built

I translated a food memory into a functional, accessible landing page: a tiny rasam rice shop where the order changes based on the kind of day you had.

This is my submission for the DEV Frontend Challenge: Comfort Food Edition, Perfect Landing prompt.

I built Rasam House, a polished landing page for an imaginary comfort-food
spot centered around South Indian rasam rice. I wanted the page to feel like the
meal itself: warm, clear, unfussy, and quietly comforting.

For me, rasam rice is the food equivalent of someone lowering the volume on a
hard day. Before the bowl even reaches the table, the kitchen tells you what is
coming: mustard seeds crackling, curry leaves hitting hot ghee, pepper and
tamarind rising with the steam. It is simple food: rice, tomato, tamarind,
pepper, cumin, curry leaves, and a little ghee. But when it is hot and bright
and spooned into a bowl, it feels like being brought back to yourself. That is
the feeling I tried to turn into a landing page.

Instead of treating comfort food like a normal restaurant conversion page, I
tried to make the interaction feel emotional. The order panel asks what kind of
day it was -- rainy, long workday, or homesick -- and the bowl summary changes
around that mood. The reservation flow also has a small cooking moment before it
returns a pickup code, so the interface feels like something is being prepared
rather than instantly stamped out.

For the final polish, I made the order summary behave more like a tiny comfort
receipt: the bowl price, pickup time, comfort meter, and note all update from
the selected mood and bowl. After reserving, the card gives a pickup code, a
small steam animation, and a copyable pickup note.

The page includes:

• a full-viewport food hero with soft steam animation
• a conditional cooking loader for slower page loads
• accessible navigation and skip link
• menu cards
• a short cooking ritual section
• an interactive "build your bowl" order panel with mood-based copy
• a comfort receipt with dynamic ETA, price, meter, and note
• a pickup reservation state with progress, confirmation code, copy note, and reset
• Open Graph and Twitter preview metadata
• responsive mobile layout
• WCAG 2.0 AA-focused accessibility checks and reduced-motion support
• a no-JavaScript fallback note and MIT-licensed source

Live Demo + Source

Rasam House | Comfort Food Bowls

A warm, responsive comfort-food landing page for South Indian rasam rice bowls.

rohithmatham12.github.io

Source code: GitHub repository

Screenshots

Desktop:

Mobile:

Journey

The main design challenge was making the food memory feel present immediately
without turning the page into a generic restaurant template. I kept the layout
simple and let the dish lead the first screen. The interaction is intentionally
small: users can choose a bowl, spice level, garnish, and mood, and the order
summary updates the copy, ETA, total, and comfort meter without needing a
backend.

I also added a gentle steam animation in the hero, a conditional "Simmering
rasam" loader for slower loads, and a tiny confirmation moment after reserving
pickup. The motion is intentionally quiet because comfort food should not feel
like a slot machine. It should feel like something is patiently getting warm for
you.

I focused on frontend fundamentals:

• semantic sections and form labels
• visible focus states
• readable color contrast
• responsive grid changes
• no layout overlap on narrow screens
• lightweight JavaScript
• reduced-motion support for the animated parts

Accessibility Notes

I designed the page around WCAG 2.0 AA fundamentals: perceivable content,
operable controls, understandable form behavior, and robust semantic HTML. The
page includes a skip link, semantic landmarks, a named navigation region,
labeled form controls, visible focus states, and no keyboard traps.

Dynamic order updates are announced with a polite live region. The comfort meter
uses role="meter" with aria-valuenow and aria-valuetext, the mobile menu
button updates aria-expanded, and the reservation card uses aria-busy while
the pickup state is processing.

The page also avoids relying on motion for meaning. Steam, loader, and progress
animations are decorative or supplemental, and the CSS respects
prefers-reduced-motion.

I also included a no-JavaScript fallback note. The core landing page content,
menu, and accessibility notes remain available without JavaScript; the bowl
builder and pickup receipt are progressive enhancements.

Built With

• HTML
• CSS
• JavaScript

The source is MIT licensed.