Team members

As part of the Cat and Rat website, I decided to include a "Team" page, in which all of the team members are listed, along with a photo of them, their contributions to the film and a few contact details.  I was originally going to have a written synopsis for each member but for the time being, I have decided against that, as writing about oneself is a profoundly hard task and also, I thought that it may be better if the work speaks for itself.

After I got the list of details from each member about their contribution, I decided to list it on the page in six sections; with each section focused on each member.  I did this using a table as this is the quickest method of splitting a web page into six sections (but not always the most ideal).  However, when I did this and I began listing, some of the text began to overflow into the footer.

I decided to go for a more interesting look than this so I decided to find an "accordion" plugin, which means that all of the information would be kept under headings and when the user clicked on a heading, it would expand to show the information.  Javascript, I believe, is brilliant when you know how write it, but it can be a real pain if you don't know.  Thankfully, I found this very straightforward, pre-written javascript plugin from Switch on The Code, a terrific site for javascript-based solutions.

My idea was to have each name of the team member as a heading, and then when the user clicks on a name, the details of that team member are revealed.  Obviously, I couldn't have the accordion with the default fonts and colours that we see in the Switch on The Code website, so I had to go in to the CSS of this accordion, which I pasted into our site, and then tweaked it to fit the aesthetics of the website; namely the font face and the removal of the borders and background colours.

Click on this link to see what the "Team" page looks like now: http://www.catandratfilm.co.uk/team.html

You will also see that I created some buttons as links to each profile in the Contacts section.  I made these simply by taking them from my own personal website and then applying a filter to make them brown.  I also created extra ones for the website and email links which have a mixture of Chinese and English.

I still need to get some profile pictures done and then the rest of the contacts for the group