Concluded Project

It’s done! Finding the time to finish up was the hardest part :) The
responsive went really smoothly with some simple media queries at
logical break points. I based the breakpoints on how the text and
imagery flowed as well as a couple of the traditional break points for
common devices and screen resolutions.
Things I learned:
• Picture stacks with pure CSS - I had never tried this.
• Understanding the use of padding-top: x% to create a responsive
banner. I had to really dig in to understand how the element that
receives the padding-top must be inside of the element that has the
full width you’re looking for, then its child has the absolute position
and the proper top/bottom/left/right placement and 100% width. Works
out really nicely.
• I hadn’t yet made an SVG based icon font so I got to do that using
fontastic.

All in all it was a fun build I’m happy with the results.

Options for consideration:
• Hover effects can be different - I just chose some pretty simple ones.
• Mobile layout presented many options as far as break points, h tag
placement, etc. Again, with no direction on this I chose what made
sense to me and went with it.
• SVG vs Font vs PNG vs Sprite - there are always lots of options for
imagery so I mixed it up a bit. If there’s a standard/preferred method
I would use that.