DEV Community

Cover image for Submission For Front-end Challenge - Earth Day Edition 🌍Pale Blue Dot

Posted on

Submission For Front-end Challenge - Earth Day Edition 🌍Pale Blue Dot

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.


For this Frontend Challenge, I wanted to honor our amazing planet and celebrate Earth Day with CSS art. Inspired by the iconic "pale blue dot" words from Carl Sagan, I tried to make a visual representation that captures the beauty and significance of Earth in our universe.



Participating in this CSS art challenge was a fun and educational experience. I used CSS animations to make the Earth spin smoothly. By adding keyframes to the background-position property, I created the illusion of rotation.

The starry space background is also made with just CSS! I put two pictures together and used a special CSS property 'background-blend-mode' to simulate movement. This technique seamlessly merges the images resulting in a big space scene. It shows how amazing the Earth is in our vast universe.

I'm excited to have joined this challenge! It provided a great opportunity to learn new skills and unleash creativity with CSS.

Top comments (3)

_eduard26 profile image
Eduard Constantin

that globe looksπŸ”₯

sarahokolo profile image
sahra πŸ’«

I love it✨. The words just made it seem larger-than-life

schmoris profile image

That animation is so effective and dynamic! πŸ˜ƒπŸ˜ƒπŸ˜ƒ