Push/Pancakes RWD demo

<main> HTML5 element for main content

This RWD page is a variation of the Push menu, using a Media Query. It uses the ☰ "pancakes" symbol (☰) with the pulldown menu for mobile devices. When you push the ☰ on a cell phone the mobile Nav appears. It is a 2-column Responsive Web Design (RWD) template/demo using HTML5.

Note: When using media queries, always design for mobile first, which will allow the page to display faster on smaller devices.

Right-click and choose View Source to see both the Cascading Styles and the HTML code used to create this page.

Note: Tables may not play well with RWD, so avoid tables!

When viewed on a smart phone or a device less than 768px wide the navigation will display vertically, to fit the small device. When viewed on a tablet or desktop, the navigation will display horizontally.

Test this live by resizing your browser window or rotate your cell phone from portrait to landscape. Besides changing how the navigation is viewed when the screen is resized, notice how the phone number is displayed on the right size when viewed on a wide screen, but it is stacked under the slogan on a small screen.

Notice the img definition in css:
img {max-width:100%; height:auto}

Try to use percents instead of pixels for elments. Below is media query code for wide screen, side by side:
@media only screen and (min-width:1000px){
main {float:right; box-sizing:border-box; width:75%}
aside {float:left; box-sizing:border-box; width:25%; padding-left:2%}
} /* close media 1000px */
Note1:  The box-sizing property above takes into consideration both padding and borders, making it easier to set percents. If the percents are not set correctly, the aside element with display under main, instead of to the left to it.
Note2:  Below is code for smartphone screen, portrait, for stacked vertical display:
main {float:left; width:100%}
aside {float:left; width:100%; padding-left:2%}

Do with your styles, colors, design, and banner.

Students: Add a beautiful customized banner in the <header> element.

Be sure to change colors and styles to your preference, and add your background.
Change the 3-part navigation background image color and design.
The navigation background image is: url(images/navBackground.gif)
Right-click and choose View Source to see code and the internal stylesheet
Also be sure to put the internal styles in a separate external .css file.