Project Two: Coding the homepage

I have started coding the homepage. I managed to get so far with the hexagons and then didn't know what to do next. I couldn't seem to figure out how to make the top rectangle the one that has the image. I then realised that I just needed to rotate the rectangles in a different order. Once I had hexagons I found that I had two that weren't inline with the rest but all I had to do was make the main div container wider. The measurements weren't quite matching up and this is why I had that problem. Below are some screenshots of what I ended up achieving.

In the above screenshot I have each rectangle as a different colour to help see which colour is acting as the top rectangle and then I just added in a background image to that same rectangle.  

In the above image I have gone through all the code and given each top rectangle a different class name and then in the CSS I have started to change the background images so that each hexagon has a different icon rather than the same in all of them. The text isn't quite right yet I still need to figure out how I get my font to work that I have chosen from google fonts. I also haven't added a menu yet because I am still undecided which menu I should choose.