Main

AFB005

The page (assignment) is designed for mobile. The only flexbox container is set to flex-direction column, therefore all elements are stacked in a column. The flexbox container contains the nav and main elements. See mobile image.

Once the browser window is expanded and reaches the breakpoint of minimum 700px, the flex-direction changes to row. At that point the layout begins to have a horizontal elements. The body color also turns orange. See tablet image.

As the browser viewport (window) grows and you reach the breakpoint of minimum 1080px, a slideshow section appears. At this point the body color turns red. You hide the slideshow on mobile to avoid a large download. At this larger size you want to display the slideshow. See desktop image.

To earn credit for this assignment, build a flexbox layout as close to the example as possible. Remember, you can hide elements with display:none and make them appear with display:block.