This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

I was really undecided about what to do for this challenge, and you can see that in my Figma.

So, I started thinking about a shelf full of potions, like a witch’s laboratory. With that idea in mind, I began the design, avoiding complex figures.

Demo

Click here to see Demo Here my reposit

Journey

This is the first time I’ve done a project like this. I only use HTML and CSS. I usually only did small things with basic CSS tools, but this was quite a challenge; to give you an idea, I have over 1300 lines of CSS! That’s a lot for me.

During this process, I learned several things, but here are the most important:

::before ::after Yes, it’s probably the most basic thing in the world, but it helped me avoid adding more HTML lines and was very practical.

Animation This is my favorite part and, at the same time, my worst nightmare. I never thought animating something as simple as starlight, eyes, or a ghost would be so difficult, but when I finished, I wanted to do more animations!

Using the same HTML div name in other elements I don’t know how to explain this part, but I used the same HTML code for the different parts of the bottles, so in the CSS I only had to make small changes, instead of starting from scratch. This probably saved me a lot of time.

AREAS FOR IMPROVEMENT: First, I could add more elements, as it looks empty, but I wasn’t sure which ones. I should have been more creative.

Second, without a doubt, I need to create a responsive website. This involves using media, Flexbox, Grid, etc. I got stuck many times trying and became quite frustrated.

I hope to return to this project in the future and improve it by adding elements with more complex shapes and more eye-catching animations.