we_coded iMac CSS Art

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

Inspiration

My inspiration was apple iMac (Mac in css 😅), although we still celebrating we_coded 2024, so I wonder how could I join both ideas! Create the art and support the great event! 🤓

Demo

source code: https://github.com/pavelee/css_art

Journey

It's my first time creating css art! 🥳

Firstly I thought it's gonna be harder, but step by step I was moving forward. What important I had really fun time! 🤗

Getting good CSS structure is still challenging for me, I used pure CSS without any preprocessors and I could say it's pretty hard to make it clear! 🥲

I thought how could I refractor the code. I tried to create mac's window template, so it's reusable and shared across two windows on my Mac

  <!-- window tempalte -->
  <!-- <div class="window">
    <div class="bar">
      <div class="controls">
        <div class="close"></div>
        <div class="minimize"></div>
        <div class="maximize"></div>
      </div>
      <div class="title"></div>
    </div>
    <div class="body"></div>
  </div> -->

For sure it's a good direction to keep it more clear! 🚂

That was a good time 🧑‍💻, thanks for the challange! ♥️