1. Save these five files to your module5 folder by right-clicking on the link and selecting Save Link As...:pacifictrail.html, pacific.css, sunset.jpg, coast.jpg, and background.jpg
2. Open the pacifictrail.html file and make the following modifications. Refer to section 7.4 - 7.7 in Chapter 7 of your text:
   • Configure a viewport meta tag that configures the width to the device-width and sets the initial-scale to 1.0
   • Create a new link element in the head section that associates the web page with pacificprint.css for print media
   • Be sure you use the media attribute with the appropriate value in both tags used to connect the external CSS files
   • Save the HTML file

Create the Print CSS

1. Open pacific.css and save the file as pacificprint.css into your module5 folder
2. Edit the existing rules as follows:
   • set the width of the #wrapper to be 100% and remove the min-width and box-shadow property
   • stop the navigation menu from displaying
   • change the left margin of the main content area to be 0px
   • change all text color to black
   • remove background image from the body of the page
3. Save pacificprint.css and validate your code

Create the Mobile CSS

1. Open pacific.css file and add these new media queries to the end of the file using @media rules:
   • Tablet -- Code a media query to select for typical tablet device veiwport size with a max-width of 1024px. Create these new styles within the media query:
     • configure a body element rule with margin and padding to 0. There's no need to display the background image so set the background-image property to the value none.
     • configure a wrapper id rule. Set the width to auto, min-width to 0, margin to 0, and box-shadow to none.
     • configure the h1 element rule by setting all margins to 0
     • configure the nav element rule so that the layout used is a single column. Set float to none, width to auto, and padding to 0.5em
     • configure the nav li selector. Set display to inline-block
     • configure the nav a selector by setting padding to 1em
     • configure the main element selector. Set padding to 1em, left margin to 0, and 90% font size.
     • configure the footer element with a 0 margin

1. • Smartphone -- Code a media query to select for typical smartphone device veiwport size with a max-width of 768px. Create these new styles within the media query
     • configure the h1 element rule. Set height to 100%, font size to 1.5em, and left padding to 0.3em.
     • configure the nav element rule. Set padding to 0.
     • configure the nav a selector by setting the display to block, padding to 0.2em, and font size to 1.3em. Also configure a solid 1 pixel bottom border (use #330000 for the border color)
     • configure the nav ul selector and set margin and padding to 0
     • configure nav li selector with block display. Set margin and padding to 0
     • configure the main element selector. Set 0.1em top padding, 0 right padding, 0.1em bottom padding, and 0.4em left padding
     • configure the main img selector to not display. Set display to none and 0 right padding
     • configure the main ul selector to use list-style-position: outside;
     • configure the footer element. Set padding to 0
2. Save pacific.css and validate your code.

https://www.mccinfo.net/info1311/links_lists_layout/assignment/pacifictrail.html

https://www.mccinfo.net/info1311/links_lists_layout/assignment/pacific.css

https://www.mccinfo.net/info1311/links_lists_layout/assignment/sunset.jpg

https://www.mccinfo.net/info1311/links_lists_layout/assignment/coast.jpg

https://www.mccinfo.net/info1311/links_lists_layout/assignment/background.jpg