This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
For this challenge, I wanted to recreate the nostalgic charm of an old-school office setup with a modern twist — a cozy wooden desk, a classic black typewriter, a steaming coffee mug, and a memo fluttering on the wall. All brought to life using just HTML and CSS
The goal: show how far CSS art and animation can go in crafting immersive digital environments!
Demo
Live Demo on GitHub Pages
View Source on GitHub
Journey
This project was a fun exploration of CSS capabilities — from @keyframes and transforms to shadows and gradients. I limited myself to HTML and CSS only to stay true to the challenge theme and push the boundaries of what static frontend code can do.
Things I learned / experimented with:
Crafting realistic textures using CSS gradients
Building animated elements with just ::before, ::after, and keyframes
Layering and depth using shadows and z-index for a more immersive look
How minimal structure and styles can tell a story visually
What I’d add next:
- A wall clock with ticking animation
- A task list or calendar popup
- Office lamp with flickering light
Thanks for checking it out — and huge thanks to Axero + DEV for this fun creative challenge!
Built with ❤️ by @navin_kumar_r
Top comments (2)
Wow, this retro office desk project is absolutely impressive!😊
Nice job with this project! Thank you for sharing your creativity with us, keep up the amazing work! 🤗 Wish you the best of luck in the competition!😊
Thank you so much for the kind words and encouragement!😁 I'm really glad you liked the retro office desk project.