Chocolate CSS devchallenge 🍫

#frontendchallenge #css #devchallenge

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

"Forget love ❤️ ... I'd rather fall in chocolate!"

Demo

See the Pen Chocolate by Mariela (@marielavd) on CodePen.

Journey

I started with the idea to present only a couple of chocolate blocks but then I thought why not a whole chocolate bar. I drew first the chocolate blocks, then I added the package. But this didn't look interesting at all so I continued by adding a missing block (I wish I could eaten it instead 😂) and some leftovers.

The part with the animation was a bit tricky for me since I was not sure how this could be achieved so I did a little digging. Playing around with the CSS @keyframes rules was fun and as of now, I can proudly say I've mastered them.

MIT License
Copyright (c) [2024] [Mariela Dimitrova]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
ONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.