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/