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
Top comments (6)
I think it got broken on FirefoxNope 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 babyBeautifully!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.
I'm seeing this on desktop and is a really beautiful result. Layout reminds me a magazine and color transitions look great! 👍👍👍
Sweet, thank you! I was trying to cook up something that's a little unconventional, and it looks like it worked!
This is amazing. Made me see that I still have so much to learn
Thank you! So do I, there’s always something new to discover and learn.