OUGD504 - Studio Brief 2 - Final Coding and Finishing.

The first element I coded was the navigation bar of the homepage.

CSS

HTML

Rollover Navigation Buttons

Next was the contents of the homepage. This was a grid of four rollover images.

To code the landing page, I used the same container size and placed the type as a png into it with the rollover button placed over that. The button would link to the homepage after the audience were made aware of what the site was for.

To code the dialogue throughout 'What Camera?' interactions I duplicated pages and added amendments in the coding for links and different buttons/images. These were done for every possible way of answering questions and organised as well as possible. This lead to 30 different pages just for the results.

 For the shop page of the website I needed to make the grid effective of the space in the container available I did this in the following way:

The column spans were duplicated four times with different rollover images and links to the other products to make everything equal.

Each product page would contain the same coding with two variations of 'add to cart' buttons and a different background image for each one.

The checkout page was coded the same without the further buttons.