This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page
What I Built
I created an interactive website featuring fun scroll events and simple fade animations.
I used Figma to draw the Earth and people, and the website's colors are inspired by the colors of the Earth.
I aimed for a design that is simple yet visually appealing and effectively communicates the message!
Demo
It does not work well on mobile
https://dev-dong-su.github.io/Dev-to-FE-challenge-Earth-Day/
You can see source code here
https://github.com/dev-dong-su/Dev-to-FE-challenge-Earth-Day
Journey
I implemented a section where a person flies in and hugs the Earth using scroll events and element positioning.
However, it was challenging because it behaved differently depending on the browser's height.
Although the outcome was a bit different from what I initially envisioned, I still had fun and found it satisfying after several hours of work.
Top comments (11)
Impressive. I like the idea badly. However, you should add an indicator to tell your visitors scroll down. When I first visit I didn't see anything worth so I leave in a mere second. Luckily I come back and read your article. That is the only elephant in the room. The rest is so good that you make me envious you.
That's a great idea, thank you! I've added the indicator right away.👍
I think to be clear is really good add an indicator
Congrats on the win! 🙌😄
Thank you!😊
Your demo isn't visible. 404 error!
omg thank you!!
Landing page looks amazing! The design, the font, the colors, how you have placed content, the scroll feature.. everything Iooks good!
You might want to consider adding some accessibility attributes because I guess that's one of the judging criteria! All the best!
Thank you for the great feedback.😁
I will make sure to consider accessibility more carefully as you suggested!
Very funny and fresh result. Congrats!
Thank you!