Sadhya — A Feast Served on a Leaf 🍃 (Try it there are two Website)

Adwaidh MP — Mon, 10 Aug 2026 13:39:08 +0000

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

Sadhya — Learn About It. Then Experience It. 🌿🍚

I created two connected websites to celebrate Kerala's Onam Sadhya.

🌿 About Sadhya

Sadhya — A Feast Served on a Leaf | Kerala Onam

An interactive celebration of Kerala's Onam Sadhya.

adwaidhmp.github.io

Learn about Sadhya, its dishes, traditions, and cultural significance.

🍛 Experience Sadhya

adwaidhmp.github.io

Interact with the Sadhya, add dishes to the banana leaf, eat them, and complete the feast with Payasam.

Recommended journey:
🌿 Learn about Sadhya → 🍛 Experience Sadhya

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 one conventional food website, I decided to build two different experiences around the same idea.

The first website helps you understand Sadhya.

The second website lets you experience Sadhya.

The idea was simple:

First, learn what Sadhya is.
Then, experience it.

🌿 Website 1 — About Sadhya

The first website is an informative and visual introduction to Kerala's Sadhya.

Sadhya is a traditional vegetarian feast from Kerala, especially associated with celebrations such as Onam.

It is traditionally served on a banana leaf and consists of a variety of dishes with different flavors, textures, colors, and preparations.

I wanted this website to introduce visitors to the story behind the meal rather than simply presenting a list of food items.

It explores things such as:

🌿 The banana leaf
🍚 Rice
🥥 Traditional vegetable preparations
🥗 Thoran and side dishes
🌶️ Pickles and accompaniments
🥣 Curries and gravies
🍌 Traditional additions
🍚 Payasam
🌼 The connection between Sadhya and Onam
❤️ The cultural feeling of sharing a meal

The design uses Kerala-inspired colors, patterns, natural greens, festive gold, flowers, and other subtle visual references to create an atmosphere around the content.

The main question this website tries to answer is:

"What is Sadhya?"

🍛 Website 2 — Experience Sadhya

After learning about Sadhya, the second website takes the idea one step further.

Instead of simply showing the food, I wanted to turn the Sadhya itself into the interface.

The banana leaf becomes the main canvas.

The dishes become interactive CSS illustrations.

And the visitor becomes the person sitting down for Sadhya.

The interaction follows the feeling of actually having the meal:

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

You start with an empty banana leaf.

You choose dishes from the catalogue and add them to your leaf.

The dishes don't just become items in a list — they actually become part of your Sadhya.

You can then interact with the dishes and "eat" them one by one.

The experience tracks your progress as you go through the meal.

Eventually, Payasam becomes the final course. 🍚

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

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

Happy Onam from Kerala. 🌼

The goal was to make the website feel less like a traditional food website and more like a small interactive story.

🎨 Why Two Websites?

I wanted to separate learning from experiencing.

The first website provides the context.

It explains what Sadhya is, introduces its dishes, and gives some cultural background.

The second website takes that knowledge and turns it into an interaction.

Instead of just reading about Sadhya, you get to build your own digital Sadhya and interact with it.

So the two websites create a small journey:

Learn → Explore → Build → Eat → Celebrate

🧑‍💻 The CSS Art Challenge

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

So I decided to treat CSS as the illustration tool.

The banana leaf became the canvas.

Individual dishes became CSS compositions.

Patterns and decorations became part of the atmosphere.

Shadows and gradients created depth.

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

I spent a lot of time experimenting with:

CSS shapes
Gradients
Shadows
Textures
Borders
Layering
Positioning
Pseudo-elements
Animations
Transitions
Responsive layouts

The challenge was to make simple HTML elements and CSS properties feel like recognizable food and traditional objects.

🌼 Kerala & Onam Inspirations

I wanted the project to feel distinctly connected to Kerala and Onam without simply filling the interface with generic cultural decorations.

That led to subtle references throughout the websites:

🌿 Banana leaves — the traditional canvas for Sadhya

🌼 Pookalam-inspired elements — representing the floral atmosphere of Onam

🪔 Nilavilakku — a traditional Kerala lamp

💛 Kasavu-inspired gold — inspired by Kerala's traditional festive clothing

🌴 Natural Kerala greens — inspired by Kerala's landscape

🥥 Coconut-inspired colors and textures — reflecting Kerala's food culture

🍚 Rice and traditional dishes — the heart of Sadhya

🌸 Flowers and festive decorations — connecting the experience to Onam

I tried to keep these elements subtle so that they support the experience rather than overpower it.

✨ My Favorite Part

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

In a normal food website, selecting a dish might simply update a counter or add something to a cart.

Here, selecting a dish actually changes the Sadhya itself.

The dish appears on the banana leaf.

It becomes part of the meal.

And then the user can interact with it and eat it.

