web: experiment with viewport and columns

Converting a print page to html design. This layout uses viewport width and height, and columns. The result is a responsive design.

The inspiration page features a background image, a section heading on top, and headings that are right aligned. The text is in 3 columns aligned on the bottom of the page and has a learn more link. The bottom of the page has a white background with legal text.

The web page result is responsive, so the number of columns is dependent on the width of the screen.

View the html page at http://sullivanlehdesigns.com/play-examples/camaro-layout.html. Resize the browser to see the effect screen width has on the layout.

Testing:

viewport sizing
css columns

page layout with background image, and text — Page from Chevrolet's "New Roads" magazine, issue 9

basic html page at width showing 3 columns — Basic html page at width showing 3 columns with a transparent background so text is legible when it overlaps the car.

mobile page layout — mobile screen size has smaller background photo, headline below the photo, and 1 column of text.

I was curious if the columns could wrap around the shape of the car like the print version. This isn’t currently possible without forcing the text into explicit columns, and it was more important to me that the text flow between columns based on screen size so it remains legible.