DEV Community

Cover image for Submission For Front-end Challenge - Earth Day Edition ๐ŸŒPale Blue Dot
Thea
Thea

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.

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.

Top comments (3)

Collapse
 
_eduard26 profile image
Eduard Constantin

that globe looks๐Ÿ”ฅ

Collapse
 
sarahokolo profile image
sahra ๐Ÿ’ซ

I love itโœจ. The words just made it seem larger-than-life

Collapse
 
schmoris profile image
Boris

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