This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

For this challenge I’ve crafted a dashboard that’s as vibrant and dynamic as Earth Day itself.🌿
Imagine a UI framed with the precision of a Bento box, where each element sits in harmony with the others. The cards are the real showstoppers here, with a frosted glass aesthetic that’s as cool as the other side of the pillow. They’re like little windows fogged up by Mother Nature’s breath.

Demo

I recommend watching the demo here.

Journey

So, how did this dashboard come to life? Well, it all started with a memory—a blast from the past. I was about to settle for a one page layout, you know, the usual stuff. But then, like a lightning bolt of inspiration, I remembered my old gig. A few years ago, I was the dashboard whisperer, crafting production dashboards with the precision of a watchmaker. And guess what? I used the Bento grid structure build them.

That’s right, the Bento grid—a layout so organized, it could make Marie Kondo shed a tear of joy. With the structure in place, I knew I had to make it look unique. None of that cookie-cutter dashboard business. (Remember my Xbox dashboard on Dribbble? Yeah, nothing like that.)

While looking for inspiration I stumbled upon an AI-generated image of Earth from space. Fate? Destiny? Call it what you will, but that image became the backdrop for my cards. Each card got a blurred background, but I didn’t settle for just any blur. Oh no, I went full mad scientist. Three masks — dotted patterns, corner cuts and iconic symbols — came together to form a frosted background that’s truly unique.

And the background? I couldn't decide for just one pretty picture, so I added more. Crafted with AI and a sprinkle of internet stardust, it moves in mysterious ways, just like the tides of the ocean — except it’s your mouse calling the shots.

So there you have it. A dashboard that’s not just a feast for the eyes but a tribute to our beautiful planet. Dive in, explore and let’s make every day Earth Day.

MIT License