Children

I like a sign that can be commonly found in coffee shops in the USA (although I've seen versions of it in other countries): Unattended children will be given espresso and a free puppy.

This is a that same sign, with a CSS twist, and coded in CSS:

• The cartoon in itself is a grid with two columns

• Each column is a <section>, also a grid to facillitate centering content

• The cartoon of the kid is CSS Art, with a bunch of <div>s, pseudo-elements and gradients.

The illustration of the child with coffee was inspired by this illustration found on Pixabay. I included a link to the drawing in the code for reference.

I made the background purple (a wink to the gradient I commonly used in the first comiCSS cartoons, and that can be seen on the drawing, too), but every color is handled via custom properties, so it is easier to change the colors to anything:

Finally, I played a little with animations, to make the cartoon blink and move the mouth, but I opted not to go that route.

----

Plus an alternative with Tailwind...