DEV Community

Cover image for Earth Day Celebration & Problems
Sergo
Sergo

Posted on

Earth Day Celebration & Problems

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

Earth Day Celebration Title

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!

License

Pictures:
Swallow
Dolphins

Top comments (2)

Collapse
 
jorgedelcampo profile image
Jorge del Campo

Wow! It's a really beautiful scrolling effect and very nice combination between images and texts.

Collapse
 
sergo profile image
Sergo

Thank you! :)