This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

You ever look around and think, "Man, we're really messing up this planet"? Yeah, me too. So, when I stumbled upon this Earth Day challenge, I saw it as a chance to do something about it – in my own little way.

I wanted to create a digital space that reflects the urgency of our environmental crisis. You know, a place where Earth takes center stage, surrounded by reminders of our duty to protect it. And hey, who doesn't love a good metaphor? That's where our friendly janitor comes in – a symbol of the everyday actions we can take to clean up our act.

Now, I'm no front-end wizard, but I figured, why not give it a shot? After all, sometimes the most meaningful journeys start with a leap of faith, right?

So here’s to using my creative juices to annotate the issues that matter to remind ourselves of our responsibilities towards Planet Earth and to take action, big or small. Together, we can make a difference. 🌍✨

Demo

Here's a simple glimpse of my CSS Art project, created with HTML and CSS. If you'd like to take a closer look, you can find the code on my Github repo - https://github.com/mayank-sahai/dev-css-art-earth-day.

To view the final look, Please click here This is only created keeping a large screen size like a desktop or iPad in mind. It will not look good on Mobile screens.

Journey

It all started with a simple idea – create a digital ode to Earth Day that captures the urgency of our environmental plight. Armed with nothing but HTML and CSS, I dove headfirst into the world of front-end development.

First came the brainstorming session – how could I translate my vision into code? I decided to start with some humble info banners, little reminders of our planet's fragility. Then, it was time for the main event – Earth itself. But I didn't want just any static image; I wanted Earth to come alive, to be surrounded by reminders of our responsibility to protect it.

That's when the technical wizardry came into play. I discovered CSS animations and keyframes, allowing me to breathe life into my creation. With a few clever tricks, I made Earth rotate gracefully, while a tiny janitor figure wandered across its surface, cleaning up digital debris along the way.

At first, I thought, "Garbage everywhere! Let's surround Earth with it." But then I remembered, I'm not a frontend whiz. So, instead, I made the garbage fade away magically when the janitor got close. Pretty neat, huh?

Now, the background. I wanted something out of this world, so I went with the stars. But let's be real, I just sprinkled them randomly. I mean, who has time for precise placement?

And the cherry on top? The soundtrack – Lil Dicky's "Earth" on loop. But hey, it needed a little push from the viewer to start playing. So, I left a note, like a gentle reminder to allow the sound on the browser.

With each line of code, I felt a sense of accomplishment. It may not be perfect, but it's my humble contribution to the cause – a digital call to action in the fight to protect our planet for future generations.

Acknowledgments

A nod of appreciation to W3Schools and MDN Web Docs for their helpful CSS documentation. Couldn't have done it without you! 🙌📚