Design Production: Design for Web - Deli Restaurant

I decided to code the website I mocked up for Deli restaurant. I did some calculations to work out how it would be split up:

I inputted them using different colours so I could see the different sections.

Using a code from the a coding site I put an image I took myself as a full background image.

I realised I didn't need the side column to separate the navigation bar from the edge of site and could just space it away. I chose to centre the entire site as the size of the screen was  bigger than expected and it looked odd to the left as there was a lot space.

I also took out the bottom column as that also wasn't need and changed the size of the navigation bar so instead of using an image I could actually change the colour and opacity of the column.

I did this and then made the top column clear as it was only to place the next column in the correct place.

I put in the image I had on my digital mock up, it wasn't spaced correctly or the right width so I altered it accordingly to the coding.

This looks a lot better as it fits better with the design. Although the two are the same colour codes and same opacity they appear as different colours for some reason..

I did the rollover for what I had in my digital mock up but didn't feel it fitted in right with the rest of the design concept.

I then thought of kerning the word for the rollover as it fits better with the logo and rest of the brand.

This is an example 'About' being rolled over and the others as normal in the navigation bar. I played around with the position but felt that centred fitted better with the placement of the logo and the navigation bar strip style.

Homepage in full