Earth Day Challenge in CSS Art
Tags: frontendchallenge, devchallenge, css, codepen
Published: 2024-04-29 02:11:54

_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**

The inspiration for this challenge came from a very famous   Bible verse about the Living God creating heaven and earth. 
I wanted to remind that God cares for all things and He has intentionally placed the beautiful things which we all enjoy on this earth and most of all He cares about saving the souls of men. I hope that this verse inspires us to really pay attention to God's creation and be responsible with the way we treat our world. 

**Demo**

https://codepen.io/polinaeliana/full/ExJJXBo

{% codepen https://codepen.io/polinaeliana/pen/ExJJXBo %}


**Journey** 

Before participating in this challenge I didn’t know that CSS Art even existed, I have  just completed the beginner level web dev course on codeacademy   https://www.codecademy.com/enrolled/paths/learn-how-to-build-websites where I’ve acquired the robes of basics for web development.  At the start of the challenge  I felt both excited and curious, immediately I jumped into the ocean of search where I came across few very helpful articles, one of which was on https://medium.com/@juliet.brown/creative-coding-learning-to-draw-with-css-96a49bccd7a5 . This article became  my go to throughout the  whole project, this was where I learned how to create basic shapes with border-radius, clip-path and discovered resources like https://bennettfeely.com/clippy/ and https://9elements.github.io/fancy-border-radius/#30.30.35.22--  which are the  tools to help you create shapes.  For this project I dicided to work  with circle shapes to create my center piece which is  the big cloud. I started by setting the border-radius  for all the circles to
 clip-path: circle(50% at 50% 50%) I found how to do it here https://stackoverflow.com/questions/65688188/css-clip-path-partial-circles, I also had to set both width and height to 300px. For position I set the main circle (.cloud) to Relative and the rest of the circles to Absolute so that they can be easily adjusted by setting top and left to the appropriate px.  I wanted to highlight specific parts of each circle with the border so I  chose the silver shade in rgb(227, 224, 224), and added it to the border which was set to 15 px  and solid. Next I had to choose where exactly I wanted the silver lining to be on each piece, for that I used border-bottom, border-top, border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom -right-radius, depending on the position of the lining I set the values of these properties to either none or 50%. Last but  not least on my mind was animation, this was something non-negotiable for me because since completing the course on codeacademy I dipped by feet into the waters of animation and absolutely loved the effects and influence it carries over the whole look of whatever you’re building. So I added my animation on both the cloud itself and the Bible verse by using @keyframes. Overall this was a great challenge to be apart of and it gave me an opportunity to code in a way I never did before. I am looking forward to participate in the future challenges.