Earth Day Celebration & Problems

#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

I wanted to create a landing page about Earth Day, as a reminder that Earth is our common home where we need to keep order for a higher quality of life.

Demo

Project Demo
Source Code

Journey

The main idea I wanted to achieve is to remind people that April 22 is not a holiday in honor of the Earth, but a reminder that many environmental issues remain unresolved. And one of the main tools to keep the ecosystem "healthy" is to inform people about these problems. So, my landing is in black tone. Honestly, the first concept didn't work out for me, as I was not allowed to touch the original HTML according to the contest rules. So, I decided to do something simpler.
And since there is a lot of text in the proposed code, I wanted to draw users' attention to it for animations. I hope I achieved something.
Anyway, I learned a lot, for example, how to work with IntersectionObserver, how to work with the DOM and how to create animations when scrolling a page.

Thank you for the challenge!