Brittany Bellanca | Web Design & Front-End Development

The Office Fan Site

Branding Kit

Collaborative fan website featuring CSS animation for television series "The Office"

Client: Fans of "The Office"

Date: March 2018

Skills: Responsive Web Design, Collaboration, CSS Animations

View Site

This project was a collaborative group project for Advanced Web 1 at the University of Florida. It required a three-person team to create a two or more page website about a television show.

There were three roles for this project: the designer, the coder, and the team leader. Our designer, Hanna, created a clean, effective designs for the site. I was the coder, and took pride is transforming the flat, two-dimensional mockups into usable a website. The desktop version of the site did have a couple iterations; but, it was all worth it as the final site turned out exactly as it was designed. Our team leader, Lauren, supported us throughout the process, and made executive decisions when needed.

I particularly enjoyed adding the animations for this site. I used Animated.css, but altered their code to meet our needs. On the landing page, after a short delay, The Office logo hinges and falls, which is standard in Animate.css, but I tweaked the code to make the sign reappear at the top of the site. I also used Hover.css for the animated navigation.

I really putting this website together. Using these pre-made libraries allowed me to gain the confidence to create my own animations in my next project.

This site is a small site, it was a work of true collaboration. I think that is part of what makes it so good. Multiple minds came together and a very functional, beautiful site was created.

Want to Learn More?