Earth Day Celebration Landing Page submission

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/

Comments

[sahra 💫]

Omg, this looks great 💥💥💥. Job well done 👍

[Ben Halpern]

Wow!

[Cipi]

Hey that's nice! I really like how the content and the style merge!

[Thea]

Amazing! 🤯

[Nadia]

It looks amazing 😀

[Rajeev R. Sharma]

This looks awesome. 🚀👏

[WebCraft Notes]

Awesome design and realisation! Great Job!

[Anmol Baranwal]

If I had to rate this, it would definitely be 100 out of 10. Not kidding!
I love it and went crazy the first time I saw it 🤯

[Nabil Alamin]

Pretty cool 👌

[tranluyen]

Wow, the effects look really impressive! However, if you could make the content easier to read, that would be even better!