Earth Day Celebration Landing Page submission

#devchallenge #frontendchallenge #css #javascript

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

What I Built

My main goal was to create an unusual aesthetic. Neo-brutalism, Y2k, and a little bit of Furiger Aero inspired me. I tried to mix and match styles and elements until I found something that I believe is visually appealing.
I mainly used CSS and a little bit of JS. I had to sacrifice a lot of readability, but I think it was worth it.

I hope you like it as well!

Demo

Try it out: https://esyfyi.github.io/2024-earth-day-frontend-challange/

Journey

My process was simple: I went online, looked for inspiration, tried to recreate them, and then mixed and matched until I found something I liked. I also used a lot of clip-paths and CSS filters; I like how the contrasting text interacts with the background illustration.

I used Adobe Firefly to generate the background illustration, and then I separated it into multiple layers using Photoshop.

I had to use requestAnimationFrame to smooth the scrolling animations, as using only the scroll events felt choppy.

Overall, I'm happy with the result, and it was a fun couple of hours.

Sorce code: https://github.com/esyfyi/2024-earth-day-frontend-challange/

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more