Office Desk - CSS Art Edition

🎨 CSS Art: "Hacker's Haven" — Office Culture Redefined

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

🧠 Inspiration

When you think of a modern digital workspace, what's more iconic than a dual-monitor setup, a mechanical keyboard, and a cozy desk filled with gadgets? For this CSS art challenge, I wanted to create a "Hacker-style home office" scene — a space that feels alive with glowing monitors, RGB keys, and small but intentional details like a water bottle, headphones, mouse, and pyramid-shaped wall art.

This is a tribute to those of us who spend countless hours building, coding, designing, and dreaming — in our own digital caves.

🚀 Demo

Here's the final output of my CSS office setup:

👉 Live Demo: https://thecoderadi.github.io/Hacker-s-Haven/
👉 Code: https://github.com/TheCoderAdi/Hacker-s-Haven

🔨 Journey

The scene was built using only HTML and CSS — no external images or JavaScript. Here’s a breakdown of the process:

• Perspective & 3D Feel: I used transform, perspective, and rotateX/Y to give depth to the desk and devices.
• Monitor Effects: Each monitor has a unique content block — one with glowing terminal-style text, and another with animated green bars.
• Glassmorphism: The container div uses backdrop blur and soft borders to simulate a futuristic glass wall.
• Accessories: Everything from the bottle to the headphones was hand-crafted using only CSS box-model elements and a lot of tweaking.
• Keyboard Glow: A custom RGB-like animation simulates key lighting, giving it a cyberpunk vibe.
• Robot Wall Art: A minimalist robot drawing mounted on the wall just for fun (and to add personality)!

I learned a ton about layering, keyframe animations, and perspective transforms — and just how expressive pure CSS can be.

💡 What’s Next

I’d love to:

• Add a toggle for day/night mode
• Animate the terminal text typing line-by-line
• Make the scene partially interactive with small JS additions after the challenge ends

👥 Credits

This was a solo submission.
If you found this fun or inspiring, feel free to fork it or remix it for your own virtual office!

🏷 License

MIT License — feel free to use or adapt with attribution.

Thanks to DEV and Axero for this amazing challenge! 🙌
Let’s continue making the web more expressive and fun — one div at a time!