CSS ART

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

I tried to recreate Michael Scott’s office from The Office. The idea was to turn a familiar setting into CSS art. I focused on the desk, the window, some books, and a few subtle details to give it that cozy office feeling feel.

I wanted to include the famous "World’s Best Boss" mug, but I couldn’t quite get it right. So instead, I made a framed photo and added the text

Demo

Journey

This was one of those projects where I just wanted to build something fun and visual with plain HTML and CSS. No JavaScript, just layout, layers, and a bit of patience. The hardest part was figuring out how to stack elements without breaking the proportions.

I used position: absolute for most of the items and organized the sections with wrapper divs to keep it manageable. I also leaned into CSS variables for colors and spacing, so I could make quick changes without hunting through every line.

Some parts didn’t go as planned, like the mug, but I still enjoyed the process. It was a nice break from usual web pages, and it helped me think more visually with CSS.