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: None

Date: March 2018

Skills: End-to-end, Responsive Web Design, Collaboration & Teamwork, HTML, CSS Animations

View Site

This project was a collaborative group project for Advanced Web 1 at the University of Florida. The professor grouped students into three-person teams to create an end-to-end, multi-page responsive website about a television show! There were designated roles within each team: the team leader, the designer, the coder. As the coder, I took pride in transforming the designer's the flat, two-dimensional design into a dynamic, engaging website.

I particularly enjoyed adding the animations to this site. I used Animate.css as the base, then I altered their code to meet our needs. My favorite animation is with the logo! After a short delay, The Office logo hinges and falls off screen, which is standard in Animate.css. I tweaked the code to make the sign fade back in at the top of the site. A standard effect from Hover.css was used for the navigation animation. We made a very strategic design decision regarding the responsiveness of the navigation: to shorten the characters names on smaller screens. This allowed us to keep a full navbar without stacking the links which would increase the height of the nav.

In addition to the logo and navigation, each page has three key omponents: the character image, a popular quote, and facts about the character. Regardless of the user's device, they are treated to some sort of animated entrance. On desktop, the character and their facts meet up in the middle of the page; then, a little surprise - the quote - appears when hovering over the character. On mobile, the facts slide up to meet the fixed character and their quote appears moments later. Take a look at the source code - perfectly indented. I love clean, consistent coding

It is true that this site is a small site, but it is a cute site; and, it is a work of true collaboration. I think that is part of what makes it so good! Multiple minds came together and a functional, beautiful site was created.

Want to Learn More?