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/
