Project Two: Home page progress

I have been working on my home page. I have managed to get all the icons sorted for each of the hexagons as well as give them each a hover. The page has all the correct colours now too.  For the hexagons I used the classes "orangeone", "orangetwo", "pinkone", "pinktwo" etc. "One" representing the first rectangle, "two" representing the second rectangle. This mean't I didn't have to go through and give every single rectangle of every hexagon a different name. I could just do it according to the colour.

I have decided to use the menu that runs across the top of the page. I might still change this later on though. I had abit of trouble getting the menu to sit in the right place and making everything evenly spaced. I also figured out how to get the font working that I wanted to use. It was all just a matter of copying some code from google fonts and placing it in the HTML. 

Because I have broken the menu up into two parts like shown above I realised that the right menu takes up slightly more room as it has more letters than the left side. This has mean't that something won't quite be evenly spaced. I have decided to not make the logo  "margin: 0 auto" and instead just move it to make it look like it is in the middle of the two menus. If I don't do this there will be a really big gap on one side of the logo compared to the other. 

Final menu:

I have given the menu a hover as shown above. It is the same pink I used for the hexagons. I wanted my menu to have an underline but instead of leaving the "text-decoration" on I have used "text-decoration:none;" and given them a "bottom border." This way I can control the weight of the line and the space between the line and the word. 

I have also given a hover to the link "Site Map" on the footer. Everything on the page has been linked correctly as well. Some just don't work as the page doesn't exist yet.

Final footer:

Final home page: