🔧 World Bicycle Day CSS Art : Frontend Challenge (June Edition)

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

Inspiration

Today, we are highlighting World Bicycle Day. Cycling has been a favorite hobby for both of us since we were kids, and it holds a special place in our hearts. When we saw the challenge post from the dev community, we thought it would be a perfect opportunity to celebrate our love for cycling. June 3rd, World Bicycle Day, is a day to promote cycling, its health benefits, and its positive impact on the environment.

Demo

Here is the CSS Art we created to celebrate World Bicycle Day:

Journey

Our journey in creating this CSS Art started with reflecting on our childhood memories of cycling and the joy it brought us. We wanted to capture the essence of a beautiful day spent riding a bicycle in the park.

Process

• Conceptualization: We brainstormed various elements that represent cycling and settled on a simple yet vibrant depiction of a bicycle against a scenic background.
• Design: We sketched the design on paper, focusing on the bicycle's structure, wheels, and the surrounding environment.
• Coding: Using CSS, we brought our sketch to life. We used various CSS properties such as border, border-radius, transform, and animation to create the bicycle and animate the wheels to give a sense of movement.
• Optimization: We refined the code to ensure it was clean and efficient, and we tested it across different browsers to ensure compatibility.

What We Learned

• CSS Techniques: We improved our skills in using CSS properties to create complex shapes and animations.
• Problem-Solving: We encountered and overcame challenges in aligning the elements and making the animation smooth.
• Teamwork: Working together allowed us to combine our strengths and ideas, resulting in a better final product.

Proud Moments

• Successfully animating the bicycle wheels to simulate motion.
• Creating a visually appealing scene that resonates with our personal experiences and the spirit of World Bicycle Day.

Next Steps

• Explore More Animations: We plan to delve deeper into CSS animations and transitions to create more dynamic art pieces.
• Interactive Elements: Adding interactivity to our CSS art to engage viewers more.
• Share and Inspire: We hope to share our journey and work with others to inspire them to explore CSS art and celebrate their passions through coding.

Team Members
@cssdru
@israebenboujema