Chocolate CSS devchallenge 🍫
Tags: frontendchallenge, css, devchallenge
Published: 2024-03-25 12:28:51

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

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

## Demo
<!-- Show us your CSS Art! You can directly embed an editor into this post (see the FAQ section of the challenge page) or you can share an image of your project and share a public link to the code. -->

{% codepen https://codepen.io/marielavd/pen/ExJmgdp %}

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="ExJmgdp" data-user="marielavd" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/marielavd/pen/ExJmgdp">
  Chocolate</a> by Mariela (<a href="https://codepen.io/marielavd">@marielavd</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

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.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->
---------------
**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.

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->