lindsaywparker / lp-comp-challenge-1

Lindsay's Static Comp 1

Project Overview

This version of Static Comp 1 is achieved using four levels of nested divs with display: flex;.

1. The highest level flex is applied to html to make centering the full graphic easier on very large screens.
2. The next level is applied to a div called .container that allowed for adjusting the placement of the links as a unit and the image.
3. The unit of links (a div called .menu) is then flexed to give us this great wrapped effect and also make responsiveness easier when the links stack.
4. Finally, each individual link is flexed to allow for easy alignment and justification, as well as to change the layout of the icon and link text from row to column when the links stack.

The image is from a Google search of "Today's Best Photographs," resulting in this great site from The Guardian. The color scheme is from Adobe Color, specifically the Dark Flower color theme. Icons are from Flaticon.

Images

Original Comp

Lindsay's Version