This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
Hello fellow developers!
I tried to show my ideal desktop setup, trying to be minimalistic and give a clean look!
It almost resembles the setup I have at work.
Demo
https://codepen.io/ps-saini/pen/KwdVGyW
Journey
My initial idea was to create a css art in 2D style, but then I thought I should try something new and tried my best to give a 3D look at my art using perspective, translates, etc...
For the CSS part i used tailwindcss and also there is some javascript to handle the window resize. I tried my best to keep the art intact while resizing the window, so I used percentage units or vw units.
In the right monitor I also included the Axero website that can be surfed as you wish (not that I needed to handle the navigation, it's just an iframe 🤣).
I did not have much time so I'm publishing it as it is.
My next step was to make the left monitor more interactive.
I was planning to use GSAP to give some animations to the items in the windows but I got this far and sadly I will not be able to add the functionality in time before the due date.
Hope you guys like it!
Top comments (0)