That small interaction is what makes the second website feel more like an experience than a normal UI.

🪔 From Empty Leaf to Completed Sadhya

The interactive experience follows a small story.

You start with an empty banana leaf.

You choose what you want to have.

The leaf gradually fills with food.

You eat the dishes one by one.

Your progress changes.

Then finally, you reach the last course:

Payasam. 🍚

Once everything is completed, the experience ends with:

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

Happy Onam from Kerala. 🌼

It is my small digital interpretation of the feeling of finishing a traditional Sadhya with family and friends.

💻 Code

Both websites were built from scratch using:

HTML5
CSS3
Vanilla JavaScript

No frontend frameworks were used.

No external food images were used for the CSS artwork.

The visual elements were created using HTML and CSS.

CSS is used for:

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

JavaScript is used for:

Dish selection
Adding dishes to the leaf
Tracking the Sadhya
Eating dishes
Progress management
Unlocking Payasam
Completing the feast
Resetting the experience

🔗 Source Code

The complete source code for both websites is available on GitHub.

🌿 About Sadhya

adwaidhmp / dev_compet

സദ്യ SADHYA — A Feast Served on a Leaf

An interactive Onam Sadhya you sit down to, not a website you scroll.

You arrive to lamps and drifting petals. You press START SADHYA. A banana leaf — drawn entirely in CSS — is laid in front of you. You choose dishes from an editorial menu; each one flies to its traditional place on the leaf. When the rice arrives, the feast pauses to honour it.

One button sits in the middle of the stage and carries the whole ritual:

Phase	Button	Unlocks when
The feast	FINISH EATING	rice (ചോറ്) and at least one curry are on the leaf
Payasam	FINISH THE FULL MEAL	one of three payasams has been served
Pookalam	COMPLETE SADHYA	all five flower rings are laid

Payasam stays locked — 🔒 "Sweetness comes last." — until you finish eating Finishing the full meal folds the leaf…

View on GitHub

🍛 Experience Sadhya

adwaidhmp / dev_competition

SADHYA — A Feast Served on a Leaf

An interactive page about Onam Sadhya, the vegetarian feast served on a banana leaf in Kerala, India. Twenty-four dishes are laid out on a leaf you can explore filter, taste-map, and fill yourself.

Built for the DEV Community Frontend Challenge — Comfort Food Edition (Perfect Landing). HTML, CSS and vanilla JavaScript. No framework, no backend no runtime dependencies.

Why a sadhya

Most "comfort food" pages are about one dish. A sadhya is the opposite: twenty-odd small preparations arranged in a specific order around a mound of rice, eaten by hand, off a leaf that goes out with the compost afterwards. It is comfort food as a layout problem — which is exactly what makes it worth building in a browser.

The page tries to be a reference as much as an experience. Every dish carries its Malayalam name, a…

View on GitHub

🛠️ Technologies

HTML + CSS + Vanilla JavaScript

No external frontend framework was required.

The main goal was to see how far I could push CSS as a visual and illustration tool, while keeping the experience interactive, responsive, and usable.

❤️ A Little Note

This project is my personal digital interpretation of Onam Sadhya.

Sadhya traditions, dishes, serving styles, and recipes can vary between families and regions, so this project isn't intended to represent one universal version of Sadhya.

It is simply my attempt to take something deeply connected with celebration, togetherness, family, and home and turn it into a small interactive frontend experience.

I wanted to create something that doesn't just show food.

I wanted it to tell a small story:

Learn about it.
Sit down for it.
Build your leaf.
Enjoy the meal.
Finish with Payasam.
Celebrate Onam. 🌼

A banana leaf became the canvas.

The food became the interface.

And the Sadhya became the experience.

Thank you for visiting and exploring both websites.

ഓണം ആശംസകൾ! 🌼

Happy Onam from Kerala. ❤️

DEV Community: Adwaidh MP

Sadhya — A Feast Served on a Leaf 🍃 (Try it there are two Website)

Sadhya — Learn About It. Then Experience It. 🌿🍚

🌿 About Sadhya

Sadhya — A Feast Served on a Leaf | Kerala Onam

🍛 Experience Sadhya

Inspiration

🌿 Website 1 — About Sadhya

🍛 Website 2 — Experience Sadhya

🎨 Why Two Websites?

🧑‍💻 The CSS Art Challenge

🌼 Kerala & Onam Inspirations

✨ My Favorite Part

🪔 From Empty Leaf to Completed Sadhya

💻 Code

CSS is used for:

JavaScript is used for:

🔗 Source Code

🌿 About Sadhya

adwaidhmp / dev_compet

സദ്യ SADHYA — A Feast Served on a Leaf

🍛 Experience Sadhya

adwaidhmp / dev_competition

SADHYA — A Feast Served on a Leaf

Why a sadhya

🛠️ Technologies

❤️ A Little Note