This content originally appeared on DEV Community and was authored by Dipanshu Sahu
This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
The developer life isn’t always about polished UIs and pixel-perfect components. It’s the late-night coffee sips, whiteboards covered in ideas, and that one browser tab with a stubborn error.
Office Vibes is a CSS tribute to that chaotic beauty, capturing a dev’s workspace in its raw, relatable, and aesthetic form.
Demo
Note: For the best experience, view this in a desktop browser at 100% zoom. The layout is handcrafted and may distort on other scales.
Preview
Journey
This project began as a blank canvas, quite literally. No JavaScript, no libraries. Just raw HTML and CSS. My goal was to express what it’s like to be a developer, not just build something for one.
- From the skewed books we swear we’ll finish…
- To the error tab sitting right next to our editor…
- To the blinking cursor and cozy desk lights…
Every detail was crafted manually using nested divs, shadows, transforms, and pure CSS creativity. Inspired by VS Code’s dark UI and the vibe of late-night hacking, I played with gradients, layering, and subtle hover effects to simulate depth and personality.
Key Things I Explored
- CSS-only animations (like blinking cursors)
- skew() and translate() to give perspective
- Dark mode palettes inspired by GitHub and macOS Terminal
- Manual color picking to create warm lighting and shadows
- Mimicking real UI elements with pure CSS
What I’m proud of most is staying within the boundaries (no JS!) while still conveying a scene that feels lived-in, cozy, and familiar to every dev.
License
MIT License, feel free to use or adapt with attribution.
Made with 
by @dipanshu447
Let’s keep making divs do wild things.
This content originally appeared on DEV Community and was authored by Dipanshu Sahu