Main

AFB006

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

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

In addition, as the browser viewport (window) grows and you reach the breakpoint of minimum 900px, a slideshow section appears. You hide the slideshow on mobile to avoid a large download. At this larger size you want to display the slideshow. See desktop image.