This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
When thinking of "comfort food," I couldn't pick just one dish. To me, ultimate comfort is "Ghar Ka Khaana" (home-cooked food), which is less about a specific recipe and more about the comforting rhythm of a day at home.
This interactive piece represents the timeline of my comfort: the fresh start of Appam & Chutney at 7:00 AM, a celebratory feast of Chicken Biryani at 1:00 PM, a nostalgic pause for Chai & Toast at 5:00 PM, and the ultimate warm hug of Tadka Khichdi at 11:00 PM.
Demo
You can click the clock to cycle through the timeline of meals!
Journey
After procrastinating for long, I decided to build this project with Zero JavaScript. The clickable clock and the changing meals all work using a pure CSS trick (the radio-button hack).
For the aesthetic, I wanted a hand-drawn, sticker-like look with thick marker lines. I used this specific cute pancake sticker illustration as my main reference to guide the playful, sketched vibe.
These days, we are used to relying on heavy frameworks and libraries for the things we build. It was a really fun challenge to step away from all that, go back to the basics, and see what I could bring to life using just plain CSS!
