Glam Up My Markup: Earth Day Celebration Dashboard

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

Comments

[Đăng Tú]

I think it got broken on Firefox Nope it just not very responsive. But it's impressive. I can feel luxury from it.

Your frosted glass is such a artisitic work. How can I denied such a dedicated work like this! I shall steal this baby Beautifully!

[Eduard Constantin]

For smaller screens is not too responsive, but if you access the link I put under the demo you can watch it in full screen.

[Jorge del Campo]

I'm seeing this on desktop and is a really beautiful result. Layout reminds me a magazine and color transitions look great! 👍👍👍

[Eduard Constantin]

Sweet, thank you! I was trying to cook up something that's a little unconventional, and it looks like it worked!

[Mewancdot]

This is amazing. Made me see that I still have so much to learn

[Eduard Constantin]

Thank you! So do I, there’s always something new to discover and learn.