This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Sadhya — A Feast Served on a Leaf 🌿

Inspiration

For this challenge, I wanted to celebrate a comfort food that means much more to me than just a meal — Kerala's Onam Sadhya.

A Sadhya is traditionally served on a banana leaf and brings together many different flavors, textures, colors, and dishes in one beautiful composition.

Instead of creating a conventional food website, I wanted to turn the Sadhya itself into the interface.

The entire visual experience was created from scratch using HTML and CSS, without using food images or external visual assets.

The banana leaf, food illustrations, Pookalam-inspired decorations, Kerala-inspired patterns, lamps, textures, and other visual elements are all created using HTML and CSS.

I wanted the design to feel like a small digital celebration of Kerala — warm, festive, colorful, and handcrafted.

The interaction was designed around the idea of actually sitting down for Sadhya:

Choose your dishes → Add them to the leaf → Enjoy the feast → Save room for Payasam → Complete the Sadhya.

The final experience ends with an Onam greeting inspired by the feeling of sharing a meal with family and friends.

Demo

Live Demo:

https://adwaidhmp.github.io/dev_compet/

The experience is best explored by interacting with the Sadhya rather than simply scrolling through it.

Start with the leaf, choose your dishes, add them to your Sadhya, enjoy them one by one, and save room for Payasam. 🍚

Journey

The main challenge was figuring out how to represent a complete Sadhya without relying on photographs or external images.

I decided to treat CSS as the illustration tool.

The banana leaf became the main canvas.

Individual dishes became CSS compositions.

Patterns and decorations became part of the atmosphere.

And JavaScript became the small layer that turns the artwork into an interactive experience.

I spent a lot of time experimenting with shapes, gradients, shadows, textures, positioning, and layering to make simple CSS elements feel like food rather than ordinary geometric shapes.

I also wanted the experience to feel distinctly connected to Kerala and Onam without filling the page with generic cultural decorations.

That led to subtle references to:

• 🌿 Banana leaves
• 🌼 Pookalam
• 🪔 Nilavilakku
• 💛 Kasavu-inspired gold
• 🌴 Kerala's natural greens
• 🍚 Rice and traditional Sadhya dishes
• 🌸 Onam flowers
• 🥥 Coconut-inspired colors and textures

One of my favorite parts of the project is the interaction between the catalogue and the leaf.

Instead of selecting an item from a normal menu and simply changing a number, the dish actually becomes part of the Sadhya.

The user can then interact with the dish and "eat" it.

Eventually, Payasam becomes the final course.

Once the feast is complete, the entire interface transitions into an Onam greeting:

സദ്യ പൂർത്തിയായി

Happy Onam from Kerala. 🌼

The goal was to make the website feel less like a menu and more like a tiny interactive story.

A banana leaf became the canvas.

The food became the interface.

And the Sadhya became the experience.

Code

The project was built from scratch using:

• HTML5
• CSS3
• Vanilla JavaScript

No frameworks were used.

The visual artwork was created using HTML and CSS rather than external food images.

The project uses CSS for:

• Banana leaf illustration
• Food illustrations
• Shadows and depth
• Food textures
• Kerala-inspired patterns
• Pookalam-inspired decorations
• Nilavilakku
• Decorative elements
• Animations and transitions
• Responsive layouts

JavaScript is used for the interactive parts of the experience, including:

• Adding dishes to the leaf
• Tracking the Sadhya
• Eating dishes
• Managing progress
• Unlocking Payasam
• Completing the feast
• Resetting the experience

Source Code

The complete source code is available on GitHub:

https://github.com/adwaidhmp/dev_competition

Technologies

HTML + CSS + Vanilla JavaScript

No external frontend framework was required.

The goal was to see how far I could push the visual side of CSS while keeping the experience interactive and usable.

A Little Note

This project is my digital interpretation of Onam Sadhya.

Sadhya traditions and recipes can vary between families and regions, so this isn't intended to represent one universal way of serving or eating Sadhya.

It is simply my small attempt to turn something deeply associated with celebration, togetherness, and home into an interactive frontend experience.

Thank you for visiting.

ഓണം ആശംസകൾ! 🌼

Happy Onam from Kerala. ❤️