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

💻 Desk of a Dev – CSS Art

Inspiration

Office culture for me revolves around the dev's desk – a keyboard clacking away, a coffee mug steaming, sticky notes with deadlines (and pizza reminders 🍕), and a terminal always open. I wanted to bring this everyday developer vibe to life purely using HTML + CSS, with an interactive terminal and fun easter eggs like sticky note messages and dark/light mode toggling.

Demo

🔗 Live Demo: View the project

🔗 GitHub Repository: https://github.com/prashantgohel321/Desk-of-a-Dev-CSS-Art

💡 Try clicking the sticky notes or typing commands like help, echo Hello, brew coffee, git commit -m "Success!", etc. in the terminal for some fun surprises!

Journey

This was a deep dive into pure CSS creativity. Some highlights:

• 💡 CSS-only art – Everything on screen (monitor, mug, sticky notes, keyboard, mouse) is built with CSS.
• 🌗 Dark/Light Mode toggle via a simple button.
• ⌨️ Interactive Terminal built with input handling in JavaScript and a command system that mimics dev tools.
• 📝 Sticky Notes that display fun pop-ups.
• 🖼️ Responsive design for smaller screens too!

What I learned:

• How to simulate 3D/realistic effects with shadows and transforms.
• Creating interactive elements (e.g., sticky notes and the terminal) without any external frameworks.
• Balancing creativity with performance and interactivity in pure frontend work.

Next steps:

• Make the terminal support scrollback history.
• Add a productivity timer like Pomodoro built into the desk!
• Animate the coffee steam more naturally.

Thanks for checking out my submission!

Feel free to ⭐️ the repo or connect with me on GitHub / DEV!