M3: Grid Layouts and Responsive Design

Fall Colors

To fill the subject matter of this page, I picked the changing colors of autumn leaves. I also took some photos of trees around my neighborhood to go along with the text content. To summarize, most trees contain a pigment called Chlorophyll that makes their leaves look green. Many trees also contain a pigments called carotenoids and anthocyanins, which look red, orange, and/or yellow.

During the summer, leaves have more chlorophyll, so the dominant color is green. As days get shorter in the augumn, trees stop producing chlorophyll as they prepare to hibernate during winter. Once the green chlorophyll is gone, the underlying colors of the carotenoids and anthocyanins are much more visible for a few weeks until the leaves are shed.

There is a ton of information available on plant life cycle, but the main purpose of this page is to showcase how grid layouts can be used for responsive web design. You can resize this window to see content rearrange, and the browser's inspector will let you see the grid style rules. In the next section. you can see a few photos of trees changing colors. I also added a section beneath the photos with placeholder text to fill out the page.

Pictures

Additional Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed blandit turpis, sed tempus mauris. Integer vestibulum velit felis, sit amet posuere ante commodo id. Aenean eu malesuada libero, in tempus diam. Nulla bibendum ante eu odio consectetur molestie. Fusce finibus odio velit, ut elementum augue pretium vitae. Aenean efficitur, dolor eu imperdiet porta, magna neque placerat mi, ac tempus leo est ut lacus. Nam aliquet dolor arcu, nec ultricies est venenatis id. Proin placerat augue eu nunc condimentum rhoncus. Mauris fringilla est ac condimentum mollis. Duis diam purus, sodales quis risus et, mattis elementum purus

Morbi imperdiet purus id volutpat varius. Quisque posuere, nunc nec commodo vestibulum, dolor justo aliquet turpis, eget sagittis nulla eros nec augue. Ut non cursus nunc, at pulvinar sapien. In nec placerat enim. Phasellus sit amet ligula non risus auctor dapibus et convallis odio. Donec egestas ante quis felis faucibus efficitur. Fusce condimentum ex elit, ac egestas sem commodo sed. Sed sodales ex aliquet iaculis finibus. Nam porta mi ut dolor eleifend, vel semper tellus sodales. Phasellus bibendum nunc ligula, at eleifend ante elementum vitae. Praesent vestibulum ac libero quis faucibus.

Sed euismod venenatis erat at lobortis. Curabitur sed venenatis quam. Morbi sit amet cursus libero. Nunc at leo laoreet, molestie dui vitae, sollicitudin felis. Suspendisse quis magna ac odio interdum tincidunt volutpat eget sem. Quisque tempus malesuada condimentum. Fusce nec rhoncus eros. Aenean semper maximus efficitur. Etiam mattis urna vel aliquam tristique. In fringilla leo sed tellus vehicula rhoncus. Vestibulum vulputate auctor blandit.