About Us
You guessed it. This isn't really an About Us page. It is a demonstration of using flexbox for different purposes.
Flexbox
Except for the nav element this entire page was created using flexbox.
We used the main element instead of div.main to make it completely semantic
What's semantic? That just means it was built using box elements created for a specific purpose, namely: header, nav , main and footer.
The main element isn't supposed to contain any kind of site navigation, a rule that needs to be revisted, so we use div.main when it does. No one listens to me, so that's just my two cents worth.
The flexbox we use in this mini site is about as basic as you can get.
We only used the column or y axis one time in a media query that includes the header. Simply shows how to center the header text.
Media Queries
Media Queries are on the way out. They'll still be used, but sparingly.
The original version of this mini site template used about 8 to resize text and adjust margins and padding.
This version uses only two media queries.
One is used to activate the Modal Menu and the other stacks columns and images for mobile viewing.
The Clamp Function
This little gadget single handedly eliminates the need for all those media queries.
Learn to use it and you be ahead of the herd in the web development circle. Add nesting in style sheets and you'll be two steps ahead.
Both style sheets include examples of using the clamp function for font-size, line-height, margins and padding.
NOTE: For those using the W3C Validator to check their CSS, it doesn't support nesting yet so you can ignore those error flags.