Office Desk - CSS Art Edition

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission

🎨 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