CSS Art: A Day in the Office

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

Inspiration

I enjoy creating beautiful front-end layouts and simple graphics. I found this challenge exciting because I don’t often get the chance to do this kind of creative work in my full-time job.

My inspiration comes from my experience at the office. We have hot desks since we don't need to come in every day, a meeting room where we spend hours discussing ideas, and a canteen where we take breaks and grab snacks.

Demo

Journey

I started by drafting my idea for what my office would look like.
I tried to show how differently we arrange our desks, and show what we do apart from completing our tasks, like meeting with the team, taking a break, and chatting with our colleagues.

What I learned

1. Used display: grid to create the office layout.
2. Used the clip-path property to shape elements.
3. Used position: relative and position: absolute to place components precisely.
4. Used ::before and ::after to add elements on top of the main element.
5. Used the animation property to animate elements.

Thank you for this challenge 🌷