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

#frontendchallenge #devchallenge #css

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

Inspiration

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.

Demo

Journey

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.