Code Breaker: Green Earth for Avid Cyclist & FOSS Advocate
Tags: frontendchallenge, devchallenge, css
Published: 2024-04-24 11:12:52

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4), CSS Art: Earth Day._

## Inspiration
<!-- What are you highlighting today? -->
As an avid cyclist and FOSS advocate, Earth Day holds a special significance for me. It represents our collective responsibility to protect our planet and embrace sustainable practices. With that in mind, I present to you a CSS artwork that captures the essence of Earth Day from my perspective.

## Demo 
<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->
I've created a CSS artwork that depicts a cyclist riding their bike on a winding path, surrounded by lush greenery and a vibrant sky. The cyclist represents the active, eco-friendly lifestyle that cycling promotes, while the natural elements symbolize the beauty and fragility of our planet.

You can view the live demo of this project [here](https://pizofreude.github.io/Frontend-Challenge-v.24.04.17/).

Or simply visit my [Codepen](https://codepen.io/pizofreude/pen/abxXWGJ), don't forget to like, share and subscribe for more.

Feel free to give a star to my Github repo for this project [here](https://github.com/pizofreude/Frontend-Challenge-v.24.04.17).

## Journey 
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

To create this artwork, I utilized CSS techniques such as positioning, animations, and creative use of CSS shapes and gradients. I aimed to create a visually appealing and dynamic scene that conveys the harmony between human activity (represented by the cyclist) and nature.

In this artwork, I've used HTML elements to create the structure of the scene, including the sky, ground, road, cyclist, trees, and grass. The CSS styles define the positioning, dimensions, colors, and animations of these elements.

The cyclist is animated to move across the road using keyframe animations, while the clouds drift across the sky. The sun glows with a subtle animation, and the biker pedals with a cycling motion animation.

I've also incorporated CSS shapes and gradients to create the various elements, such as the sun, clouds, trees, and grass.

## Conclusion
Through this CSS artwork, I aimed to capture the spirit of Earth Day and promote the eco-friendly lifestyle of cycling. By combining creativity and CSS techniques, I've created a visually appealing and dynamic scene that celebrates our planet and encourages sustainable practices. Feel free to explore the code, customize it, and share your own unique take on this in the comment section below.

Cheers!

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->