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

Inspiration

This submission was inspired by Frontend Friday Folks Fighting CSSBattle.dev hosted by Virtual Coffee. It is an activity where you take on a challenge at CSS Battle. I completed the CSS Battle #175. Evil Cat challenge.

Demo

Journey

This challenge provided an excellent learning experience. The task was to create a cat using CSS and HTML, which involved crafting shapes that are not typically seen on websites.

I started by breaking the image into 8 parts:

1. Face
2. Left ear
3. Right ear
4. Left eye
5. Left pupil
6. Right eye
7. Right pupil
8. Nose

I created a container that housed all the individual parts and positioned it at the center of the screen. The face was a simple rectangle with rounded corners achieved by applying a border radius. The ears were a bit more challenging. I solved this by creating a rectangle with only three borders—left, right, and bottom. The side borders were made transparent, and I adjusted the border widths until the desired triangle shape was formed, then rotated them to align correctly. The eyes are rectangles with two rounded corners on opposite sides and rotated for correct alignment. The pupils are rectangles with rounded corners. The nose was created using the same method as the ears.

I learned some new CSS techniques, including how to center an item on the screen, create a triangle, apply rotation, and round corners. I am proud to have achieved a 100% match for this challenge. In the future, I hope to add animation to make the pupils move from side to side.