DEV Community

Cover image for Interactive Retro Office Desk
Navin Kumar R
Navin Kumar R

Posted on

Interactive Retro Office Desk

Frontend Challenge CSS Art Submission

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

Retro Office Setup Preview
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)

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

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!😊

Collapse
 
navin_kumar_r profile image
Navin Kumar R

Thank you so much for the kind words and encouragement!😁 I'm really glad you liked the retro office desk project.