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 endeavored to build a distinctive design, consistently prioritizing responsiveness and exploring an unexpected yet vibrant color scheme. As with the first challenge, I strived to adhere to the guidelines as closely as possible. The comprehensiveness of my design this time around might be somewhat daunting, but I am confident that it is engaging (and hopefully resonates with you).

This marks my second venture into the Frontend Challenges. Despite grappling with time management for my side projects (and kinda losing), I find immense enjoyment in these challenges that inspire creativity and encourage thinking outside the box.

Demo

The demo is (again) as responsive as I could do it. I think the earth's image could be better handled (any ideas please comment down below). I tried to take into consideration the main ways to see the demo in Codepen: In the 3 different default "Change view" options and the Live View in a different page. Always considering the mobile view, which I think is the most common. But the Live View (or full page view) in Desktop is my favorite.

Journey

As with all projects, I required a concept to guide my efforts. This time, the project was relatively straightforward, being a landing page. Naturally, the Earth theme opened up a plethora of opportunities for intriguing animations to enhance the design. However, I didn’t want to simply add animations and consider the job done. My rationale is that when you encounter an aesthetically pleasing landing page, you appreciate it, but then what? You consume the content and move on, it becomes forgettable. Therefore, I aimed to create something that would elicit a “wow, what a fun idea” reaction from people. They would explore the page, perhaps experience an “aha!” moment, and be pleasantly surprised by a little something extra.

With an idea in mind, I set out to create a mini-game. However, crafting something as complex as Space Invaders was out of the question (given my professional procrastination tendencies). Instead, I envisioned something swift and vibrant: an Easter egg hunt. At the bottom of the page, I incorporated a message that reads, "Can you make a difference on this page? Find the 5 'green' actions. Hint: Some icons are clickable!" Now, those who have merely skimmed the landing page from top to bottom have a reason to revisit and discover these clickable elements. Alternatively, if you're sufficiently curious (or have a mouse), you'll notice the cursor transforming into a pointer, indicating that something is about to happen.

So, what happens next? I was brimming with ideas, many of which were too complex to execute in a single day. However, I was determined to implement a color transition, something that would signify a transformation on the "planet" or page. We start with a vibrant planet, adorned with clear blue skies and lush green hills. Yet, pollution taints this vibrancy, the air turns toxic and loses its clarity, and the once vibrant green becomes dull and lifeless. Implementing these changes on the page while maintaining sufficient contrast was a challenge in itself. However, I believe I've made a commendable effort in articulating my concept here, so at least some of you reading this post can comprehend why I opted for these colors and why they undergo a transition.

But wait...

Why do I persistently refer to it as a game? As the text indicates, you're tasked with identifying all 5 "green" actions. Similar to switching off a lightbulb, you can alter the state of most icons on the page. While most are conspicuously visible, one is cleverly concealed. Once you've successfully adjusted all of them to the correct state, a surprise awaits you at the top of the page.

That's about it! There isn't much to elaborate on this time, as I didn't incorporate a multitude of features. However, there's ample room for enhancement. Landing pages are the most prevalent type of page online, and my submission could benefit from additional accessibility features and animations. I may revisit this project in the future to further refine it, adding more features. While a theme switch may not be particularly relevant for this project, the option for different languages could be a valuable addition. Anyway...

If you're participating in the challenge, I hope you have as much satisfaction from your work as I do from mine. If not, perhaps the upcoming challenge will be the turning point for you. Thank you for reading up to this point, and until the next time, bye!

If you have some feedback you can write a comment or send a DM. English is my second language so please be nice to me ❣️